{% extends "layout.html" %}

{% block content %}
<div class="container">
  <div class="d-flex mb-3">
    <div>
      <h1>Subnetz: {{ subnet.cidr }}</h1>
      <p>Standort: {{ subnet.location }}</p>
    </div>
    <div class="ms-auto">
      <button class="btn btn-outline-primary" hx-get="/ipam/subnet/{{ subnet.id }}/export" hx-swap="none">
        CSV-Export
      </button>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Subnetz-Details</h3>
          <div class="mb-3">
            <label class="form-label">Netzwerk-Adresse</label>
            <div>{{ subnet.cidr.split('/')[0] }}</div>
          </div>
          <div class="mb-3">
            <label class="form-label">Präfixlänge</label>
            <div>{{ subnet.cidr.split('/')[1] }}</div>
          </div>
          <div class="mb-3">
            <label class="form-label">Erste nutzbare IP</label>
            <div>{{ first_ip }}</div>
          </div>
          <div class="mb-3">
            <label class="form-label">Letzte nutzbare IP</label>
            <div>{{ last_ip }}</div>
          </div>
          <div class="mb-3">
            <label class="form-label">Gesamte IPs</label>
            <div>{{ total_ips }}</div>
          </div>
          <div class="mb-3">
            <label class="form-label">Belegte IPs</label>
            <div>{{ used_ips }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">IP-Belegung</h3>
        </div>
        <div class="card-body">
          <div id="subnet-visualization" class="subnet-map">
            <!-- Wird via JavaScript befüllt -->
            <div class="text-center p-3">
              <div class="spinner-border text-blue" role="status"></div>
              <div>Lade Daten...</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Load the subnet visualization
    fetch('/ipam/subnet/{{ subnet.id }}/visualization')
      .then(response => response.json())
      .then(data => {
        const container = document.getElementById('subnet-visualization');
        container.innerHTML = '';

        // Create a grid of IP boxes
        const grid = document.createElement('div');
        grid.className = 'ip-grid';

        data.forEach(ip => {
          const box = document.createElement('div');
          box.className = `ip-box ${ip.status}`;
          box.title = ip.hostname ? `${ip.ip} - ${ip.hostname}` : ip.ip;

          const addressSpan = document.createElement('span');
          addressSpan.className = 'ip-address';
          addressSpan.textContent = ip.ip.split('.')[3]; // Only show last octet

          box.appendChild(addressSpan);

          if (ip.hostname) {
            const hostnameSpan = document.createElement('span');
            hostnameSpan.className = 'ip-hostname';
            hostnameSpan.textContent = ip.hostname;
            box.appendChild(hostnameSpan);
          }

          grid.appendChild(box);
        });

        container.appendChild(grid);
      })
      .catch(error => {
        console.error('Error loading subnet visualization:', error);
        document.getElementById('subnet-visualization').innerHTML =
          '<div class="alert alert-danger">Fehler beim Laden der Visualisierung</div>';
      });
  });
</script>

<style>
  .ip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 5px;
  }

  .ip-box {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
    font-size: 12px;
    border-radius: 3px;
  }

  .ip-box.used {
    background-color: #e6f2ff;
    border-color: #99c2ff;
  }

  .ip-box.available {
    background-color: #f2f2f2;
  }

  .ip-address {
    display: block;
    font-weight: bold;
  }

  .ip-hostname {
    display: block;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
{% endblock %}