{% extends 'generic/object_list.html' %}
{% load helpers %}
{% load static %}

{% block buttons %}
    <button class="btn btn-default toggle-images" selected="selected">
        <span class="mdi mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Images
    </button>
    <div class="btn-group" role="group">
        <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='front' %}" class="btn btn-default{% if rack_face == 'front' %} active{% endif %}">Front</a>
        <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='rear' %}" class="btn btn-default{% if rack_face == 'rear' %} active{% endif %}">Rear</a>
    </div>
    <div class="btn-group" role="group">
        <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request reverse=None %}" class="btn btn-default{% if not reverse %} active{% endif %}">Normal</a>
        <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request reverse='true' %}" class="btn btn-default{% if reverse %} active{% endif %}">Reversed</a>
    </div>
{% endblock %}

{% block table %}
    {% if page %}
        <div style="white-space: nowrap; overflow-x: scroll;">
            {% for rack in page %}
                <div style="display: inline-block; margin-right: 12px; width: 254px">
                  <div style="margin-left: 30px">
                    <div class="text-center">
                        <strong>{{ rack|hyperlinked_object }}</strong>
                        {% if rack.role %}
                            <br /><small class="label" style="color: {{ rack.role.color|fgcolor }}; background-color: #{{ rack.role.color }}">{{ rack.role }}</small>
                        {% endif %}
                        {% if rack.facility_id %}
                            <br /><small class="text-muted">{{ rack.facility_id }}</small>
                        {% endif %}
                    </div>
                    {% include 'dcim/inc/rack_elevation.html' with object=rack face=rack_face %}
                    <div class="clearfix"></div>
                    <div class="text-center">
                        <strong>{{ rack|hyperlinked_object }}</strong>
                        {% if rack.facility_id %}
                            <small class="text-muted">({{ rack.facility_id }})</small>
                        {% endif %}
                    </div>
                  </div>
                </div>
            {% endfor %}
        </div>
        <br />
        {% include 'inc/paginator.html' %}
    {% else %}
        <p>No racks found</p>
    {% endif %}
{% endblock %}


{% block javascript %}
    {{ block.super }}
    <script src="{% versioned_static 'js/rack_elevations.js' %}"></script>
{% endblock %}