{% 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">
          {{ subnet.cidr }}
        </h2>
        <div class="text-muted mt-1">{{ subnet.location }}</div>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="{{ url_for('ipam.subnet_scan', subnet_id=subnet.id) }}" class="btn btn-outline-primary">
            <i class="fas fa-search me-2"></i> Scan Subnet
          </a>
          <a href="{{ url_for('ipam.subnet_visualize', subnet_id=subnet.id) }}" class="btn btn-outline-primary">
            <i class="fas fa-chart-network me-2"></i> Visualize
          </a>
          <a href="{{ url_for('ipam.ipam_home') }}" class="btn btn-link">
            Back to IPAM
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Registered Hosts</h3>
        </div>
        <div class="card-body">
          {% if servers %}
          <div class="table-responsive">
            <table class="table table-vcenter">
              <thead>
                <tr>
                  <th>Hostname</th>
                  <th>IP Address</th>
                  <th>Created</th>
                  <th class="w-1"></th>
                </tr>
              </thead>
              <tbody>
                {% for server in servers %}
                <tr>
                  <td>{{ server.hostname }}</td>
                  <td>{{ server.ip_address }}</td>
                  <td>{{ server.created_at.strftime('%Y-%m-%d') }}</td>
                  <td>
                    <a href="{{ url_for('dashboard.server_view', server_id=server.id) }}"
                      class="btn btn-sm btn-primary">
                      View
                    </a>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
          <div class="text-center py-3">
            <div class="mb-3">No hosts registered in this subnet</div>
            <a href="{{ url_for('dashboard.server_new') }}" class="btn btn-outline-primary">
              Add New Server
            </a>
            <a href="{{ url_for('ipam.subnet_scan', subnet_id=subnet.id) }}" class="btn btn-outline-primary ms-2">
              Scan Subnet
            </a>
          </div>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Subnet Information</h3>
        </div>
        <div class="card-body">
          <div class="mb-2">
            <strong>Network:</strong> {{ subnet.cidr }}
          </div>
          <div class="mb-2">
            <strong>Location:</strong> {{ subnet.location }}
          </div>
          <div class="mb-2">
            <strong>Total IPs:</strong> {{ total_ips }}
          </div>
          <div class="mb-2">
            <strong>Used IPs:</strong> {{ used_ips }} ({{ '%.1f'|format(usage_percent) }}%)
          </div>
          <div class="mb-2">
            <strong>Available IPs:</strong> {{ total_ips - used_ips }}
          </div>
          <div class="mb-2">
            <strong>Auto Scan:</strong>
            {% if subnet.auto_scan %}
            <span class="badge bg-success">Enabled</span>
            {% else %}
            <span class="badge bg-secondary">Disabled</span>
            {% endif %}
          </div>
          <div class="mb-2">
            <strong>Created:</strong> {{ subnet.created_at.strftime('%Y-%m-%d') }}
          </div>
        </div>
      </div>

      <div class="card mt-3">
        <div class="card-header">
          <h3 class="card-title">Actions</h3>
        </div>
        <div class="card-body">
          <div class="d-grid gap-2">
            <a href="{{ url_for('ipam.subnet_scan', subnet_id=subnet.id) }}" class="btn btn-outline-primary">
              <i class="fas fa-search me-2"></i> Scan Now
            </a>
            <a href="{{ url_for('ipam.subnet_visualize', subnet_id=subnet.id) }}" class="btn btn-outline-primary">
              <i class="fas fa-chart-network me-2"></i> IP Visualization
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}