{% extends 'base.html' %}
{% load helpers %}
{% load cables %}

{% block content %}
    <div class="row">
        <div class="col-12">
            {% if trace_svg %}
                <div class="card">
                    <div class="card-header">
                        <strong>Cable Trace</strong>
                    </div>
                    <div class="card-body text-center" style="overflow-x: auto;">
                        {{ trace_svg }}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    <div class="row">
        <div class="col-12">

            <div class="card">
                <div class="card-header">
                    <strong>Related Paths</strong>
                </div>
                <table class="table table-hover card-body">
                    <thead>
                        <tr>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Segments</th>
                        </tr>
                    </thead>
                    <tbody>
                        {# Viewing a single lane (e.g. one subinterface): offer a way back to the parent's full trace. #}
                        {% if request.GET.cablepath_id %}
                            {% with trace_url=object|viewname:"trace" %}
                                <tr>
                                    <td colspan="3">
                                        <a href="{% url trace_url pk=object.pk %}">
                                            <span class="mdi mdi-transit-connection-horizontal" aria-hidden="true"></span>
                                            View full trace ({{ object.parent }} / {{ object }} &mdash; all paths)
                                        </a>
                                    </td>
                                </tr>
                            {% endwith %}
                        {% endif %}
                        {% for cablepath in related_paths %}
                            <tr{% if cablepath.pk == path.pk %} class="info"{% endif %}>
                                <td>
                                    <a href="?cablepath_id={{ cablepath.pk }}">
                                        {{ cablepath.origin.parent }} / {{ cablepath.origin }}{# Breakout trunk: annotate the lane with its specific child (sub)interface, in brackets. #}
                                        {% with subinterface=cablepath|breakout_subinterface_for_path %}{% if subinterface %} [{{ subinterface }}]{% endif %}{% endwith %}
                                    </a>
                                </td>
                                <td>
                                    {% if cablepath.destination %}
                                        {{ cablepath.destination }} ({{ cablepath.destination.parent }})
                                    {% else %}
                                        <span class="text-secondary">Incomplete</span>
                                    {% endif %}
                                </td>
                                <td class="text-end">
                                    {{ cablepath.segment_count }}
                                </td>
                            </tr>
                        {% empty %}
                            <td colspan="3" class="text-secondary">
                                None found
                            </td>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

        </div>
    </div>
{% endblock %}