{% 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">
                {% if cable %}
                    <h4>
                        <a href="{% url 'dcim:cable' pk=cable.pk %}">
                            {% if cable.label %}<code>{{ cable.label }}</code>{% else %}Cable #{{ cable.pk }}{% endif %}
                        </a>
                    </h4>
                    <p><span class="label label-{% if cable.status %}success{% else %}info{% endif %}">{{ cable.get_status_display }}</span></p>
                    <p>{{ cable.get_type_display|default:"" }}</p>
                    {% if cable.length %}{{ cable.length }} {{ cable.get_length_unit_display }}{% endif %}
                    {% if cable.color %}
                        <span class="label color-block center-block" style="background-color: #{{ cable.color }}">&nbsp;</span>
                    {% endif %}
                {% else %}
                    <h4 class="text-muted">No Cable</h4>
                {% endif %}
            </div>
            <div class="col-md-4">
                {% if far_end %}
                    {% include 'dcim/inc/cable_trace_end.html' with end=far_end %}
                {% endif %}
            </div>
        </div>
        {% if not forloop.last %}<hr />{% endif %}
    {% endfor %}
{% endblock %}