{% extends 'netbox_rack_design/design_editor.html' %}
{% load i18n %}
{% load rack_design %}

{# ------------------------------------------------------------------------- #}
{# The BLADE LAYER (spec §10.3).                                              #}
{#                                                                            #}
{# Deliberately EXTENDS the rack editor rather than forking it: the drawer,   #}
{# the legend/role/tenant toolbar and Save are identical, because a chassis   #}
{# IS a rack here -- bays in place of units. Only three things differ, and    #}
{# each is an override block on the parent template:                          #}
{#                                                                            #}
{#   rd_canvas       chassis columns instead of rack blocks                   #}
{#   rd_scope_panel  a Chassis panel instead of the Racks panel               #}
{#   rd_layer_switch a way back to the rack view                              #}
{#                                                                            #}
{# The palette itself is filtered to child device types by editor.js, which   #}
{# reads data-rd-blade-layer on the root -- so a non-child type can never be  #}
{# offered as a blade in the first place.                                     #}
{# ------------------------------------------------------------------------- #}

{# The drawer's third section holds chassis here, not racks. #}
{% block rd_scope_section_label %}{% trans "Chassis" %}{% endblock %}

{% block rd_layer_switch %}
  {# Not labelled "Racks": the drawer already has a Racks/Chassis section toggle #}
  {# and two identical labels in one button row is unreadable.                   #}
  <a class="btn btn-outline-secondary btn-sm me-2" data-rd-layer-switch
     href="{% url 'plugins:netbox_rack_design:design_editor_default' pk=object.pk %}"
     title="{% trans 'Back to the rack view' %}">
    <i class="mdi mdi-arrow-left" aria-hidden="true"></i> {% trans "Rack view" %}
  </a>
{% endblock rd_layer_switch %}

{% block rd_scope_panel %}
<div class="nbx-rd-drawer-section" data-rd-section="racks">
  <div class="card nbx-rd-panel-card">
    <div class="card-header">
      <h3 class="card-title">{% trans "Chassis" %}</h3>
    </div>
    {# Same show/hide contract as the Racks panel: HIDDEN state is stored, so a #}
    {# chassis with no row is visible. Toggling never touches the design.       #}
    <div class="list-group list-group-flush nbx-rd-scope-list"
         data-rd-chassis-list
         data-hidden-chassis-url="{{ hidden_chassis_url }}">
      {% for row in chassis_rows %}
      <div class="list-group-item d-flex align-items-center justify-content-between{% if row.hidden %} nbx-rd-scope-hidden{% endif %}"
           data-chassis-key="{{ row.key }}"
           {% if row.device %}data-chassis-id="{{ row.device.pk }}"{% endif %}>
        <div class="text-truncate">
          <div class="text-truncate">{{ row.label }}</div>
          <div class="text-muted small">
            {{ row.rack }} · {{ row.used }}/{{ row.bay_count }} {% trans "bays used" %}
            {% if not row.device %}· <span class="badge text-bg-blue">{% trans "planned" %}</span>{% endif %}
          </div>
        </div>
        {# A PLANNED chassis has no device row, so there is nothing to persist a #}
        {# hidden state against -- and hiding what you just added would be       #}
        {# unhelpful anyway. It is always visible.                               #}
        {% if row.device %}
        <button type="button" class="btn btn-ghost-secondary btn-sm"
                data-rd-chassis-toggle
                aria-pressed="{{ row.hidden|yesno:'true,false' }}"
                title="{% if row.hidden %}{% trans 'Show this chassis' %}{% else %}{% trans 'Hide this chassis' %}{% endif %}">
          <i class="mdi {% if row.hidden %}mdi-eye-off{% else %}mdi-eye{% endif %}" aria-hidden="true"></i>
        </button>
        {% endif %}
      </div>
      {% empty %}
      <div class="list-group-item text-muted small">
        {% trans "No chassis in this design's scope." %}
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock rd_scope_panel %}

{% block rd_canvas %}
<div class="nbx-rd-racks-scroll nbx-rd-blade-scroll" id="nbx-rd-racks-scroll"
     data-rd-blade-layer="true">
  {% for col in chassis_columns %}
  {# ------------------------------------------------------------------------ #}
  {# A chassis column is a DEGENERATE RACK, deliberately satisfying the exact   #}
  {# DOM contract initRack() already consumes, so the editor drives it with NO  #}
  {# changes at all (spec §10.3: a chassis IS a rack).                          #}
  {#                                                                            #}
  {#   .nbx-rd-rack-block  + data-rack-id   -> a synthetic per-column id        #}
  {#   data-u-height        = bay count      (one grid row per bay)             #}
  {#   data-desc-units="true" so gsYToUPosition() returns gsY+1 -- i.e. the     #}
  {#     1-based BAY INDEX -- with no arithmetic of its own                     #}
  {#   one data-face="front" grid; no rear, no tray (a chassis has neither)     #}
  {#   #rd-editor-data-<id> the widget JSON, same shape as a rack's             #}
  {#                                                                            #}
  {# The rack-only machinery (full-depth shadows, opposite-face hatches, the    #}
  {# tray) never fires here: no blade is full-depth and there is no second      #}
  {# face for a shadow to land on. data-real-rack-id / data-chassis-* carry     #}
  {# what buildLayoutPayload needs to translate this column's items into the    #}
  {# `bays` bucket the save contract expects (§10.6).                           #}
  {# ------------------------------------------------------------------------ #}
  <div class="nbx-rd-rack-block nbx-rd-chassis-block{% if col.hidden %} hidden{% endif %}"
       id="rd-rack-{{ col.grid_id }}"
       data-rack-id="{{ col.grid_id }}"
       data-u-height="{{ col.bay_count }}"
       data-desc-units="true"
       data-chassis-key="{{ col.key }}"
       data-real-rack-id="{{ col.rack.pk }}"
       data-bay-names="{{ col.bay_names_json }}"
       data-bay-ids="{{ col.bay_ids_json }}"
       {% if col.device %}data-chassis-id="{{ col.device.pk }}"{% endif %}
       {% if col.placement %}data-chassis-placement="{{ col.placement.pk }}"{% endif %}>
    <div class="nbx-rd-rack-block-header">
      {# Two short lines rather than one long one: the header must never be what #}
      {# decides the column's width. Rack and type live in the tooltip.           #}
      <div class="nbx-rd-rack-block-title" title="{{ col.rack }} · {{ col.device_type.model }}">
        {% if col.device %}<a href="{{ col.device.get_absolute_url }}">{{ col.label }}</a>
        {% else %}{{ col.label }} <span class="badge text-bg-blue">{% trans "planned" %}</span>{% endif %}
      </div>
      <div class="text-muted small" title="{{ col.rack }} · {{ col.device_type.model }}">
        {{ col.used }}/{{ col.bay_count }} {% trans "used" %} · {{ col.rack }}
      </div>
    </div>

    <div class="nbx-rd-chassis-body">
      <ul class="nbx-rd-unit-numbers nbx-rd-chassis-numbers" aria-hidden="true">
        {% for slot in col.slots %}<li title="{{ slot.name }}">{{ slot.index }}</li>{% endfor %}
      </ul>
      <div class="nbx-rd-grid-wrap">
        <div class="grid-stack nbx-rd-rack nbx-rd-chassis-grid{% if editable_layer %} nbx-rd-editable{% endif %}"
             id="nbx-rd-grid-front-{{ col.grid_id }}"
             data-rack-id="{{ col.grid_id }}"
             data-face="front"
             gs-column="1"
             gs-max-row="{{ col.bay_count|mul2 }}"
             gs-min-row="{{ col.bay_count|mul2 }}">
          {% for slot in col.slots %}{% if slot.label %}
          <div class="grid-stack-item nbx-rd-state-{{ slot.state }}"
               gs-w="1" gs-h="2" gs-x="0" gs-y="{{ slot.gs_y }}"
               gs-id="w-{{ col.grid_id }}-{{ forloop.counter0 }}"
               data-widget-index="{{ slot.widget_index }}">
            <div class="grid-stack-item-content"
                 data-name="{{ slot.label }}"
                 data-bay-name="{{ slot.name }}"
                 {% if slot.bay %}data-bay-id="{{ slot.bay.pk }}"{% endif %}
                 {% if slot.device_type %}data-device-type-name="{{ slot.device_type }}"{% endif %}
                 title="{% blocktrans with n=slot.index %}Bay {{ n }}{% endblocktrans %} ({{ slot.name }}) · {{ slot.label }}">
              {% if editable_layer %}<button type="button" class="nbx-rd-remove-btn"
                      title="{% trans 'Flag for removal' %}"
                      aria-label="{% trans 'Flag for removal' %}">&times;</button>{% endif %}
              <span class="nbx-rd-label">{{ slot.label }}</span>
            </div>
          </div>
          {% endif %}{% endfor %}
        </div>
      </div>
    </div>
  </div>
  {% if editable_layer %}{% with eid="rd-editor-data-"|add:col.grid_id_str %}{{ col.widgets|json_script:eid }}{% endwith %}{% endif %}
  {% empty %}
  <div class="nbx-rd-empty-state text-center text-muted p-5">
    <i class="mdi mdi-view-grid-outline mdi-48px d-block mb-2" aria-hidden="true"></i>
    <p class="mb-0">
      {% trans "No chassis in this design's scope — add a parent device in the rack view first." %}
    </p>
  </div>
  {% endfor %}
</div>
{% endblock rd_canvas %}