<div class="row">
  <div class="col-md-12">
    <div class="card card-shadow">
      <div class="card-body">
	<table id="table-interface-probes" class="table table-striped table-bordered w-100">
	  <thead>
            <tr>
              <th width="10%"> {{ i18n("if_stats_overview.probe_ip") }} </th>
	      <th width="10%"> {{ i18n("if_stats_overview.probe_public_ip") }} </th>
	      <th width="10%"> {{ i18n("if_stats_overview.interface_name") }} </th>
              <th width="35%"> {{ i18n("if_stats_overview.remote_probe") }} </th>
              <th width="20%"> {{ i18n("if_stats_overview.remote_probe_edition") }} </th>
              <th width="10%"> {{ i18n("if_stats_overview.remote_probe_license") }} </th>
              <th width="10%"> {{ i18n("if_stats_overview.remote_probe_maintenance") }} </th>
            </tr>
	  </thead>
	  <tbody>
	  </tbody>
	</table>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  i18n_ext.showing_x_to_y_rows = "{{ i18n('showing_x_to_y_rows', {x='_START_', y='_END_', tot='_TOTAL_'}) }}";
  const ifid = {{ interface.getId() }};
  
  let dtConfig = DataTableUtils.getStdDatatableConfig([
    {
      text: '<i class="fas fa-sync"></i>',
      className: 'btn-link',
      action: () => {
        $nProbesTable.ajax.reload();
      }
    }     
  ]);
  
  dtConfig = DataTableUtils.setAjaxConfig(dtConfig, `${http_prefix}/lua/rest/v2/get/interface/nprobes/data.lua?ifid=${ifid}`, 'rsp');
  dtConfig = DataTableUtils.extendConfig(dtConfig, {
    columns: [
      { data: "column_nprobe_probe_ip", width: '15%', className: 'text-nowrap', render: function (data, type, row) { 
          if (type == "sort" || type == "type") return $.fn.dataTableExt.oSort["ip-address-pre"](data)  
          return data
        }
      },
      { data: "column_nprobe_probe_public_ip", width: '10%', className: 'text-nowrap', render: function (data, type, row) { 
          if (type == "sort" || type == "type") return $.fn.dataTableExt.oSort["ip-address-pre"](data)
          return data 
        }
      },
      { data: "column_nprobe_interface", width: '15%', className: 'text-nowrap' },
      { data: "column_nprobe_version", width: '15%', className: 'text-nowrap' },
      { data: "column_nprobe_edition", width: '15%', className: 'text-nowrap' },
      { data: "column_nprobe_license", width: '15%', className: 'text-nowrap' },
      { data: "column_nprobe_maintenance", width: '15%', className: 'text-nowrap', orderable: false },
    ],
    stateSave: true,
    hasFilters: true,
    initComplete: function(settings, json) {}
  })

  // initialize the DataTable with the created config
  const $nProbesTable = $(`#table-interface-probes`).DataTable(dtConfig);
  DataTableUtils.addToggleColumnsDropdown($nProbesTable);

</script>
