{% 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-3 text-center">
            {% if total_length %}<h5>Total length: {{ total_length|floatformat:"-2" }} Meters<h5>{% endif %}
        </div>
        <div class="col-md-4 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-{{ cable.get_status_class }}">{{ 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>
        <hr />
    {% endfor %}
    <div class="row">
        {% if split_ends %}
            <div class="col-md-7 col-md-offset-3">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <strong><i class="fa fa-warning"></i> Trace Split</strong>
                    </div>
                    <div class="panel-body">
                        There are multiple possible paths from this point. Select a port to continue.
                    </div>
                </div>
                <div class="panel panel-default">
                    <table class="panel-body table">
                        <thead>
                            <tr class="table-headings">
                                <th>Port</th>
                                <th>Connected</th>
                                <th>Type</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        {% for termination in split_ends %}
                            <tr>
                                <td><a href="{% url 'dcim:frontport_trace' pk=termination.pk %}">{{ termination }}</a></td>
                                <td>
                                    {% if termination.cable %}
                                        <i class="fa fa-check text-success" title="Yes"></i>
                                    {% else %}
                                        <i class="fa fa-times text-danger" title="No"></i>
                                    {% endif %}
                                </td>
                                <td>{{ termination.get_type_display }}</td>
                                <td>{{ termination.description|placeholder }}</td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
        {% elif position_stack %}
            <div class="col-md-11 col-md-offset-1">
                <h3 class="text-warning text-center">
                    {% with last_position=position_stack|last %}
                        Trace completed, but there is no Front Port corresponding to
                        <a href="{{ last_position.device.get_absolute_url }}">{{ last_position.device }}</a> {{ last_position }}.<br>
                        Therefore no end-to-end connection can be established.
                    {% endwith %}
                </h3>
            </div>
        {% else %}
            <div class="col-md-11 col-md-offset-1">
                <h3 class="text-success text-center">Trace completed!</h3>
            </div>
        {% endif %}
    </div>
{% endblock %}