{% load helpers %}
{% if terminations.0 %}
  <table class="table table-hover panel-body attr-table">
    {% if terminations.0.device %}
      {# Device component #}
      <tr>
        <td>Site</td>
        <td>{{ terminations.0.device.site|linkify }}</td>
      </tr>
      <tr>
        <td>Location</td>
        <td>{{ terminations.0.device.location|linkify|placeholder }}</td>
      </tr>
      <tr>
        <td>Rack</td>
        <td>{{ terminations.0.device.rack|linkify|placeholder }}</td>
      </tr>
      <tr>
        <td>{{ terminations.0|meta:"verbose_name"|capfirst }}</td>
        <td>
          {% for term in terminations %}
	    {{term.device|linkify}}
	    <i class="mdi mdi-chevron-right" aria-hidden="true"></i>
	    {{ term|linkify }}
	    {% if not forloop.last %}<br/>{% endif %}
          {% endfor %}
        </td>
      </tr>
    {% elif terminations.0.power_panel %}
      {# Power feed #}
      <tr>
        <td>Site</td>
        <td>{{ terminations.0.power_panel.site|linkify }}</td>
      </tr>
      <tr>
        <td>Power Panel</td>
        <td>{{ terminations.0.power_panel|linkify }}</td>
      </tr>
      <tr>
        <td>{{ terminations.0|meta:"verbose_name"|capfirst }}</td>
        <td>
          {% for term in terminations %}
            {{ term|linkify }}{% if not forloop.last %},{% endif %}
          {% endfor %}
        </td>
      </tr>
    {% elif terminations.0.circuit %}
      {# Circuit termination #}
      <tr>
        <td>Provider</td>
        <td>{{ terminations.0.circuit.provider|linkify }}</td>
      </tr>
      <tr>
        <td>Circuit</td>
        <td>
          {% for term in terminations %}
            {{ term.circuit|linkify }} ({{ term }}){% if not forloop.last %},{% endif %}
          {% endfor %}
        </td>
      </tr>
    {% endif %}
  </table>
{% else %}
  <span class="text-muted">No termination</span>
{% endif %}