{% extends "base.html" %}

{% block title %}AS215085 - Router tools | Interfaces{% endblock %}

{% block page_header %}<H3>Interfaces</H3>{% endblock %}

{% block content %}
    <script src="../static/js/pages/interfaces.js"></script>
    <section id="interfaces">
	    <h2>Interfaces</h2>
        <div class="input-group mb-3">
            <input type="text" id="interfaceSearch" class="form-control" placeholder="Search in Interface table..." onkeyup="filterTable('interfaceSearch', 'interfaceTable')">
            <button id="refreshButton" class="btn btn-outline-primary" type="button" onclick="refreshTable()">
                <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>
        <p></p> <p>Codes: S - State, L - Link, u - Up, D - Down, A - Admin Down</p>
        
        <div class="table-responsive">
            <table class="striped table table-bordered" id="interfaceTable">
                <thead>
                    <tr>
                        <th class="sortable" onclick="sortTable('interfaceTable', 0, this)">Interface <span class="sort-arrow"></span></th>
                        <th class="sortable" onclick="sortTable('interfaceTable', 1, this)">IP Address <span class="sort-arrow"></span></th>
                        <th class="sortable" onclick="sortTable('interfaceTable', 2, this)">MAC Address <span class="sort-arrow"></span></th>
                        <th class="sortable" onclick="sortTable('interfaceTable', 3, this)">VRF <span class="sort-arrow"></span></th>
                        <th class="sortable" onclick="sortTable('interfaceTable', 4, this)">MTU <span class="sort-arrow"></span></th>
                        <th class="sortable" onclick="sortTable('interfaceTable', 5, this)">Status <span class="sort-arrow"></span></th>
                        <th class="sortable" onclick="sortTable('interfaceTable', 6, this)">Description <span class="sort-arrow"></span></th>
                    </tr>
                </thead>
                <tbody id="interfaceTableBody">
                    <tr id="interface-loading-row">
                        <td colspan="7" class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div> <p><a href="/interfaces/json">JSON version</a></p>
    </section>
{% endblock %}