{% extends 'base/layout.html' %}
{% load helpers %}

{% block title %}IP-Netzübersicht{% endblock %}

{% block header %}
  <div class="row align-items-center">
    <div class="col"><h1>IP-Netzübersicht</h1></div>
    <div class="col-auto text-secondary">{{ total_count }} Netze</div>
  </div>
{% endblock %}

{% block content %}
  <div class="row">
    <div class="col-xl-9">
      <div class="card">
        <div class="table-responsive">
          <table class="table table-hover mb-0">
            <thead><tr><th>Netz</th><th>VRF</th><th>Scope</th><th>Mandant</th><th>Status</th><th>Beschreibung</th></tr></thead>
            <tbody>
              {% for prefix in page_obj %}
                <tr>
                  <td><a href="{{ prefix.get_absolute_url }}"><code>{{ prefix.prefix }}</code></a></td>
                  <td>{{ prefix.vrf|placeholder }}</td>
                  <td>{{ prefix.scope|placeholder }}</td>
                  <td>{{ prefix.tenant|placeholder }}</td>
                  <td><span class="badge text-bg-{{ prefix.get_status_color }}">{{ prefix.get_status_display }}</span></td>
                  <td>{{ prefix.description|placeholder }}</td>
                </tr>
              {% empty %}
                <tr><td colspan="6" class="text-center text-secondary py-4">Keine passenden Netze gefunden.</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      {% if page_obj.has_other_pages %}
        <nav class="mt-3"><ul class="pagination">
          {% if page_obj.has_previous %}<li class="page-item"><a class="page-link" href="?{% querystring request page=page_obj.previous_page_number %}">Zurück</a></li>{% endif %}
          <li class="page-item disabled"><span class="page-link">Seite {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span></li>
          {% if page_obj.has_next %}<li class="page-item"><a class="page-link" href="?{% querystring request page=page_obj.next_page_number %}">Weiter</a></li>{% endif %}
        </ul></nav>
      {% endif %}
    </div>
    <div class="col-xl-3">
      <div class="card">
        <h2 class="card-header">Filter</h2>
        <div class="card-body">
          <form method="get">
            {% for field in filter_form %}<div class="mb-3">{{ field.label_tag }}{{ field }}</div>{% endfor %}
            <div class="d-flex gap-2"><button class="btn btn-primary" type="submit">Filtern</button><a class="btn btn-outline-secondary" href=".">Zurücksetzen</a></div>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}