{% load helpers %}
<style>a.ac-toggle .ac-caret{transition:transform .15s}a.ac-toggle[aria-expanded="false"] .ac-caret{transform:rotate(-90deg)}</style>
<div class="card">
  {% if panels %}
  <h2 class="card-header p-0">
    <a class="ac-toggle text-reset text-decoration-none d-block px-3 py-2" data-bs-toggle="collapse"
       href="#ac-nexthop-rack" role="button" aria-expanded="true" aria-controls="ac-nexthop-rack">
      <i class="mdi mdi-chevron-down ac-caret"></i> Backbone reachability by panel (next hop)
    </a>
  </h2>
  <div class="collapse show" id="ac-nexthop-rack">
  <table class="table table-sm table-hover mb-0">
    <thead>
      <tr><th>Panel</th><th>Location</th><th>Rack</th><th>Media</th><th>Free / Total</th><th style="min-width:130px">Fill</th></tr>
    </thead>
    <tbody>
      {% for p in panels %}
        {% for r in p.rows %}
          <tr>
            <td class="font-monospace">{% if forloop.first %}{{ p.panel }}{% endif %}</td>
            <td>{{ r.location }}</td>
            <td class="font-monospace"><a href="{% url 'dcim:rack' r.rack_id %}">{{ r.rack }}</a></td>
            <td>{{ r.media }}</td>
            <td class="{{ r.css }}"><strong>{{ r.free }}/{{ r.total }}</strong></td>
            <td>{% utilization_graph r.used_pct %}</td>
          </tr>
        {% endfor %}
      {% endfor %}
    </tbody>
  </table>
  </div>
  {% else %}
  <h2 class="card-header">Backbone</h2>
  {% endif %}
  {% if leaves %}
  <div class="px-2 py-1">
    <a class="ac-toggle text-muted text-decoration-none" data-bs-toggle="collapse"
       href="#ac-leaves-rack" role="button" aria-expanded="true" aria-controls="ac-leaves-rack">
      <i class="mdi mdi-chevron-down ac-caret"></i> Leaves served (rackless patches) — {{ leaves|length }}
    </a>
  </div>
  <div class="collapse show" id="ac-leaves-rack">
  <table class="table table-sm table-hover mb-0">
    <thead><tr><th>Panel</th><th>Leaf</th><th>Media</th><th>Free / Total</th><th style="min-width:130px">Fill</th></tr></thead>
    <tbody>
      {% for l in leaves %}
        <tr>
          <td class="font-monospace">{{ l.panel }}</td>
          <td class="font-monospace"><a href="{% url 'dcim:device' l.leaf_id %}">{{ l.leaf_device }}</a></td>
          <td>{{ l.media }}</td>
          <td class="{{ l.css }}"><strong>{{ l.free }}/{{ l.total }}</strong></td>
          <td>{% utilization_graph l.used_pct %}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
  {% endif %}
</div>