Sponsoring The Perl Toolchain Summit 2025: Help make this important event another success Learn more

<table id="data-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th class="nd_center-cell">Left Device</th>
<th class="nd_center-cell">Left Port</th>
<th class="nd_center-cell">Right Device</th>
<th class="nd_center-cell">Right Port</th>
<th class="nd_center-cell">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nd_center-cell">
<div class="input-append">
<input data-form="add" class="nd_topo_dev nd_topo_dev1" name="dev1" type="text" value="[% params.dev1 | html_entity %]">
<span class="add-on nd_topo_dev_caret"><i class="icon-caret-down icon-large"></i></span>
</div>
</td>
<td class="nd_center-cell">
<div class="input-append">
<input data-form="add" class="nd_topo_port nd_topo_dev1" name="port1" type="text" value="[% params.port1 | html_entity %]">
<span class="add-on nd_topo_port_caret"><i class="icon-caret-down icon-large"></i></span>
</div>
</td>
<td class="nd_center-cell">
<div class="input-append">
<input data-form="add" class="nd_topo_dev nd_topo_dev2" name="dev2" type="text">
<span class="add-on nd_topo_dev_caret"><i class="icon-caret-down icon-large"></i></span>
</div>
</td>
<td class="nd_center-cell">
<div class="input-append">
<input data-form="add" class="nd_topo_port nd_topo_dev2" name="port2" type="text">
<span class="add-on nd_topo_port_caret"><i class="icon-caret-down icon-large"></i></span>
</div>
</td>
<td class="nd_center-cell">
<button class="btn btn-small nd_adminbutton" name="add" type="submit"><i class="icon-plus-sign"></i> Add</button>
</td>
</tr>
[% SET count = 0 %]
[% WHILE (row = results.next) %]
[% SET count = count + 1 %]
<tr>
<td class="nd_center-cell"><a class="nd_linkcell" href="[% uri_for('/device') | none %]?q=[% row.device1.ip | uri %]">
[% (row.device1.dns || row.device1.name || row.device1.ip) | html_entity %]</a>
</td>
<td class="nd_center-cell">[% row.port1 | html_entity %]</td>
<td class="nd_center-cell"><a class="nd_linkcell" href="[% uri_for('/device') | none %]?q=[% row.device2.ip | uri %]">
[% (row.device2.dns || row.device2.name || row.device2.ip) | html_entity %]</a></td>
<td class="nd_center-cell">[% row.port2 | html_entity %]</td>
<td class="nd_center-cell">
<button class="btn" data-toggle="modal"
data-target="#nd_devdel-[% count | html_entity %]" type="button"><i class="icon-trash text-error"></i></button>
<div id="nd_devdel-[% count | html_entity %]" class="nd_modal nd_deep-horizon modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="nd_devdel-label-[% count | html_entity %]" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="nd_devdel-label-[% count | html_entity %]">Are you sure?</h3>
</div>
<div class="modal-body">
<blockquote>
<p class="text-info">The link between these two ports will be removed:</p>
<p>&nbsp;</p>
<ul>
<li><p class="text-info">[% (row.device1.dns || row.device1.name || row.device1.ip) | html_entity %],&nbsp;
[% row.port1 | html_entity %]</p></li>
<li><p class="text-info">[% (row.device2.dns || row.device2.name || row.device2.ip) | html_entity %],&nbsp;
[% row.port2 | html_entity %]</p></li>
</ul>
</blockquote>
<input data-form="del" name="dev1" type="hidden" value="[% row.dev1 | html_entity %]">
<input data-form="del" name="port1" type="hidden" value="[% row.port1 | html_entity %]">
<input data-form="del" name="dev2" type="hidden" value="[% row.dev2 | html_entity %]">
<input data-form="del" name="port2" type="hidden" value="[% row.port2 | html_entity %]">
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-danger nd_adminbutton" name="del" data-dismiss="modal">Confirm</button>
</div>
</div>
</td>
</tr>
[% END %]
</tbody>
</table>
<script>
$(document).ready(function() {
$('#data-table').dataTable({
"columnDefs": [ {
"targets": [ 4 ],
"orderable": false,
"searchable": false
} ],
[% INCLUDE 'ajax/datatabledefaults.tt' -%]
} );
} );
</script>