{% load helpers %}

<ul class="rack_legend">
    {% for u in rack.units %}
        <li>{{ u }}</li>
    {% endfor %}
</ul>

<div class="rack_frame">

    <!-- Render rear view of devices on far face -->
    <ul class="rack rack_far_face">
        {% for u in secondary_face %}
            {% if u.device %}
                <li class="occupied h{{ u.device.device_type.u_height }}u{% if u.device.device_type.is_full_depth %} blocked{% endif %}"></li>
            {% else %}
                <li></li>
            {% endif %}
        {% endfor %}
    </ul>

    <!-- Render front view of devices on near face -->
    <ul class="rack rack_near_face">
        {% for u in primary_face %}
            {% if u.device %}
                <li class="occupied h{{ u.device.device_type.u_height }}u"{% ifequal u.device.face face_id %} style="background-color: #{{ u.device.device_role.color }}"{% endifequal %}>
                    {% ifequal u.device.face face_id %}
                        <a href="{% url 'dcim:device' pk=u.device.pk %}" data-toggle="popover" data-trigger="hover" data-container="body" data-html="true"
                           data-content="{{ u.device.device_role }}<br />{{ u.device.device_type.full_name }} ({{ u.device.device_type.u_height }}U)">
                            {{ u.device.name|default:u.device.device_role }}
                            {% if u.device.devicebay_count %}
                                ({{ u.device.get_children.count }}/{{ u.device.devicebay_count }})
                            {% endif %}
                        </a>
                    {% else %}
                        <span>{{ u.device.name|default:u.device.device_role }}</span>
                    {% endifequal %}
                </li>
            {% else %}
                <li class="available{% if u.id in reserved_units.keys %} reserved{% endif %}">
                    {% if perms.dcim.add_device %}
                        <a href="{% url 'dcim:device_add' %}?site={{ rack.site.pk }}&rack={{ rack.pk }}&face={{ face_id }}&position={{ u.id }}" class="add_device"
                       {% if u.id in reserved_units.keys %}{% with reserved_units|getkey:u.id as resv %}
                           data-toggle="popover" data-trigger="hover" data-container="body" data-html="true"
                           data-content="{{ resv.description }}<br/><small>{{ resv.user }} &middot; {{ resv.created }}</small>"
                       {% endwith %}{% endif %}
                        >add device</a>
                    {% endif %}
                </li>
            {% endif %}
        {% endfor %}
    </ul>

</div>