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

{% block title %}Subnet {{ subnet.cidr }}{% endblock %}

{% block content %}
<!-- Add this in the action buttons section -->
<div class="col-auto ms-auto">
  <div class="btn-list">
    <a href="{{ url_for('dashboard.subnet_edit', subnet_id=subnet.id) }}" class="btn btn-primary">
      <span class="ti ti-edit me-2"></span>Edit Subnet
    </a>
    <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteSubnetModal">
      <span class="ti ti-trash me-2"></span>Delete
    </button>
    <button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#forceDeleteSubnetModal">
      <span class="ti ti-alert-triangle me-2"></span>Force Delete
    </button>
  </div>
</div>

<!-- Add this at the bottom of the template -->
<!-- Force Delete Subnet Modal -->
<div class="modal modal-blur fade" id="forceDeleteSubnetModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-danger">⚠️ Dangerous Action: Force Delete</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="alert alert-danger">
          <h4 class="alert-title">Warning: This action cannot be undone!</h4>
          <p>You are about to <strong>permanently delete</strong> the subnet {{ subnet.cidr }} and <strong>ALL</strong>
            of its:</p>
          <ul>
            <li>{{ subnet.servers|length }} server(s)</li>
            <li>All applications on those servers</li>
            <li>All port configurations</li>
            <li>All documentation</li>
          </ul>
        </div>
        <p>To confirm, please type <strong>{{ subnet.cidr }}</strong> below:</p>
        <input type="text" id="force-delete-confirmation" class="form-control"
          placeholder="Type subnet CIDR to confirm">
      </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_force_delete', subnet_id=subnet.id) }}"
          id="force-delete-form">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-danger" id="force-delete-button" disabled>Force Delete
            Everything</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const confirmationInput = document.getElementById('force-delete-confirmation');
    const deleteButton = document.getElementById('force-delete-button');
    const subnetCidr = "{{ subnet.cidr }}";

    confirmationInput.addEventListener('input', function () {
      deleteButton.disabled = confirmationInput.value !== subnetCidr;
    });
  });
</script>

<!-- Applications in Subnet section -->
<div class="card mt-3">
  <div class="card-header">
    <h3 class="card-title">Applications in this Subnet</h3>
  </div>
  <div class="card-body p-0">
    {% if subnet.applications %}
    {% for app in subnet.applications %}
    <div class="app-card mb-3">
      <div class="app-card-header">
        <span class="app-link">
          <strong>{{ app.name }}</strong>
          {% if app.server %}
          <small class="text-muted">on {{ app.server.hostname }} ({{ app.server.ip_address }})</small>
          {% endif %}
        </span>
        <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-sm btn-primary">View</a>
      </div>

      <div class="app-card-body">
        {% if app.documentation %}
        {{ render_markdown_with_truncate(app.documentation) }}
        <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-sm btn-link">Read more</a>
        {% else %}
        <p class="text-muted">No documentation available for this application.</p>
        {% endif %}
      </div>

      {% if app.ports %}
      <div class="app-card-footer">
        <div class="d-flex justify-content-between align-items-center">
          <div class="usage-info">
            <small class="text-muted">Usage</small>
            <div class="progress" style="width: 100px; height: 6px;">
              <div class="progress-bar bg-primary" style="width: {{ app.host_usage if app.host_usage else 0 }}%"></div>
            </div>
          </div>
          <div class="port-info">
            <small class="text-muted">{{ app.ports|length }} port{% if app.ports|length != 1 %}s{% endif %}</small>
          </div>
        </div>
      </div>
      {% endif %}
    </div>
    {% endfor %}
    {% else %}
    <div class="p-3 text-muted">
      No applications found in this subnet.
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}