{% extends 'base/layout.html' %}
{% load helpers %}

{% block title %}Backbone health{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-12">
    <div class="card">
      <h2 class="card-header">Backbone health — data quality</h2>
      <div class="card-body">
        <form method="get" class="row g-2 align-items-end">
          <div class="col-auto">
            <label class="form-label mb-0">Site</label>
            <select name="site" class="form-select" onchange="this.form.submit()">
              <option value="">— choose a site —</option>
              {% for s in sites %}
                <option value="{{ s.pk }}" {% if site and s.pk == site.pk %}selected{% endif %}>{{ s.name }}</option>
              {% endfor %}
            </select>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{% if site %}
<div class="row mt-3">
  <div class="col col-md-12">
    <div class="card">
      <h2 class="card-header">
        {{ site.name }} —
        {% if healthy %}
          <span class="badge text-bg-success">No anomaly detected</span>
        {% else %}
          <span class="badge text-bg-danger">{{ total }} anomal{{ total|pluralize:"y,ies" }}</span>
        {% endif %}
      </h2>
      <div class="card-body">
        <div class="row text-center">
          <div class="col">
            <div class="h3 mb-0">{{ overview.racks }}</div>
            <div class="text-muted small">Racks on backbone</div>
          </div>
          <div class="col">
            <div class="h3 mb-0">{{ overview.trunks }}</div>
            <div class="text-muted small">Structural trunks</div>
          </div>
          <div class="col">
            <div class="h3 mb-0">{{ overview.bridges }}</div>
            <div class="text-muted small">Bridges</div>
          </div>
          <div class="col">
            <div class="h3 mb-0">
              {% for m, n in overview.media.items %}{{ m }}:{{ n }}{% if not forloop.last %} · {% endif %}{% empty %}—{% endfor %}
            </div>
            <div class="text-muted small">Trunks per media</div>
          </div>
          <div class="col">
            <div class="h3 mb-0 {% if overview.fragmented %}text-warning{% endif %}">{{ overview.component_count }}</div>
            <div class="text-muted small">Backbone island{{ overview.component_count|pluralize }}</div>
          </div>
          <div class="col">
            <div class="h3 mb-0 {% if overview.isolated_racks %}text-warning{% endif %}">{{ overview.isolated_racks }}</div>
            <div class="text-muted small">Off-backbone racks</div>
          </div>
        </div>
        {% if overview.fragmented %}
          <p class="text-muted small mt-3 mb-0">
            The backbone splits into {{ overview.component_count }} disconnected groups
            (largest: {{ overview.largest_component }} racks). Racks in different groups can only
            be joined by a bridge.
          </p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% for cat in categories %}
<div class="row mt-3">
  <div class="col col-md-12">
    <div class="card">
      <h2 class="card-header d-flex justify-content-between align-items-center">
        <span>{{ cat.label }}</span>
        {% if cat.count %}
          <span class="badge text-bg-{{ cat.severity }}">{{ cat.count }}</span>
        {% else %}
          <span class="badge text-bg-success">0</span>
        {% endif %}
      </h2>
      <div class="card-body py-2">
        <p class="text-muted small mb-0">{{ cat.help }}</p>
      </div>
      {% if cat.rows %}
      <table class="table table-hover mb-0">
        <thead>
          <tr><th>Object</th><th>Location / rack</th><th>Detail</th></tr>
        </thead>
        <tbody>
          {% for r in cat.rows %}
            <tr>
              <td class="font-monospace">
                {% if r.cable %}
                  {% if r.cable.url %}<a href="{{ r.cable.url }}">{{ r.cable.name }}</a>{% else %}{{ r.cable.name }}{% endif %}
                {% elif r.rear_port %}
                  {% if r.rear_port.url %}<a href="{{ r.rear_port.url }}">{{ r.rear_port.name }}</a>{% else %}{{ r.rear_port.name }}{% endif %}
                {% else %}—{% endif %}
              </td>
              <td class="font-monospace">
                {% if r.rack %}
                  {% if r.rack.url %}<a href="{{ r.rack.url }}">{{ r.rack.name }}</a>{% else %}{{ r.rack.name }}{% endif %}
                {% elif r.rear_port %}{{ r.rear_port.name }}{% else %}—{% endif %}
              </td>
              <td>{{ r.detail|default:"—" }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
      {% endif %}
    </div>
  </div>
</div>
{% endfor %}

{% if intra_rack.count %}
<div class="row mt-3">
  <div class="col col-md-12">
    <div class="card">
      <h2 class="card-header d-flex justify-content-between align-items-center">
        <span>Intra-rack cross-connects <small class="text-muted">(informational)</small></span>
        <span class="badge text-bg-secondary">{{ intra_rack.count }}</span>
      </h2>
      <div class="card-body py-2">
        <p class="text-muted small mb-0">
          Rear↔rear cables between two different panels of the <strong>same rack</strong> —
          legitimate cabling, but <strong>ignored by inter-rack routing</strong> (a same-rack
          segment is a self-loop). Listed here only for review; not counted as anomalies.
        </p>
      </div>
      <table class="table table-hover mb-0">
        <thead><tr><th>Cable</th><th>Rack</th></tr></thead>
        <tbody>
          {% for r in intra_rack.rows %}
            <tr>
              <td class="font-monospace">
                {% if r.cable.url %}<a href="{{ r.cable.url }}">{{ r.cable.name }}</a>{% else %}{{ r.cable.name }}{% endif %}
              </td>
              <td class="font-monospace">
                {% if r.rack.url %}<a href="{{ r.rack.url }}">{{ r.rack.name }}</a>{% else %}{{ r.rack.name }}{% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endif %}
{% endif %}
{% endblock %}