{% load i18n %}
<table class="table table-hover attr-table">
  <tr>
    <th scope="row">{% trans "Cable" %}</th>
    <td>
      {{ object.cable|linkify }}
      <a href="{% url trace_url pk=object.pk %}" class="btn btn-primary lh-1" title="{% trans "Trace" %}">
        <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
      </a>
    </td>
  </tr>
  <tr>
    <th scope="row">{% trans "Path Status" %}</th>
    <td>
      {% if object.path.is_complete and object.path.is_active %}
        <span class="badge text-bg-success">{% trans "Reachable" %}</span>
      {% else %}
        <span class="badge text-bg-danger">{% trans "Not Reachable" %}</span>
      {% endif %}
    </td>
  </tr>
  <tr>
    <th scope="row">{% trans "Path Endpoints" %}</th>
    <td>
      {% for endpoint in object.connected_endpoints %}
        {% if endpoint.parent_object %}
          {{ endpoint.parent_object|linkify }}
          <i class="mdi mdi-chevron-right"></i>
        {% endif %}
        {{ endpoint|linkify }}
        {% if not forloop.last %}<br />{% endif %}
      {% empty %}
        {{ ''|placeholder }}
      {% endfor %}
    </td>
  </tr>
</table>