extends layout

block content
  script.
    function generateLengthMenu(setting_txPerPage, lengthMenuOpts) {
      var addedLength = false;
      for (i = 0; i < lengthMenuOpts.length; i++) {
        if (!addedLength) {
          if (lengthMenuOpts[i] > setting_txPerPage) {
            lengthMenuOpts.splice(i, 0, setting_txPerPage);
            addedLength = true;
          } else if (lengthMenuOpts[i] == setting_txPerPage)
            addedLength = true;
        }
      }
      if (!addedLength && setting_txPerPage != lengthMenuOpts[lengthMenuOpts.length - 1])
        lengthMenuOpts.push(setting_txPerPage);
      return lengthMenuOpts;
    }
    $(document).ready(function() {
      $.ajax({
        method: 'GET',
        url: '/ext/getnetworkpeers/internal',
        dataType: 'json'
      }).done(function(peers) {
        const connection_table_enabled = #{settings.network_page.connections_table.enabled};

        if (connection_table_enabled) {
          const setting_con_txPerPage = parseInt("#{settings.network_page.connections_table.items_per_page}");
          const setting_con_port_filter = "#{settings.network_page.connections_table.port_filter}";
          const column_width = (setting_con_port_filter == '-1' ? '25%' : '20%');
          let columns = [];

          columns.push({ data: 'address', width: column_width });

          if (setting_con_port_filter != '' && setting_con_port_filter != '-1')
            columns.push({ data: 'port', width: column_width });

          columns.push({ data: 'protocol', width: column_width });
          columns.push({ data: 'version', width: column_width });
          columns.push({ data: 'country', width: column_width });

          $('#connections-table').dataTable({
            autoWidth: true,
            searching: false,
            ordering: true,
            order: [],
            responsive: true,
            lengthChange: true,
            processing: true,
            iDisplayLength: setting_con_txPerPage,
            lengthMenu: generateLengthMenu(setting_con_txPerPage, !{JSON.stringify(settings.network_page.connections_table.page_length_options)}),
            scrollX: true,
            language: {
              paginate: {
                previous: '<',
                next: '>'
              }
            },
            data: peers.connection_peers,
            rowCallback: function (row, data, index) {
              const flagBlock = (data['country_code'].length > 1 ? '<span class="margin-left-5 fi fi-'+data['country_code'].toLowerCase()+'"></span>' : '');
              let colIndex = 1;

              $("td:eq(0)", row).html(data['address']).addClass('breakWord');

              if (setting_con_port_filter != '' && setting_con_port_filter != '-1') {
                $("td:eq(1)", row).html(data['port'] || '');
                colIndex = 2;
              }

              $(`td:eq(${colIndex})`, row).html(data['protocol']);
              $(`td:eq(${colIndex + 1})`, row).html(data['version']);
              $(`td:eq(${colIndex + 2})`, row).html(data['country'] + flagBlock);
            },
            fnDrawCallback: function(settings) {
              fixDataTableColumns();
              fixFooterHeightAndPosition();
            },
            columns: columns
          });
        }

        const addnode_table_enabled = #{settings.network_page.addnodes_table.enabled};

        if (addnode_table_enabled) {
          const setting_add_txPerPage = parseInt("#{settings.network_page.addnodes_table.items_per_page}");
          const setting_add_port_filter = "#{settings.network_page.addnodes_table.port_filter}";

          $('#addnodes-table').dataTable({
            autoWidth: true,
            searching: false,
            ordering: false,
            responsive: true,
            lengthChange: true,
            processing: true,
            iDisplayLength: setting_add_txPerPage,
            lengthMenu: generateLengthMenu(setting_add_txPerPage, !{JSON.stringify(settings.network_page.addnodes_table.page_length_options)}),
            scrollX: true,
            language: {
              paginate: {
                previous: '<',
                next: '>'
              }
            },
            data: peers.addnode_peers,
            rowCallback: function(row, data, index) {
              const nodes = 'addnode=' + (data['address'] != null && data['address'].indexOf(':') > -1 ? '[' + data['address'] + ']' : data['address']) + (data['port'] == null || data['port'] == '' || setting_add_port_filter == '' || setting_add_port_filter == '-1' ? '' : ':' + data['port']);
              $("td:eq(0)", row).css('white-space', 'nowrap').html(`<button class="btn btn-sm btn-copy" type="button"><i class="fa-regular fa-copy"></i></button>&nbsp;<span>${nodes}</span>`);
            },
            fnDrawCallback: function(settings) {
              fixDataTableColumns();
              fixFooterHeightAndPosition();
            },
            columns: [
              {data: null, width: '100%'}
            ],
            columnDefs: [
              {targets: '_all', className: 'text-start'}
            ]
          });
        }

        const onetry_table_enabled = #{settings.network_page.onetry_table.enabled};

        if (onetry_table_enabled) {
          const setting_one_txPerPage = parseInt("#{settings.network_page.onetry_table.items_per_page}");
          const setting_one_port_filter = "#{settings.network_page.onetry_table.port_filter}";

          $('#onetry-table').dataTable({
            autoWidth: true,
            searching: false,
            ordering: false,
            responsive: true,
            lengthChange: true,
            processing: true,
            iDisplayLength: setting_one_txPerPage,
            lengthMenu: generateLengthMenu(setting_one_txPerPage, !{JSON.stringify(settings.network_page.onetry_table.page_length_options)}),
            scrollX: true,
            language: {
              paginate: {
                previous: '<',
                next: '>'
              }
            },
            data: peers.onetry_peers,
            rowCallback: function(row, data, index) {
              const nodes = 'addnode ' + (data['address'] != null && data['address'].indexOf(':') > -1 ? '[' + data['address'] + ']' : data['address']) + (data['port'] == null || data['port'] == '' || setting_one_port_filter == '' || setting_one_port_filter == '-1' ? '' : ':' + data['port']) + ' onetry';
              $("td:eq(0)", row).css('white-space', 'nowrap').html(`<button class="btn btn-sm btn-copy" type="button"><i class="fa-regular fa-copy"></i></button>&nbsp;<span>${nodes}</span>`);
            },
            fnDrawCallback: function(settings) {
              fixDataTableColumns();
              fixFooterHeightAndPosition();
            },
            columns: [
              {data: null, width: '100%'}
            ],
            columnDefs: [
              {targets: '_all', className: 'text-start'}
            ]
          });
        }
      });

      $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        fixDataTableColumns();
        fixFooterHeightAndPosition();
      });

      if ('#{settings.network_page.page_header.show_last_updated}' == 'true') {
        const lastUpdatedDate = #{(last_updated == null || last_updated == '0' ? 0 : last_updated)};

        if (lastUpdatedDate != 0) {
          $('span#lastUpdatedDate').html(' ' + format_unixtime(lastUpdatedDate));

          if (#{settings.shared_pages.date_time.enable_alt_timezone_tooltips} == true) {
            $('span#lastUpdatedDate').attr('data-bs-toggle', 'tooltip').attr('data-bs-placement', 'auto').attr('title', format_unixtime(lastUpdatedDate, true));
            enableTooltips();
          }
        } else
          $('span#lastUpdatedDate').html(' N/A');
      }
      if (#{settings.shared_pages.page_header.page_title_image.enable_animation} == true && #{settings.network_page.page_header.show_img} == true)
        startRotateElement('img#header-img');

      $('#addnodes').on('click', 'button.btn-copy', function (event) {
        const btn = $(this);

        if (btn.html().indexOf('fa-copy') > -1) {
          const tmp = $('<input>');

          $('body').append(tmp);
          tmp.val(btn.parent().find('span').html()).select();
          document.execCommand('copy');
          tmp.remove();

          btn.tooltip({title: 'Copied!', placement: 'top', trigger: 'manual'}).tooltip('show');
          btn.html('<i class="fa-solid fa-check"></i>');

          setTimeout(function() {
            btn.html('<i class="fa-regular fa-copy"></i>');
            btn.tooltip('dispose');
          }, 1500);
        }
      });
    });
  - var theadClasses = [];
  if settings.shared_pages.table_header_bgcolor != null && settings.shared_pages.table_header_bgcolor != ''
    - theadClasses.push('table-' + settings.shared_pages.table_header_bgcolor);
  .col-md-12.cardSpacer
    .container
      if settings.network_page.page_header.show_img == true || settings.network_page.page_header.show_title == true || settings.network_page.page_header.show_last_updated == true || settings.network_page.page_header.show_description == true
        #page-header-container(style='align-items:' + (settings.network_page.page_header.show_img == true && settings.network_page.page_header.show_title == true && settings.network_page.page_header.show_last_updated == true && settings.network_page.page_header.show_description == true ? 'flex-start' : 'center'))
          if settings.network_page.page_header.show_img == true
            #header-img-container
              img#header-img(src=(settings.shared_pages.page_header.page_title_image == null || settings.shared_pages.page_header.page_title_image.image_path == null || settings.shared_pages.page_header.page_title_image.image_path == '' ? '/img/page-title-img.png' : settings.shared_pages.page_header.page_title_image.image_path))
          #page-title-container
            if settings.network_page.page_header.show_title == true
              h3#page-title #{settings.localization.net_title.replace('{1}', settings.coin.name)}
            if settings.network_page.page_header.show_last_updated == true
              if settings.network_page.page_header.show_title != true && settings.network_page.page_header.show_description != true
                #page-title-container
                  .sub-page-header
                    span.fw-bold=settings.localization.last_updated + ':'
                    span.text-muted#lastUpdatedDate
              else
                .sub-page-header(style='margin-bottom:' + (settings.network_page.page_header.show_description == true ? '5' : '0') + 'px')
                  span.fw-bold=settings.localization.last_updated + ':'
                  span.text-muted#lastUpdatedDate
            if settings.network_page.page_header.show_description == true
              if settings.network_page.page_header.show_title != true && settings.network_page.page_header.show_last_updated != true
                #page-title-container
                  .sub-page-header.text-muted=settings.localization.net_description.replace('{1}', settings.coin.name)
              else
                .sub-page-header.text-muted=settings.localization.net_description.replace('{1}', settings.coin.name)
        .cardSpacer.clearfix
      ul.nav.nav-tabs(role='tablist')
        if settings.network_page.connections_table.enabled
          li.nav-item(role='presentation')
            a.nav-link.active(href='#connections', aria-controls='connections', role='tab', data-bs-toggle='tab') #{settings.localization.net_connections}
        if settings.network_page.addnodes_table.enabled || settings.network_page.onetry_table.enabled
          li.nav-item(role='presentation')
            a.nav-link(class=(settings.network_page.connections_table.enabled ? '' : 'active'), href='#addnodes', aria-controls='addnodes', role='tab', data-bs-toggle='tab') #{settings.localization.net_addnodes}
    .tab-content
      if settings.network_page.connections_table.enabled
        #connections.container.tab-pane.active(style='margin-top:0;border-top:0;')
          .card.card-default.border-0
            table#connections-table.table.table-bordered.table-striped.table-paging.table-hover.mobile-border-right
              thead
                tr(class=theadClasses)
                  th.text-center #{settings.localization.net_address}
                  if settings.network_page.connections_table.port_filter != null && settings.network_page.connections_table.port_filter != -1
                    th.text-center='Port'
                  th.text-center #{settings.localization.net_protocol}
                  th.text-center #{settings.localization.net_subversion}
                  th.text-center #{settings.localization.net_country}
              tbody.text-center
      if settings.network_page.addnodes_table.enabled || settings.network_page.onetry_table.enabled
        #addnodes.container.tab-pane(class=(settings.network_page.connections_table.enabled ? '' : 'active'), style='margin-top:0;border-top:0;')
          .card.card-default.border-0
            if settings.network_page.addnodes_table.enabled
              .card-body.border-top-0
                p If you have trouble syncing your wallet, add these lines to your coin daemon .conf file and restart the wallet.
                p
                  em Typically you can access the config file through QT-wallet menu, Tools > Open Wallet Configuration File
              table#addnodes-table.table.table-bordered.table-striped.table-paging.table-hover.mobile-border-right
                thead
                  tr(class=theadClasses)
                    th AddNode Config Lines
                tbody
            if settings.network_page.onetry_table.enabled
              .card-body.border-top-0
                p If you have trouble syncing your wallet, run these lines in the coin wallet debug window, or add them with 
                  em coindaemon-cli
              table#onetry-table.table.table-bordered.table-striped.table-paging.table-hover.mobile-border-right
                thead
                  tr(class=theadClasses)
                    th OneTry Node Lines
                tbody