{% extends "layout.html" %}
{% from "components/markdown_content.html" import render_markdown, render_markdown_with_truncate %}

{% block styles %}
<link href="{{ url_for('static', filename='css/github-markdown-reading-view.css') }}" rel="stylesheet">
<style>
  /* Custom styling for markdown within tables */
  .documentation-cell {
    min-width: 300px;
    max-width: 600px;
  }

  .documentation-cell .markdown-content {
    padding: 0;
    margin: 0;
  }

  .documentation-cell .markdown-reading-view {
    background: transparent !important;
    padding: 0;
  }

  .documentation-cell h1,
  .documentation-cell h2,
  .documentation-cell h3 {
    margin-top: 0;
    margin-bottom: 0.25rem;
    font-size: 1rem;
    font-weight: 600;
  }

  .documentation-cell p {
    margin-bottom: 0.25rem;
  }

  .documentation-cell .markdown-alert {
    padding: 0.5rem;
    margin: 0.25rem 0;
  }

  .app-name {
    color: var(--tblr-primary);
    font-weight: 600;
  }

  .server-link {
    color: var(--tblr-body-color);
    text-decoration: none;
  }

  .server-link:hover {
    text-decoration: underline;
  }
</style>
{% endblock %}

{% 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">
        <div class="card-header">
          <h3 class="card-title">Applications in this Subnet</h3>
        </div>
        <div class="card-body p-0">
          {% if subnet_apps %}
          <div class="table-responsive">
            <table class="table card-table table-vcenter">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Server</th>
                  <th>Documentation</th>
                  <th class="w-1"></th>
                </tr>
              </thead>
              <tbody>
                {% for app in subnet_apps %}
                <tr>
                  <td class="text-nowrap">
                      {% if app.url %}
                      <a href="{{ app.url }}" target="_blank" class="app-link text-primary fw-bold">
                        {{ app.name }} <span class="ti ti-external-link text-muted fs-6 ms-1"></span>
                      </a>
                      {% else %}
                      <span class="fw-bold">{{ app.name }}</span>
                      {% endif %}
                    <!-- <span class="app-name">{{ app.name }}</span> -->
                  </td>
                  <td class="text-nowrap">
                    <a href="{{ url_for('dashboard.server_view', server_id=app.server.id) }}" class="server-link">
                      {{ app.server.hostname }} ({{ app.server.ip_address }})
                    </a>
                  </td>
                  <td class="documentation-cell">
                    {% if app.documentation %}
                    {{ render_markdown_with_truncate(app.documentation, 120) }}
                    {% else %}
                    <span class="text-muted">No documentation available</span>
                    {% endif %}
                  </td>
                  <td>
                    <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-sm btn-primary">
                      View
                    </a>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
          <div class="empty p-4">
            <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="card mt-3">
    <div class="card-body">
      <div class="mb-3">
        <div class="d-flex justify-content-between">
          <div class="form-label mb-0">IP Usage ({{ used_ips }} of {{ total_ips }})</div>
          <div class="text-muted">{{ (used_ips / total_ips * 100)|round(1) }}%</div>
        </div>
        <div class="progress mt-2">
          <div class="progress-bar" style="width: {{ (used_ips / total_ips * 100) if total_ips > 0 else 0 }}%"
            role="progressbar"></div>
        </div>
      </div>
    </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>
{% endblock %}