{% load helpers %}

<div class="cable">
    <div class="cable-info">&nbsp;</div>
    {% with color=cable.color|default:'606060' status=cable.status.name %}
        <div class="cable-color"
             style="border-color: #9a9a9a; background: {% if status == 'Connected' %}#{{ color }}{% else %}repeating-linear-gradient(#{{ color }}, #{{color}} 19px, #9a9a9a 19px, #9a9a9a 20px, transparent 20px, transparent 32px, #9a9a9a 32px, #9a9a9a 33px){% endif %}; border-style: none solid"
        >
            &nbsp;
        </div>
    {% endwith %}
    <div class="cable-info">
        <strong>{{ cable|hyperlinked_object }}</strong><br>
        {% if cable.type %}
            {{ cable.get_type_display|default:"" }}<br />
        {% endif %}
        {% if cable.length %}
            ({{ cable.length }} {{ cable.get_length_unit_display }})<br />
        {% endif %}
        <span class="label" style="color: {{cable.status.color|fgcolor}}; background-color: #{{cable.status.color}}">{{ cable.get_status_display }}</span><br />
        {% for tag in cable.tags.all %}
            {% tag tag 'dcim:cable_list' %}
        {% endfor %}
    </div>
</div>
