{% load helpers %}
<div class="card">
  <h2 class="card-header">Backbone — next hop</h2>
  <table class="table table-sm">
    <thead>
      <tr><th>Location</th><th>Rack</th><th>Media</th><th>Free / Total</th><th style="min-width:130px">Fill</th></tr>
    </thead>
    <tbody>
      {% for r in rows %}
        <tr>
          <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 %}
    </tbody>
  </table>
</div>