{% extends "base.html" %}

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

{% block page_header %}<H3>BGP Summary</H3>{% endblock %}

{% block content %}
    <script src="../static/js/pages/bgp.js"></script>
    <section id="bgp-v4">
      <h2 id="ipv4Summary">Loading summary...</h2>
          <div class="input-group mb-3">
              <input type="text" id="ipv4Search" class="form-control" placeholder="Search in IPv4 table..." onkeyup="filterTable('ipv4Search', 'ipv4Table')">
              <button id="refreshButton" class="btn btn-outline-primary" type="button" onclick="refreshBGPTable()">
                  <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" id="ipv4Table">
          <thead>
            <tr>
              <th class="sortable" onclick="sortTable('ipv4Table', 0, this)">Neighbor Address <span class="sort-arrow"></span></th>
              <th class="sortable" onclick="sortTable('ipv4Table', 1, this)">ASN <span class="sort-arrow"></span></th>
              <th class="sortable" onclick="sortTable('ipv4Table', 2, this)">Up/Down <span class="sort-arrow"></span></th>
              <th class="sortable" onclick="sortTable('ipv4Table', 3, this)">State/Prefix Received <span class="sort-arrow"></span></th>
              <th class="sortable" onclick="sortTable('ipv4Table', 4, this)">Prefix Sent <span class="sort-arrow"></span></th>
              <th class="sortable" onclick="sortTable('ipv4Table', 5, this)">Description <span class="sort-arrow"></span></th>
              <th>Actions</th>
          </thead>
          <tbody id="ipv4TableBody">
            <tr>
              <td colspan="12" 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="/bgp/json">JSON version</a></p>
    </section>

    <section id="bgp-v6">
      <h2 id="ipv6Summary">Loading summary...</h2>
          <div class="input-group mb-3">
              <input type="text" id="ipv6Search" class="form-control" placeholder="Search in IPv6 table..." onkeyup="filterTable('ipv6Search', 'ipv6Table')">
              <button id="refreshButton" class="btn btn-outline-primary" type="button" onclick="refreshBGPTable()">
                  <span id="refreshIcon2">⟳</span>
                  <span id="refreshSpinner2" 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" id="ipv6Table">
          <thead>
            <tr>
              <th class="sortable" onclick="sortTable('ipv6Table', 0, this)">Neighbor Address <span class="sort-arrow"></span></th>
              <th class="sortable" onclick="sortTable('ipv6Table', 2, this)">ASN <span class="sort-arrow"></span></th>
              <th class="sortable" onclick="sortTable('ipv6Table', 8, this)">Up/Down <span class="sort-arrow"></span></th>
              <th class="sortable" onclick="sortTable('ipv6Table', 9, this)">State/Prefix Received <span class="sort-arrow"></span></th>
              <th class="sortable" onclick="sortTable('ipv6Table', 10, this)">Prefix Sent <span class="sort-arrow"></span></th>
              <th class="sortable" onclick="sortTable('ipv6Table', 11, this)">Description <span class="sort-arrow"></span></th>
              <th>Actions</th>
          </thead>
          <tbody id="ipv6TableBody">
            <tr>
              <td colspan="12" 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="/bgp/json">JSON version</a></p>
    </section>
{% endblock %}