{% extends 'generic/object.html' %}
{% load static %}
{% load i18n %}
{% load rack_design %}

{# Read-only projected elevation of ALL the design's scoped racks, rendered    #}
{# identically to the editor canvas (every scoped rack side by side, BOTH      #}
{# Front and Rear faces, full-depth opposite-face hatch and a hover card) but  #}
{# with NO edit affordances: no catalog/quick-access, no add-rack/design-racks #}
{# panels, no drag, no × remove, no favorites, no Save. Static GridStack only. #}
{#                                                                            #}
{# Reuses the SAME per-rack block markup as the editor via                     #}
{# inc/rack_block.html (editable=False); the projection comes from the SAME    #}
{# views._project_rack_bundle helper the editor uses. #}

{% block head %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'netbox_rack_design/css/gridstack.min.css' %}">
  <link rel="stylesheet" href="{% static 'netbox_rack_design/css/rack_design.css' %}?v={{ asset_version }}">
  {# editor.css supplies the shared multi-rack layout, the full-depth hatch and #}
  {# the hover-card styling — none of which imply editability. #}
  <link rel="stylesheet" href="{% static 'netbox_rack_design/css/editor.css' %}?v={{ asset_version }}">
{% endblock head %}

{% block content %}
<div class="row mb-3">
  <div class="col col-md-12">
    <div class="card">
      <h2 class="card-header">
        {% blocktrans with design=object.title %}Projected elevation: {{ design }}{% endblocktrans %}
        {% if perms.netbox_rack_design.change_design %}
        <div class="card-actions">
          <a href="{% url 'plugins:netbox_rack_design:design_editor_default' pk=object.pk %}"
             class="btn btn-sm btn-warning">
            <i class="mdi mdi-pencil" aria-hidden="true"></i> {% trans "Open editor" %}
          </a>
        </div>
        {% endif %}
      </h2>

      {# Read-only root: scopes the static-grid init, the per-rack face toggles #}
      {# and the hover card (see rack_design.js). #}
      <div class="card-body" id="rd-elevation">

        {# Legend — also acts as a per-state filter (see legend_filter.js). #}
        <div class="nbx-rd-legend mb-3" data-rd-legend>
          <label class="nbx-rd-filter"><input type="checkbox" checked data-rd-state="existing"><span class="nbx-rd-swatch nbx-rd-state-existing"></span>{% trans "Existing" %}</label>
          <label class="nbx-rd-filter"><input type="checkbox" checked data-rd-state="add"><span class="nbx-rd-swatch nbx-rd-state-add"></span>{% trans "Add" %}</label>
          <label class="nbx-rd-filter"><input type="checkbox" checked data-rd-state="move_in"><span class="nbx-rd-swatch nbx-rd-state-move_in"></span>{% trans "Move in" %}</label>
          <label class="nbx-rd-filter"><input type="checkbox" checked data-rd-state="move_out_ghost"><span class="nbx-rd-swatch nbx-rd-state-move_out_ghost"></span>{% trans "Move out (ghost)" %}</label>
          <label class="nbx-rd-filter"><input type="checkbox" checked data-rd-state="remove"><span class="nbx-rd-swatch nbx-rd-state-remove"></span>{% trans "Remove" %}</label>
        </div>

        {% if rack_blocks %}
        <div class="nbx-rd-racks-scroll" id="nbx-rd-racks-scroll">
        {% for b in rack_blocks %}
          {% include 'netbox_rack_design/inc/rack_block.html' with b=b editable=False %}
        {% endfor %}
        </div>{# /.nbx-rd-racks-scroll #}
        {% else %}
        <p class="text-muted mb-0">{% trans "This design has no racks in scope yet." %}</p>
        {% endif %}

      </div>
    </div>
  </div>
</div>
{% endblock content %}

{% block javascript %}
  {{ block.super }}
  <script src="{% static 'netbox_rack_design/js/gridstack-all.js' %}"></script>
  <script src="{% static 'netbox_rack_design/js/rack_design.js' %}?v={{ asset_version }}" defer></script>
  <script src="{% static 'netbox_rack_design/js/legend_filter.js' %}?v={{ asset_version }}" defer></script>
{% endblock javascript %}