{% load i18n %}
{% load rack %}
{% load perms %}
{# Rendered as a TemplatePanel by ReorderView. The surrounding page chrome — breadcrumbs, #}
{# title and tabs — comes from the view's declarative layout, not from this template. #}
<div class="row">
    <div class="d-flex justify-content-end btn-list mb-2">
        <select class="btn btn-outline-secondary no-ts rack-view"
                id="view-selector"
                aria-label="{% trans "Rack elevation view" %}">
            <option value="images-and-labels" selected="selected">{% trans "Images and Labels" %}</option>
            <option value="images-only">{% trans "Images only" %}</option>
            <option value="labels-only">{% trans "Labels only" %}</option>
        </select>
        <button class="btn btn-success" id="saveButton" disabled>{% trans "Save" %}</button>
    </div>
</div>
<div class="container mt-2">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12 text-center">
            <h4>{% trans "Front" %}</h4>
            {% include "netbox_reorder_rack/inc/rack_elevation.html" with units=front_units face="front" %}
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12 text-center">
            <h4>{% trans "Back" %}</h4>
            {% include "netbox_reorder_rack/inc/rack_elevation.html" with units=rear_units face="rear" %}
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12 text-center">
            <h4>{% trans "Non-Racked Devices" %}</h4>
            <div class="d-flex justify-content-center">
                <div class="grid-stack rack"
                     id="grid-other"
                     gs-column="2"
                     gs-max-row="150"
                     gs-min-row="{{ object.u_height|mul:2 }}"
                     data-grid-id="2">
                    {% for device in non_racked %}
                        <div class="grid-stack-item"
                             gs-w="2"
                             gs-h="{{ device.device_type.u_height|mul:2 }}"
                             gs-x="0"
                             gs-id="{{ device.id }}"
                             data-item-face="none"
                             data-item-color="{{ device.role.color }}"
                             data-item-text-color="{% if device.role.color %}{{ device.role.color|text_color }}{% else %}000000{% endif %}"
                             data-full-depth="{{ device.device_type.is_full_depth }}"
                             gs-locked="{% if not request.user|can_change:device %}true{% else %}{% endif %}"
                             gs-no-move="{% if not request.user|can_change:device %}true{% else %}{% endif %}">
                            <div class="grid-stack-item-content"
                                 style="{% if device.device_type.front_image and images %}background-image: url('{{ device.device_type.front_image.url }}');
                                        background-size: {{ unit_width }}px;
                                        {% else %}background-color: #{{ device.role.color }};
                                        {% endif %} color: #{% if device.role.color %}{{ device.role.color|text_color }}{% else %}000000{% endif %}">
                                {% if not device.name %}
                                    {{ device.device_type }}
                                {% else %}
                                    {{ device.name }}
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>