{% load helpers %}
<div class="card">
  <h2 class="card-header">Backbone reachability by panel (next hop)</h2>
  <table class="table table-sm table-hover">
    <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>