{% 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">
        <div class="page-pretitle">
          Subnet Details
        </div>
        <h2 class="page-title">
          {{ subnet.cidr }} - {{ subnet.location }}
        </h2>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="{{ url_for('ipam.subnet_edit', subnet_id=subnet.id) }}" class="btn btn-primary">
            <i class="ti ti-edit me-1"></i> Edit
          </a>
          <form method="POST" action="{{ url_for('ipam.subnet_scan', subnet_id=subnet.id) }}" class="d-inline">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-warning">
              <i class="ti ti-search me-1"></i> Scan Now
            </button>
          </form>
          <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteSubnetModal">
            <i class="ti ti-trash me-1"></i> Delete
          </button>
        </div>
      </div>
    </div>
  </div>

  {% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
  {% for category, message in messages %}
  <div class="alert alert-{{ category }} alert-dismissible fade show mt-3" role="alert">
    {{ message }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
  {% endfor %}
  {% endif %}
  {% endwith %}

  <div class="row mt-3">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Subnet Information</h3>
        </div>
        <div class="card-body">
          <table class="table table-vcenter">
            <tr>
              <td><strong>CIDR Notation</strong></td>
              <td>{{ subnet.cidr }}</td>
            </tr>
            <tr>
              <td><strong>Location</strong></td>
              <td>{{ subnet.location }}</td>
            </tr>
            {% set network = get_ip_network(subnet.cidr) %}
            {% if network %}
            <tr>
              <td><strong>Network Address</strong></td>
              <td>{{ network.network_address }}</td>
            </tr>
            <tr>
              <td><strong>Broadcast Address</strong></td>
              <td>{{ network.broadcast_address if network.prefixlen < 31 else 'N/A' }}</td>
            </tr>
            <tr>
              <td><strong>Netmask</strong></td>
              <td>{{ network.netmask }}</td>
            </tr>
            <tr>
              <td><strong>Host Range</strong></td>
              <td>
                {% if network.prefixlen < 31 %} {{ network.network_address + 1 }} - {{ network.broadcast_address - 1 }}
                  {% else %} {{ network.network_address }} - {{ network.broadcast_address }} {% endif %} </td>
            </tr>
            <tr>
              <td><strong>Total Hosts</strong></td>
              <td>
                {% if network.prefixlen < 31 %} {{ network.num_addresses - 2 }} {% else %} {{ network.num_addresses }}
                  {% endif %} </td>
            </tr>
            {% endif %}
            <tr>
              <td><strong>Auto Scan</strong></td>
              <td>{{ 'Yes' if subnet.auto_scan else 'No' }}</td>
            </tr>
            <tr>
              <td><strong>Last Scanned</strong></td>
              <td>{{ subnet.last_scanned|default('Never', true) }}</td>
            </tr>
            <tr>
              <td><strong>Created</strong></td>
              <td>{{ subnet.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Servers in Subnet</h3>
        </div>
        <div class="card-body">
          {% if subnet.servers %}
          <div class="table-responsive">
            <table class="table table-vcenter card-table">
              <thead>
                <tr>
                  <th>Hostname</th>
                  <th>IP Address</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {% for server in subnet.servers %}
                <tr>
                  <td><a href="{{ url_for('dashboard.server_view', server_id=server.id) }}">{{ server.hostname }}</a>
                  </td>
                  <td>{{ server.ip_address }}</td>
                  <td>
                    <a href="{{ url_for('dashboard.server_view', server_id=server.id) }}"
                      class="btn btn-sm btn-primary">
                      <i class="ti ti-eye"></i>
                    </a>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
          <div class="empty">
            <div class="empty-icon">
              <i class="ti ti-server"></i>
            </div>
            <p class="empty-title">No servers in this subnet</p>
            <p class="empty-subtitle text-muted">
              You can add a new server to this subnet from the dashboard
            </p>
            <div class="empty-action">
              <a href="{{ url_for('dashboard.server_new') }}" class="btn btn-primary">
                <i class="ti ti-plus me-2"></i> Add New Server
              </a>
            </div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <!-- Applications in this Subnet Section -->
  <div class="row mt-3">
    <div class="col-12">
      <div class="card glass-card">
        <div class="card-header">
          <h3 class="card-title">Applications in this Subnet</h3>
        </div>
        <div class="card-body">
          {% if subnet_apps %}
          <div class="app-grid">
            {% for app in subnet_apps %}
            <div class="app-card">
              <div class="app-card-header">
                <div class="app-card-title">
                  <h4>{{ app.name }}</h4>
                  <span class="text-muted small">on {{ app.server.hostname }} ({{ app.server.ip_address }})</span>
                </div>
                <div class="app-card-actions">
                  <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-sm btn-outline-primary">
                    View
                  </a>
                </div>
              </div>
              <div class="app-card-body markdown-content">
                {% if app.documentation %}
                {{ app.documentation|markdown|truncate(300, true) }}
                <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="text-primary">Read more</a>
                {% else %}
                <p class="text-muted">No documentation available for this application.</p>
                {% endif %}
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <div class="empty">
            <div class="empty-icon">
              <span class="ti ti-app-window"></span>
            </div>
            <p class="empty-title">No applications found</p>
            <p class="empty-subtitle text-muted">
              No applications are running on servers in this subnet.
            </p>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <!-- Update the usage progress bar section -->
  <div class="mb-3">
    <div class="form-label">Usage</div>
    <div class="progress mb-2">
      <div class="progress-bar" style="width: {{ (used_ips / total_ips * 100) if total_ips > 0 else 0 }}%"
        role="progressbar"></div>
    </div>
    <div class="d-flex justify-content-between">
      <span>{{ used_ips }} used</span>
      <span>{{ total_ips }} total</span>
    </div>
  </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteSubnetModal" tabindex="-1" aria-labelledby="deleteSubnetModalLabel"
  aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteSubnetModalLabel">Confirm Deletion</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete the subnet {{ subnet.cidr }}?</p>
        {% if subnet.servers %}
        <div class="alert alert-danger">
          <strong>Warning:</strong> This subnet has {{ subnet.servers|length }} servers assigned to it.
          You must delete or reassign these servers before deleting the subnet.
        </div>
        {% endif %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <form method="POST" action="{{ url_for('ipam.subnet_delete', subnet_id=subnet.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-danger" {{ 'disabled' if subnet.servers }}>Delete Subnet</button>
        </form>
      </div>
    </div>
  </div>
</div>

<style>
  .glass-card {
    background-color: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  [data-bs-theme="light"] .glass-card {
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
  }

  .app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
  }

  .app-card {
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  [data-bs-theme="light"] .app-card {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
  }

  .app-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  .app-card-header {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  [data-bs-theme="light"] .app-card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .app-card-title h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
  }

  .app-card-body {
    padding: 1rem;
    max-height: 200px;
    overflow: hidden;
  }
</style>
{% endblock %}