{% extends "layout.html" %}

{% block content %}
<div class="container">
  <h1>IPAM Dashboard</h1>

  <div class="card">
    <div class="card-header">
      <h3 class="card-title">Subnetz-Übersicht</h3>
      <div class="card-actions">
        <button class="btn btn-primary" hx-get="/ipam/subnet/new" hx-target="#modal-container">
          Neues Subnetz
        </button>
      </div>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-vcenter card-table">
          <thead>
            <tr>
              <th>CIDR</th>
              <th>Standort</th>
              <th>IP-Belegung</th>
              <th>Auto-Scan</th>
              <th>Aktionen</th>
            </tr>
          </thead>
          <tbody>
            {% for subnet in subnets %}
            <tr>
              <td>{{ subnet.cidr }}</td>
              <td>{{ subnet.location }}</td>
              <td>
                <div class="progress progress-sm">
                  {% set percentage = (subnet.used_ips / subnet.total_ips * 100) | int %}
                  <div class="progress-bar bg-blue" style="width: {{ percentage }}%" role="progressbar"
                    aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">
                    {{ percentage }}%
                  </div>
                </div>
              </td>
              <td>{{ "Ja" if subnet.auto_scan else "Nein" }}</td>
              <td>
                <a href="/ipam/subnet/{{ subnet.id }}" class="btn btn-sm btn-outline-primary">Details</a>
                <button hx-post="/ipam/subnet/{{ subnet.id }}/scan" hx-swap="none"
                  class="btn btn-sm btn-outline-secondary" {% if not subnet.auto_scan %}disabled{% endif %}>
                  Scan starten
                </button>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div id="modal-container"></div>
{% endblock %}