{% extends "base.html" %}

{% block title %}AS215085 - Router tools | DHCPv6 Leases{% endblock %}

{% block page_header %}<H3>DHCPv6 Delegated Prefixes</H3>{% endblock %}

{% block content %}
    <script src="../static/js/pages/dhcpv6_leases.js"></script>
    <section id="dhcpv6-leases">
        <h2>DHCPv6 Leases</h2>

        {% if error %}
            <div class="alert alert-danger" role="alert">
                {{ error }}
            </div>
        {% else %}
            <div class="input-group mb-3">
                <label class="input-group-text" for="poolSelect">Pool:</label>
                <select class="form-select" id="poolSelect" onchange="refreshLeaseTable()">
                    {% for pool in pool_names %}
                        <option value="{{ pool }}" {% if pool == selected_pool %}selected{% endif %}>{{ pool }}</option>
                    {% endfor %}
                </select>
                <input type="text" id="leaseSearch" class="form-control" placeholder="Search in leases..." onkeyup="filterTable('leaseSearch', 'leaseTable')">
                <button id="refreshButton" class="btn btn-outline-primary" type="button" onclick="refreshLeaseTable()">
                    <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>

            <div class="table-responsive">
                <table class="striped table table-bordered" id="leaseTable">
                    <thead>
                        <tr>
                            <th class="sortable" onclick="sortTable('leaseTable', 0, this)">IPv6 Address <span class="sort-arrow"></span></th>
                            <th class="sortable" onclick="sortTable('leaseTable', 1, this)">State <span class="sort-arrow"></span></th>
                            <th class="sortable" onclick="sortTable('leaseTable', 2, this)">Last Communication <span class="sort-arrow"></span></th>
                            <th class="sortable" onclick="sortTable('leaseTable', 3, this)">Lease Expiration <span class="sort-arrow"></span></th>
                            <th class="sortable" onclick="sortTable('leaseTable', 4, this)">Remaining <span class="sort-arrow"></span></th>
                            <th class="sortable" onclick="sortTable('leaseTable', 5, this)">Type <span class="sort-arrow"></span></th>
                            <th class="sortable" onclick="sortTable('leaseTable', 6, this)">Pool <span class="sort-arrow"></span></th>
                            <th class="sortable" onclick="sortTable('leaseTable', 7, this)">DUID <span class="sort-arrow"></span></th>
                        </tr>
                    </thead>
                    <tbody id="leaseTableBody">
                        <tr id="lease-loading-row">
                            <td colspan="8" class="text-center">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div> {% endif %}
    </section>
{% endblock %}