{% extends "layout.html" %}

{% block content %}
<div class="container-xl">
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          IP Address Management
        </h2>
      </div>
      <div class="col-auto ms-auto">
        <a href="{{ url_for('ipam.subnet_new') }}" class="btn btn-primary">
          <i class="fas fa-plus me-2"></i> Add Subnet
        </a>
      </div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-body">
      {% if subnets %}
      <div class="table-responsive">
        <table class="table table-vcenter table-hover">
          <thead>
            <tr>
              <th>Subnet</th>
              <th>Location</th>
              <th>Usage</th>
              <th>Auto Scan</th>
              <th class="w-1"></th>
            </tr>
          </thead>
          <tbody>
            {% for subnet in subnets %}
            <tr>
              <td>{{ subnet.cidr }}</td>
              <td>{{ subnet.location }}</td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="me-2">{{ subnet.used_ips }}/254</div>
                  <div class="progress flex-grow-1" style="height: 5px;">
                    <div class="progress-bar bg-primary" style="width: {{ subnet.usage_percent }}%"></div>
                  </div>
                </div>
              </td>
              <td>
                {% if subnet.auto_scan %}
                <span class="badge bg-success">Enabled</span>
                {% else %}
                <span class="badge bg-secondary">Disabled</span>
                {% endif %}
              </td>
              <td>
                <div class="btn-group">
                  <a href="{{ url_for('ipam.subnet_view', subnet_id=subnet.id) }}" class="btn btn-sm btn-primary">
                    View
                  </a>
                  <a href="{{ url_for('ipam.subnet_scan', subnet_id=subnet.id) }}"
                    class="btn btn-sm btn-outline-primary">
                    Scan
                  </a>
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="text-center py-4">
        <div class="mb-3">No subnets added yet</div>
        <a href="{{ url_for('ipam.subnet_new') }}" class="btn btn-primary">
          Add Your First Subnet
        </a>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}