{% extends '_base.html' %}
{% load helpers %}

{% block header %}
    <h1>{% block title %}Cable Trace for {{ obj }}{% endblock %}</h1>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-4 col-md-offset-1 text-center">
            <h4>Near End</h4>
        </div>
        <div class="col-md-4 col-md-offset-3 text-center">
            <h4>Far End</h4>
        </div>
    </div>
    {% for near_end, cable, far_end in trace %}
        <div class="row">
            <div class="col-md-1 text-right">
                <h3>{{ forloop.counter }}</h3>
            </div>
            <div class="col-md-4">
                {% include 'dcim/inc/cable_trace_end.html' with end=near_end %}
            </div>
            <div class="col-md-3 text-center">
                <h4>
                    <a href="{% url 'dcim:cable' pk=cable.pk %}">
                        {% if cable.label %}<code>{{ cable.label }}</code>{% else %}Cable #{{ cable.pk }}{% endif %}
                    </a>
                </h4>
                {{ cable.get_status_display }}<br />
                {{ cable.get_type_display|default:"" }}
                {% if cable.length %}- {{ cable.length }}{{ cable.length_unit }}{% endif %}
                <span class="label color-block center-block" style="background-color: #{{ cable.color }}">&nbsp;</span>
            </div>
            <div class="col-md-4">
                {% include 'dcim/inc/cable_trace_end.html' with end=far_end %}
            </div>
        </div>
        {% if not forloop.last %}<hr />{% endif %}
    {% endfor %}
{% endblock %}