{% load helpers %}
<div class="card">
    <div class="card-header"><strong>Cable Trace</strong></div>
    <ul class="list-group list-group-flush">
        {% for e in path %}
            {% if e.attachment_a or e.device or e.attachment_b %}
                <li class="list-group-item">
                    {% if e.attachment_a %}
                        <div class="text-secondary small">{{ e.attachment_a|meta:"verbose_name"|capfirst }} {{ e.attachment_a|hyperlinked_object }}</div>
                    {% endif %}
                    {% if e.device %}
                        <div>
                            <span class="mdi mdi-server" aria-hidden="true"></span>
                            <strong>{{ e.device|hyperlinked_object }}</strong>
                            {% if e.device.rack %}<span class="text-secondary">(rack {{ e.device.rack|hyperlinked_object }})</span>{% endif %}
                        </div>
                    {% endif %}
                    {% if e.attachment_b %}
                        <div class="text-secondary small">{{ e.attachment_b|meta:"verbose_name"|capfirst }} {{ e.attachment_b|hyperlinked_object }}</div>
                    {% endif %}
                </li>
            {% endif %}
            {% if e.cable %}
                <li class="list-group-item border-start border-3 border-success">
                    <span class="mdi mdi-cable-data" aria-hidden="true"></span>
                    Cable {{ e.cable|hyperlinked_object }}
                    {% if e.cable.type %}<span class="text-secondary">({{ e.cable.get_type_display }})</span>{% endif %}
                </li>
            {% endif %}
            {% if e.needed_cable %}
                {% include 'nautobot_cable_utils/trace/needed_cable.html' with cable=e.needed_cable %}
            {% endif %}
        {% endfor %}
    </ul>
</div>