{% extends "base.html" %}

{% block title %}AS215085 - Router tools | Neighbor table{% endblock %}

{% block content %}
    <script src="../static/js/pages/neighbors.js"></script>
    <section id="neighbor">
	    <h2>Neighbor table</h2>
        <div class="input-group mb-3">
            <input type="text" id="neighborsSearch" class="form-control" placeholder="Search in Neighbors table..." onkeyup="filterTable('neighborsSearch', 'neighborsTable')">
            <button id="refreshButton" class="btn btn-outline-primary" type="button" onclick="refreshNeighborsTable()">
                <span id="refreshIcon">⟳</span>
                <span id="refreshSpinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                Refresh data
            </button>
        </div>
        <table class="striped table table-bordered" id="neighborsTable">
            <thead>
                <tr>
                    <th class="sortable" onclick="sortTable('neighborsTable', 0, this)">Address <span class="sort-arrow"></span></th>
                    <th class="sortable" onclick="sortTable('neighborsTable', 1, this)">Interface <span class="sort-arrow"></span></th>
                    <th class="sortable" onclick="sortTable('neighborsTable', 2, this)">Link Layer Address <span class="sort-arrow"></span></th>
                    <th class="sortable" onclick="sortTable('neighborsTable', 3, this)">State <span class="sort-arrow"></span></th>
                </tr>
            </thead>
        <tbody id="neighborsTableBody">
          <tr id="arp-loading-row">
            <td colspan="4" class="text-center">
              <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
            </td>
          </tr>
        </tbody>
        </table>
        <p><a href="/neighbors/json">JSON version</a></p>
    </section>
{% endblock %}