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

{# Interactive single-rack layout editor (Stage 2, slice 2a: MOVE + REMOVE).   #}
{# Forks design_elevation.html but initialises GridStack WITHOUT staticGrid so  #}
{# slots can be dragged vertically (and between faces / into the non-racked     #}
{# tray). editor.js hydrates from #rd-editor-data, tracks each widget's original #}
{# (u_position, face), and POSTs a diff to data-save-url. NO model changes.      #}
{#                                                                               #}
{# Widget indices: views.py builds `widgets` (and widgets_json) in the order    #}
{# (*front, *rear, *non_racked). Each grid-stack-item below is stamped with the  #}
{# matching GLOBAL index via `gs-id`/data-widget-index so editor.js can pair the #}
{# JSON payload to its DOM tile: front uses forloop.counter0; rear adds the      #}
{# front length; the tray adds front+rear lengths.                              #}

{% 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 }}">
  <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 %}Edit layout: {{ design }}{% endblocktrans %}
        <div class="card-actions">
          {# Three INDEPENDENT section toggles for the ONE push/collapse tool      #}
          {# drawer. Each button shows or hides ONLY its own section; any          #}
          {# combination can be open at once (open sections sit side by side as    #}
          {# columns in the drawer). The                                           #}
          {# drawer is open whenever ANY section is active. editor_panels.js marks  #}
          {# each active button and persists the SET of open sections per browser. #}
          <div class="btn-group btn-group-sm me-2" role="group"
               aria-label="{% trans 'Editor tool sections' %}">
            <button type="button" class="btn btn-outline-secondary"
                    data-rd-section-toggle="device"
                    aria-controls="nbx-rd-drawer"
                    aria-expanded="false"
                    title="{% trans 'Device-type catalog' %}">
              <i class="mdi mdi-server" aria-hidden="true"></i> {% trans "Device" %}
            </button>
            <button type="button" class="btn btn-outline-secondary"
                    data-rd-section-toggle="favorites"
                    aria-controls="nbx-rd-drawer"
                    aria-expanded="false"
                    title="{% trans 'Quick access favorites' %}">
              <i class="mdi mdi-star" aria-hidden="true"></i> {% trans "Favorites" %}
            </button>
            <button type="button" class="btn btn-outline-secondary"
                    data-rd-section-toggle="templates"
                    aria-controls="nbx-rd-drawer"
                    aria-expanded="false"
                    title="{% trans 'Rack templates' %}">
              <i class="mdi mdi-view-grid-plus-outline" aria-hidden="true"></i> {% trans "Templates" %}
            </button>
            <button type="button" class="btn btn-outline-secondary"
                    data-rd-section-toggle="racks"
                    aria-controls="nbx-rd-drawer"
                    aria-expanded="false"
                    title="{% trans 'Add and manage design racks' %}">
              <i class="mdi mdi-rack" aria-hidden="true"></i>
              {% block rd_scope_section_label %}{% trans "Racks" %}{% endblock %}
            </button>
          </div>
          {# ONE design-level Save: editor.js collects edits from EVERY rendered #}
          {# rack block and POSTs a single multi-rack payload.                   #}
          {% block rd_layer_switch %}
          {# Chassis layer (spec §10.3): only offered when the design's scope        #}
          {# actually contains a chassis WITH BAYS, so a deployment with no such   #}
          {# never sees the feature.                                                #}
          {% if has_chassis_in_scope %}
          <a class="btn btn-outline-secondary btn-sm me-2" data-rd-layer-switch
             href="{% url 'plugins:netbox_rack_design:design_chassis' pk=object.pk %}"
             title="{% trans 'Switch to the chassis layer' %}">
            <i class="mdi mdi-view-grid-outline" aria-hidden="true"></i> {% trans "Chassis" %}
          </a>
          {% endif %}
          {% endblock rd_layer_switch %}
          <button type="button" class="btn btn-primary btn-sm" id="rd-editor-save" disabled>
            <i class="mdi mdi-content-save" aria-hidden="true"></i> {% trans "Save" %}
          </button>
        </div>
      </h2>

      {# The editor root: carries the design-level save URL + shared context the #}
      {# JS needs. Per-rack meta lives on each .nbx-rd-rack-block below.          #}
      <div class="card-body"
           id="rd-editor"
           data-design-id="{{ object.pk }}"
           data-design-title="{{ object.title }}"
           data-preview-name-url="{{ preview_name_url }}"
           data-rerun-naming-preview-url="{{ rerun_naming_preview_url }}"
           data-rerun-naming-url="{{ rerun_naming_url }}"
           data-save-url="{{ save_url }}"
           data-favorites-url="{{ favorites_url }}"
           data-favorite-sets-url="{{ favorite_sets_url }}"
           data-templates-url="{{ templates_url }}"
           data-template-groups-url="{{ template_groups_url }}"
           data-create-planned-rack-url="{{ create_planned_rack_url }}"
           data-csrf-token="{{ csrf_token }}">

        {# T1.5 "Create rack" dialog data (PLAN-multi-site.md M8): the         #}
        {# design's own sites, each with its own locations, read once by      #}
        {# editor_panels.js to populate the dialog's plain <select>s (no      #}
        {# TomSelect -- the modal is built at open time, same as dialogs.js's #}
        {# own dialogs). One entry -> the dialog shows a read-only Site chip. #}
        {{ site_locations|json_script:"rd-site-locations" }}

        {# ---- Persistent conflicts panel (PLAN-design-chains.md §8.3) ---- #}
        {# ONE component for every "this design has a problem that isn't a   #}
        {# slot" condition, not a toast: a toast is transient and both of     #}
        {# these persist across sessions until someone acts (re-save the     #}
        {# stale placement, or re-base onto a newer ancestor). Two rows:      #}
        {#                                                                    #}
        {# 1. Stale placements (device deleted from DCIM) -- inert everywhere #}
        {#    in the editor (projection.py skips them, so they never render   #}
        {#    as a tile); without this banner a planner would never learn a   #}
        {#    planned move/removal silently stopped happening. See            #}
        {#    DesignView's own "Stale placements" panel on the design detail  #}
        {#    page for the fuller report; this just points them there.        #}
        {# 2. Chain conflicts (`chain_conflicts`, an editor-context list of    #}
        {#    {kind, severity, detail, rack_id, source_design_id,             #}
        {#    source_design_name, slot_key} -- §8.2/§8.3): an upstream        #}
        {#    condition that does not block save and that this design cannot #}
        {#    fix by editing the flagged tile, only by re-basing. Read        #}
        {#    defensively -- `chain_conflicts` may not exist yet on a         #}
        {#    concurrently-landing server build; an absent/undefined value    #}
        {#    is simply falsy here, same as `stale_placements` always was.    #}
        {# 3. Peer conflicts (PLAN-peer-conflicts.md P7/P12, `peer_conflict_  #}
        {#    rows` -- the same flat entry shape as `chain_conflicts`, PLUS   #}
        {#    name-claim rows pre-grouped per peer design): a design NOT in   #}
        {#    this design's lineage also claims a unit, a name, or a real     #}
        {#    device this design plans to move. Save is not blocked EITHER   #}
        {#    (P5), but re-basing does nothing about a peer -- a peer is not  #}
        {#    upstream -- so this gets its OWN sentence, never the chain      #}
        {#    row's "re-base to resolve" wording.                            #}
        {% if stale_placements or chain_conflicts or peer_conflict_rows %}
        <div class="nbx-rd-conflicts-panel alert alert-warning" role="alert" data-rd-conflicts-panel>
          <div class="nbx-rd-conflicts-header">
            <i class="mdi mdi-alert-outline" aria-hidden="true"></i>
            {% trans "Design conflicts" %}
          </div>
          {% if stale_placements %}
          <div class="nbx-rd-conflicts-row">
            {% blocktrans count counter=stale_placements|length %}
              {{ counter }} planned placement can no longer happen because its device was deleted from DCIM:
            {% plural %}
              {{ counter }} planned placements can no longer happen because their devices were deleted from DCIM:
            {% endblocktrans %}
            {% for placement in stale_placements %}<strong>{{ placement.stale_device_name }}</strong>{% if not forloop.last %}, {% endif %}{% endfor %}.
            <a href="{{ object.get_absolute_url }}">{% trans "See details on the design page" %}</a>.
          </div>
          {% endif %}
          {% if chain_conflicts %}
          <div class="nbx-rd-conflicts-row nbx-rd-chain-conflicts">
            <div class="small text-muted mb-1">
              {% trans "Upstream (chain) conflicts -- save is not blocked; re-base this design to resolve:" %}
            </div>
            <ul class="mb-0 ps-3">
              {% for c in chain_conflicts %}
              <li class="{% if c.severity == 'error' %}text-danger{% else %}text-warning-emphasis{% endif %}">
                {{ c.detail }}
                {% if c.source_design_name %}
                <span class="text-muted small">
                  ({% trans "from" %}
                  {% if c.source_design_id %}<a href="{% url 'plugins:netbox_rack_design:design' pk=c.source_design_id %}">{{ c.source_design_name }}</a>{% else %}{{ c.source_design_name }}{% endif %})
                </span>
                {% endif %}
              </li>
              {% endfor %}
            </ul>
          </div>
          {% endif %}
          {% if peer_conflict_rows %}
          <div class="nbx-rd-conflicts-row nbx-rd-peer-conflicts">
            {# P7: its own sentence, not the chain row's "re-base to resolve" --  #}
            {# re-basing does nothing about a peer (it is not upstream). What a   #}
            {# peer conflict asks of the reader, true today with no forward       #}
            {# reference to the rename dialog (phase 3): talk to the other        #}
            {# planner, or change this design's own plan.                        #}
            <div class="small text-muted mb-1">
              {% trans "Peer conflicts -- save is not blocked; another design outside this design's chain plans the same unit, name, or device. Resolve by talking to that design's planner, or by changing this design's own plan:" %}
            </div>
            <ul class="mb-0 ps-3">
              {% for row in peer_conflict_rows %}
              {# Severity is visible per row (P1): an APPROVED peer's claim is  #}
              {# `text-danger`, a draft peer's `text-warning-emphasis` -- the   #}
              {# SAME two classes the chain row above already uses for its own  #}
              {# severity. Never a red tile/panel fill: the 0.19.0 comment in   #}
              {# inc/rack_block.html reserves red backgrounds for displacement. #}
              <li class="{% if row.severity == 'error' %}text-danger{% else %}text-warning-emphasis{% endif %}">
                {% if row.grouped %}
                  {# P12: one row per peer design for name claims, not one per   #}
                  {# colliding name (P11 means a whole family collides at once).  #}
                  {# Only ever reached with TWO or more -- a group of one is      #}
                  {# unwrapped back into a plain row in `_design_editor_context`. #}
                  {# The design is named INSIDE this sentence, so this branch     #}
                  {# does not also append the "(from X)" span below: printing the #}
                  {# same title twice in one visible line reads as a rendering    #}
                  {# fault.                                                      #}
                  {% if row.source_design_id %}<a href="{% url 'plugins:netbox_rack_design:design' pk=row.source_design_id %}">{{ row.source_design_name }}</a>{% else %}{{ row.source_design_name }}{% endif %}
                  {% blocktrans count counter=row.entries|length %}also claims {{ counter }} of this design's planned names.{% plural %}also claims {{ counter }} of this design's planned names.{% endblocktrans %}
                  <details class="d-inline">
                    <summary class="d-inline text-muted small" style="cursor: pointer;">{% trans "Show" %}</summary>
                    <ul class="mb-0 ps-3">
                      {% for e in row.entries %}<li>{{ e.detail }}</li>{% endfor %}
                    </ul>
                  </details>
                  {# P10: one "Re-run naming" button acts on the WHOLE batch  #}
                  {# (P12) -- `data-rd-placement-ids` carries every colliding  #}
                  {# placement pk this row groups, comma-joined.              #}
                  <button type="button" class="btn btn-sm btn-outline-secondary ms-1 nbx-rd-rerun-naming"
                          data-rd-rerun-naming data-rd-placement-ids="{{ row.placement_ids_csv }}">
                    {% trans "Re-run naming" %}
                  </button>
                {% else %}
                  {{ row.detail }}
                  {% if row.source_design_name %}
                  <span class="text-muted small">
                    ({% trans "from" %}
                    {% if row.source_design_id %}<a href="{% url 'plugins:netbox_rack_design:design' pk=row.source_design_id %}">{{ row.source_design_name }}</a>{% else %}{{ row.source_design_name }}{% endif %})
                  </span>
                  {% endif %}
                  {% if row.kind == "peer_name_claim" %}
                  {# P10: the single-collision case -- same button, one pk.   #}
                  <button type="button" class="btn btn-sm btn-outline-secondary ms-1 nbx-rd-rerun-naming"
                          data-rd-rerun-naming data-rd-placement-ids="{{ row.placement_ids_csv }}">
                    {% trans "Re-run naming" %}
                  </button>
                  {% endif %}
                {% endif %}
              </li>
              {% endfor %}
            </ul>
          </div>
          {% endif %}
        </div>
        {% endif %}

        {# Custom-field bridge schema (docs/pdu-distribution-spec.md §5): read #}
        {# once by editor.js to render the rack-power dialog's fields          #}
        {# dynamically -- no cf name is ever hardcoded in JS/HTML.             #}
        {{ planning_fields|json_script:"rd-planning-fields" }}

        {# Effective power-distribution engine (docs/pdu-distribution-spec.md): #}
        {# editor.js reads this to gate the power dialogs' manual cf inputs --  #}
        {# they only ever reach a user's distribution script.                  #}
        {{ distribution_mode|json_script:"rd-distribution-mode" }}

        {# Config-declared PLACEMENT fields (planning_fields.py): the planning #}
        {# attributes a planner sets on a planned device. editor.js renders the #}
        {# rail inputs and the per-tile dialog from this -- no cf name is ever #}
        {# named in HTML or JS. `[]` (default) -> no extra inputs at all.       #}
        {{ placement_fields|json_script:"rd-placement-fields" }}

        {# Peer conflicts (PLAN-peer-conflicts.md P5), flat/ungrouped -- the   #}
        {# SAME entries the panel row above renders, mounted here too so      #}
        {# editor.js can read them without a network round trip. Consumed     #}
        {# exactly once, right after a save-triggered reload, to fire the     #}
        {# save-time toast (see editor.js's post-save-toast gate); the panel  #}
        {# row above is what persists across every OTHER page view.          #}
        {{ peer_conflicts|json_script:"rd-peer-conflicts" }}

        {# ---- ONE always-visible toolbar line: the state-LEGEND filter and the #}
        {# Role/Tenant selects share a single horizontal row above the drawer +  #}
        {# racks shell, visible regardless of which drawer sections are open.     #}
        {#                                                                        #}
        {# Left group — the legend, which also acts as a per-state filter         #}
        {# (legend_filter.js binds [data-rd-legend] and the data-rd-state         #}
        {# checkboxes; unchecking hides that state's slots). Shared across every  #}
        {# rack block in this card-body.                                          #}
        {# Right group — Role + Tenant, the SAME API-backed                       #}
        {# DynamicModelChoiceFields with the SAME widget ids (#id_device_role /   #}
        {# #id_tenant): NetBox's select-init enhances them into TomSelect and     #}
        {# editor.js onPaletteDrop reads them by id to stamp the next drag-in.    #}
        {# A `vr` divider separates the two groups; the line wraps only when the  #}
        {# viewport is too narrow. #}
        <div class="nbx-rd-toolbar mb-3 d-flex flex-wrap align-items-center gap-3" data-rd-toolbar>
          <div class="nbx-rd-legend" 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>
            {# ---- Phase 4 (PLAN-design-chains.md §8.4/§8.6) ---- #}
            {# `inherited`/`conflict` are FLAGS on top of a state, not new    #}
            {# states -- they get their OWN checkboxes (data-rd-flag, wired   #}
            {# by legend_filter.js) that filter independently of, and         #}
            {# combine by OR with, the five state checkboxes above.           #}
            <label class="nbx-rd-filter" title="{% trans 'A tile carried over from an approved ancestor design' %}"><input type="checkbox" checked data-rd-flag="inherited"><span class="nbx-rd-swatch nbx-rd-flag-inherited"></span>{% trans "Inherited" %}</label>
            <label class="nbx-rd-filter" title="{% trans 'An upstream design now disagrees with this placement -- does not block save' %}"><input type="checkbox" checked data-rd-flag="conflict"><span class="nbx-rd-swatch nbx-rd-flag-conflict"></span>{% trans "Conflict" %}</label>
            {# Peer conflict (PLAN-peer-conflicts.md P7), the same flag-not-state #}
            {# pattern: a design OUTSIDE this design's chain claims this unit,    #}
            {# name, or device. Never blocks save either. #}
            <label class="nbx-rd-filter" title="{% trans 'A design outside this design\'s chain also claims this unit, name, or device -- does not block save' %}"><input type="checkbox" checked data-rd-flag="peer_conflict"><span class="nbx-rd-swatch nbx-rd-flag-peer_conflict"></span>{% trans "Peer conflict" %}</label>
            {# Apply markers (apply-projection phase): same flag-not-state pattern. #}
            <label class="nbx-rd-filter" title="{% trans 'This design already applied it -- pressing apply again is a no-op' %}"><input type="checkbox" checked data-rd-flag="applied"><span class="nbx-rd-swatch nbx-rd-flag-applied"></span>{% trans "Applied" %}</label>
            <label class="nbx-rd-filter" title="{% trans 'Another design already applied this device' %}"><input type="checkbox" checked data-rd-flag="reserved"><span class="nbx-rd-swatch nbx-rd-flag-reserved"></span>{% trans "Reserved" %}</label>
            {# Legend debt fix (§8.6): these two existing markers -- the      #}
            {# displacement stripe and the save-rejection ring -- had NO      #}
            {# legend entry at all. INFO-only keys (no checkbox): unchecking  #}
            {# a state already hides that state's own stripe, and the error   #}
            {# ring is a transient highlight, not something to filter.        #}
            <span class="nbx-rd-key" title="{% trans 'A device leaving this slot, replaced by what you see here' %}"><span class="nbx-rd-swatch nbx-rd-info-displaced"></span>{% trans "Displaced (was here)" %}</span>
            <span class="nbx-rd-key" title="{% trans 'The server rejected this placement on save' %}"><span class="nbx-rd-swatch nbx-rd-info-error"></span>{% trans "Rejected" %}</span>
          </div>
          <div class="vr nbx-rd-toolbar-sep d-none d-md-block" aria-hidden="true"></div>
          {# Power heatmap toggle (docs/power-projection-spec.md §3): recolor #}
          {# tiles green->red by each device's share of the rack's total draw. #}
          <label class="nbx-rd-filter" title="{% trans 'Color devices by power consumption (share of rack total)' %}">
            <input type="checkbox" data-rd-power-heatmap>{% trans "Power heatmap" %}
          </label>
          {# Bank zone strip toggle: the narrow per-PDU bars beside each face #}
          {# grid showing which U range each power bank serves. Independent  #}
          {# of the heatmap -- these are structural, not a coloring view.    #}
          <label class="nbx-rd-filter" title="{% trans 'Show which U range each PDU power bank serves, beside the rack' %}">
            <input type="checkbox" data-rd-bank-zones>{% trans "Bank zones" %}
          </label>
          <span class="nbx-rd-heat-legend" aria-hidden="true">
            <span class="small text-muted">{% trans "low" %}</span>
            <span class="nbx-rd-heat-scale"></span>
            <span class="small text-muted">{% trans "high" %}</span>
          </span>
          <div class="vr nbx-rd-toolbar-sep d-none d-md-block" aria-hidden="true"></div>
          <div class="nbx-rd-toolbar-field d-flex align-items-center gap-2">
            <label class="form-label small mb-0 text-nowrap" for="id_device_role">{% trans "Role" %}</label>
            {{ palette_form.device_role }}
          </div>
          <div class="nbx-rd-toolbar-field d-flex align-items-center gap-2">
            <label class="form-label small mb-0 text-nowrap" for="id_tenant">{% trans "Tenant" %}</label>
            {{ palette_form.tenant }}
          </div>
          {# Sticky defaults for the deployment's own config-declared planning #}
          {# fields, rendered by editor.js from the placement_fields schema --  #}
          {# an empty mount here so no field name lives in this template.       #}
          <div class="d-flex flex-wrap align-items-center gap-3" data-rd-placement-rail></div>
          {# Single minimal affordance: the duplicated inline hint text is gone; #}
          {# only this ⓘ remains, explained via its tooltip. #}
          <span class="nbx-rd-toolbar-hint text-muted" title="{% trans 'Applied to devices you drag in next' %}">
            <i class="mdi mdi-information-outline" aria-hidden="true"></i>
          </span>
        </div>

        {# ---- Editor shell: a PUSH/COLLAPSE sidebar layout. The tool drawer is a #}
        {#      left flex column; the rack workspace is the remaining width. When  #}
        {#      the drawer is OPEN both are visible side by side (so a device-type #}
        {#      can still be dragged from the catalog onto a rack face); when      #}
        {#      CLOSED (the default) the drawer is removed and the racks take the  #}
        {#      full width and sit at the top, immediately visible. editor_panels  #}
        {#      .js toggles .drawer-open here from the set of active sections. ---- #}
        {# data-drawer-section-initial signals the section(s) editor_panels.js      #}
        {# opens when the user has NO stored preference: "" (closed) normally, but  #}
        {# "racks" for a design with NO racks yet so the Add-rack panel is          #}
        {# immediately reachable for the first rack. #}
        <div class="nbx-rd-editor-shell nbx-rd-editor-layout" id="nbx-rd-editor-shell"
             data-drawer-section-initial="{% if all_rack_blocks %}{% else %}racks{% endif %}">

          {# ---- Collapsible tool drawer: ONE area, three INDEPENDENT ---- #}
          {# sections (Device / Favorites / Racks). Each card-header toggle shows  #}
          {# or hides its own section; any combination can be open and the active  #}
          {# sections lay out side by side as columns (the drawer widens right).   #}
          <div class="nbx-rd-drawer" id="nbx-rd-drawer">

          {# ===== Section: Device (device-type catalog only) ===== #}
          {# Role + Tenant moved OUT to the always-visible toolbar above. #}
          <div class="nbx-rd-drawer-section" data-rd-section="device">
            {# ---- Catalog palette (drag a device type onto a face to plan an add) ---- #}
            <div class="card nbx-rd-palette-card" id="nbx-rd-palette" data-rd-palette>
              <div class="card-header">
                <h3 class="card-title">{% trans "Device-type catalog" %}</h3>
              </div>
              <div class="card-body nbx-rd-palette-controls">
                {# NetBox API-backed searchable select; the editor JS reads its #}
                {# value (#id_manufacturer) to filter the CATALOG search only. #}
                <div class="mb-2">{{ palette_form.manufacturer }}</div>
                <input type="search" class="form-control form-control-sm"
                       id="nbx-rd-palette-search"
                       placeholder="{% trans 'Search device types…' %}"
                       autocomplete="off"
                       aria-label="{% trans 'Search device types' %}">
                <div class="nbx-rd-palette-status text-muted small mt-1" id="nbx-rd-palette-status"></div>
                {# Discoverability: a dragged-in device is auto-named by the naming #}
                {# engine and the name is editable on its tile. In template mode the #}
                {# tokens are dotted NetBox-model paths. #}
                <div class="text-muted small mt-1 nbx-rd-naming-hint">
                  <i class="mdi mdi-information-outline" aria-hidden="true"></i>
                  {% blocktrans %}Dropped devices are auto-named; edit the name on the tile. Template tokens are dotted model paths, e.g. <code>{design.name}</code>, <code>{device.site.name}</code>.{% endblocktrans %}
                </div>
              </div>
              {# Only this list scrolls; the controls above stay pinned. #}
              <div class="list-group list-group-flush nbx-rd-palette-list" id="nbx-rd-palette-list"></div>
            </div>
          </div>{# /section: device #}

          {# ===== Section: Racks (add-rack + design-racks) ===== #}
          {# The third drawer section is the SCOPE panel. The chassis layer         #}
          {# overrides                                                             #}
          {# it with a Chassis panel -- same show/hide behaviour, chassis instead   #}
          {# of racks (spec §10.3).                                                 #}
          {% block rd_scope_panel %}
          <div class="nbx-rd-drawer-section" data-rd-section="racks">
            {# ---- Add a rack to this design's scope (filtered by location) ---- #}
            {# Location + rack are API-backed DynamicModelChoiceFields scoped to    #}
            {# the design's site; the rack chooser chains on the chosen location.   #}
            {# editor_panels.js reads #id_add_rack and POSTs it to add-rack, then   #}
            {# reloads so the server re-renders the new rack block.                 #}
            <div class="card" id="nbx-rd-add-rack-card" data-rd-add-rack>
              <div class="card-header">
                <h3 class="card-title">{% trans "Add rack" %}</h3>
              </div>
              <div class="card-body">
                <div class="mb-2">
                  <label class="form-label small mb-1" for="id_add_site">{% trans "Site" %}</label>
                  {# A live picker over every site, never a fixed chip (user  #}
                  {# ruling 2026-09-22): it is the filter for Location/Rack,  #}
                  {# and picking a site the design does not cover yet is how  #}
                  {# a design becomes multi-site -- add-rack widens it. A     #}
                  {# design with exactly one site starts pre-filled with it.  #}
                  {{ add_rack_form.add_site }}
                </div>
                <div class="mb-2">
                  <label class="form-label small mb-1" for="id_add_location">{% trans "Location" %}</label>
                  {{ add_rack_form.add_location }}
                </div>
                <div class="mb-2">
                  <label class="form-label small mb-1" for="id_add_rack">{% trans "Rack" %}</label>
                  {{ add_rack_form.add_rack }}
                </div>
                <button type="button" class="btn btn-primary btn-sm w-100" id="nbx-rd-add-rack-btn">
                  <i class="mdi mdi-plus-thick" aria-hidden="true"></i> {% trans "Add" %}
                </button>
              </div>
            </div>

            {# ---- Create a rack that does not exist in NetBox yet (T1.5, ---- #}
            {# PLAN-templates.md §1: a "planned rack"). Opens a dialog (name,   #}
            {# U height, location); editor_panels.js builds it at click time,   #}
            {# the same pattern power.js's own dialogs use, and POSTs to        #}
            {# create-planned-rack, then reloads on success so the server       #}
            {# re-renders the new (badged) rack block -- identical to Add rack  #}
            {# above. #}
            <div class="card mt-2" id="nbx-rd-create-planned-rack-card" data-rd-create-planned-rack>
              <div class="card-header">
                <h3 class="card-title">{% trans "Create rack" %}</h3>
              </div>
              <div class="card-body">
                <p class="small text-muted mb-2">
                  {% trans "Plan a rack before it exists in NetBox -- it is created (or an existing match adopted) when the design is applied." %}
                </p>
                <button type="button" class="btn btn-outline-primary btn-sm w-100" id="nbx-rd-create-planned-rack-btn">
                  <i class="mdi mdi-plus-thick" aria-hidden="true"></i> {% trans "Create rack" %}
                </button>
              </div>
            </div>

            {# ---- Design racks: per-rack show/hide + remove-from-design ---- #}
            {# Visibility toggles are personal view-state (they POST to            #}
            {# hidden-design-racks and toggle the .hidden class on the matching     #}
            {# rack block — no reload, never marks the layout dirty). "All" reveals  #}
            {# every block. The trash control removes the rack from design.racks    #}
            {# (destructive; confirms via the remove-rack 409 flow).               #}
            <div class="card" id="nbx-rd-design-racks-card" data-rd-design-racks>
              <div class="card-header">
                <h3 class="card-title">{% trans "Design racks" %}</h3>
                <div class="card-actions">
                  <button type="button" class="btn btn-ghost-secondary btn-sm"
                          id="nbx-rd-show-all-racks" title="{% trans 'Show all racks' %}">
                    {% trans "All" %}
                  </button>
                </div>
              </div>
              <div class="list-group list-group-flush nbx-rd-design-racks-list" id="nbx-rd-design-racks-list">
                {% for row in scoped_rack_rows %}
                <div class="list-group-item nbx-rd-design-rack-row{% if row.hidden %} is-hidden{% endif %}"
                     data-rd-rack-row="{{ row.key|rack_dom_id }}"{% if row.planned %} data-rd-rack-planned="1"{% endif %}>
                  {# One eye for every rack, planned ones too; the id is the #}
                  {# block's data-rack-id (bare pk, or p-<pk> when planned). #}
                  <button type="button"
                          class="nbx-rd-visi-toggle"
                          data-rd-visi-toggle="{{ row.key|rack_dom_id }}"
                          aria-pressed="{{ row.hidden|yesno:'false,true' }}"
                          title="{% trans 'Toggle visibility' %}"
                          aria-label="{% trans 'Toggle visibility' %}">
                    <i class="mdi {% if row.hidden %}mdi-eye-off-outline{% else %}mdi-eye-outline{% endif %}" aria-hidden="true"></i>
                  </button>
                  <span class="nbx-rd-design-rack-name">
                    {{ row.rack.name }}
                    {% if row.planned %}<span class="badge text-bg-warning ms-1">{% trans "Planned" %}</span>{% endif %}
                    {% if row.rack.location %}<span class="text-muted small">· {{ row.rack.location }}</span>{% endif %}
                  </span>
                  <button type="button"
                          class="nbx-rd-design-rack-remove"
                          data-rd-remove-rack="{{ row.key }}"
                          data-rack-name="{{ row.rack.name }}"
                          title="{% trans 'Remove from design' %}"
                          aria-label="{% trans 'Remove from design' %}">
                    <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i>
                  </button>
                </div>
                {% empty %}
                <div class="list-group-item text-muted small">{% trans "No racks in this design yet." %}</div>
                {% endfor %}
              </div>
            </div>
          </div>{# /section: racks #}
          {% endblock rd_scope_panel %}

          {# ===== Section: Favorites (quick access) ===== #}
          <div class="nbx-rd-drawer-section" data-rd-section="favorites">
            {# ---- Quick access: per-user favorites, drag a row onto a face. ---- #}
            {# Lives in the drawer alongside the catalog; favorites list scrolls   #}
            {# internally. Independent of the catalog search + manufacturer filter; #}
            {# drag a row onto a face to plan an add, click its filled star to     #}
            {# unpin. ---- #}
            <div class="card nbx-rd-quick-card" id="nbx-rd-quick" data-rd-quick>
              <div class="card-header">
                {# Two deliberate rows: the title, then the set controls. The #}
                {# drawer column is 300px, so squeezing both onto one line left #}
                {# the title and the set name as ellipses -- and it was the     #}
                {# title WRAPPING that wasted the space in the first place.     #}
                <h3 class="card-title nbx-rd-quick-title">
                  <i class="mdi mdi-star" aria-hidden="true"></i>
                  <span>{% trans "Quick access" %}</span>
                </h3>
                {# Named favorite SETS: one starred list per way of working    #}
                {# ("Default", "for server", "for network"). The select drives #}
                {# which set the stars read and write; the buttons create,     #}
                {# rename and delete the user's own sets. Populated by         #}
                {# editor.js from the favorite-sets endpoint. #}
                <div class="card-actions nbx-rd-favset-controls">
                  {# `no-ts` opts out of NetBox's TomSelect enhancement: the #}
                  {# options are (re)built by editor.js after every set change, #}
                  {# which a TomSelect wrapper would not pick up. #}
                  <select class="form-select form-select-sm no-ts nbx-rd-favset-select"
                          id="nbx-rd-favset-select"
                          aria-label="{% trans 'Favorite set' %}"
                          title="{% trans 'Favorite set' %}"></select>
                  <button type="button" class="btn btn-ghost-secondary btn-sm nbx-rd-favset-btn"
                          id="nbx-rd-favset-new" title="{% trans 'New favorite set' %}"
                          aria-label="{% trans 'New favorite set' %}">
                    <i class="mdi mdi-plus-thick" aria-hidden="true"></i>
                  </button>
                  <button type="button" class="btn btn-ghost-secondary btn-sm nbx-rd-favset-btn"
                          id="nbx-rd-favset-rename" title="{% trans 'Rename this set' %}"
                          aria-label="{% trans 'Rename this set' %}">
                    <i class="mdi mdi-pencil" aria-hidden="true"></i>
                  </button>
                  <button type="button" class="btn btn-ghost-danger btn-sm nbx-rd-favset-btn"
                          id="nbx-rd-favset-delete" title="{% trans 'Delete this set' %}"
                          aria-label="{% trans 'Delete this set' %}">
                    <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i>
                  </button>
                </div>
              </div>
              {# This list scrolls if many favorites; populated by editor.js. #}
              <div class="list-group list-group-flush nbx-rd-quick-list" id="nbx-rd-quick-list"></div>
            </div>
          </div>{# /section: favorites #}

          {# ===== Section: Templates (PLAN-templates.md Sec 3, T3.3) ===== #}
          {# One card per Template/TemplateGroup, fetched from the plugin's #}
          {# own REST API by editor/templates.js (same pattern palette.js    #}
          {# uses for core's device-type catalog). Drag a template card     #}
          {# onto a rack to stamp it there directly; click a template OR a  #}
          {# group card to open the multi-rack / group-mapping dialog.      #}
          {# Nothing is written until the ordinary design-level Save (D19). #}
          <div class="nbx-rd-drawer-section" data-rd-section="templates">
            <div class="card nbx-rd-templates-card" id="nbx-rd-templates" data-rd-templates>
              <div class="card-header">
                <h3 class="card-title">{% trans "Templates" %}</h3>
              </div>
              <div class="card-body nbx-rd-templates-controls">
                <div class="text-muted small mt-1 nbx-rd-templates-hint">
                  <i class="mdi mdi-information-outline" aria-hidden="true"></i>
                  {% blocktrans %}Drag a template onto a rack, or click a template (or a group) to pick target racks.{% endblocktrans %}
                </div>
                <div class="nbx-rd-templates-status text-muted small mt-1" id="nbx-rd-templates-status"></div>
              </div>
              <div class="list-group list-group-flush nbx-rd-templates-list" id="nbx-rd-templates-list"></div>
            </div>
          </div>{# /section: templates #}

          </div>{# /.nbx-rd-drawer #}

          {# ---- Multi-rack workspace: one block per VISIBLE scoped rack, laid #}
          {#      out horizontally in a bounded, scrollable container. It is the  #}
          {#      PRIMARY region: when the drawer is closed it takes the full      #}
          {#      width and sits at the top; the racks scroll sideways (more       #}
          {#      racks) and vertically (full 42U) WITHIN this container so the    #}
          {#      page itself never grows tall. editor.js inits each block         #}
          {#      independently from its own rd-editor-data-<pk> payload. ---- #}
          {% block rd_canvas %}
          <div class="nbx-rd-racks-scroll" id="nbx-rd-racks-scroll">
          {% for b in all_rack_blocks %}
            {% include 'netbox_rack_design/inc/rack_block.html' with b=b editable=True %}
          {% empty %}
            {# Empty state: a design with ZERO scoped racks still opens the editor #}
            {# (no bounce to detail). The button opens the Racks section so the    #}
            {# Add-rack panel is shown and the first rack can be added here.        #}
            <div class="nbx-rd-empty-state text-center text-muted p-5" id="nbx-rd-empty-state">
              <i class="mdi mdi-server-off mdi-48px d-block mb-2" aria-hidden="true"></i>
              <p class="mb-3">{% trans "No racks in this design yet — open Racks → Add rack to start." %}</p>
              <button type="button" class="btn btn-primary" id="nbx-rd-add-first-rack">
                <i class="mdi mdi-plus-thick" aria-hidden="true"></i> {% trans "Add your first rack" %}
              </button>
            </div>
          {% endfor %}
          </div>{# /.nbx-rd-racks-scroll #}
          {% endblock rd_canvas %}
        </div>{# /.nbx-rd-editor-shell #}
      </div>
    </div>
  </div>
</div>

{# Toast container (toasts are appended here by editor.js). #}
<div class="toast-container position-fixed bottom-0 end-0 m-3" id="rd-editor-toasts"></div>
{% endblock content %}

{% block javascript %}
  {{ block.super }}
  {% if rd_debug %}
  {# Developer builds only (DEBUG on, or Django Debug Toolbar installed): let #}
  {# editor.js expose its opt-in drag-lifecycle tracer. This inline (non-defer) #}
  {# script runs at parse time, so the flag is set before the deferred editor.js #}
  {# below reads it. Never rendered on a production deployment. #}
  <script>window.__rdDebugAvailable = true;</script>
  {% endif %}
  <script src="{% static 'netbox_rack_design/js/gridstack-all.js' %}"></script>
  {# ---------------------------------------------------------------------- #}
  {# editor.js is an ES module and imports its submodules by BARE specifier #}
  {# ("rd/model.js"), which this map resolves. The indirection buys the one #}
  {# thing a relative import cannot: the ?v=<asset_version> cache-bust      #}
  {# token. A relative "./editor/model.js" would resolve to an unversioned  #}
  {# URL, so an upgrade could pair a fresh editor.js with a browser-cached  #}
  {# stale model.js -- a broken editor, and a hard refresh the only cure.   #}
  {# The map must precede every module script on the page.                  #}
  <script type="importmap">
  {
    "imports": {
      "rd/model.js": "{% static 'netbox_rack_design/js/editor/model.js' %}?v={{ asset_version }}",
      "rd/trace.js": "{% static 'netbox_rack_design/js/editor/trace.js' %}?v={{ asset_version }}",
      "rd/hovercard.js": "{% static 'netbox_rack_design/js/editor/hovercard.js' %}?v={{ asset_version }}",
      "rd/palette.js": "{% static 'netbox_rack_design/js/editor/palette.js' %}?v={{ asset_version }}",
      "rd/core.js": "{% static 'netbox_rack_design/js/editor/core.js' %}?v={{ asset_version }}",
      "rd/dialogs.js": "{% static 'netbox_rack_design/js/editor/dialogs.js' %}?v={{ asset_version }}",
      "rd/power.js": "{% static 'netbox_rack_design/js/editor/power.js' %}?v={{ asset_version }}",
      "rd/cursor.js": "{% static 'netbox_rack_design/js/editor/cursor.js' %}?v={{ asset_version }}",
      "rd/push.js": "{% static 'netbox_rack_design/js/editor/push.js' %}?v={{ asset_version }}",
      "rd/dirty.js": "{% static 'netbox_rack_design/js/editor/dirty.js' %}?v={{ asset_version }}",
      "rd/frame.js": "{% static 'netbox_rack_design/js/editor/frame.js' %}?v={{ asset_version }}",
      "rd/registry.js": "{% static 'netbox_rack_design/js/editor/registry.js' %}?v={{ asset_version }}",
      "rd/rack.js": "{% static 'netbox_rack_design/js/editor/rack.js' %}?v={{ asset_version }}",
      "rd/templates.js": "{% static 'netbox_rack_design/js/editor/templates.js' %}?v={{ asset_version }}"
    }
  }
  </script>
  {# Module scripts are deferred implicitly and still execute in document    #}
  {# order alongside the defer'd classic scripts below, so editor.js keeps   #}
  {# publishing window.NbxRdEditor before its consumers run.                #}
  <script type="module" src="{% static 'netbox_rack_design/js/editor.js' %}?v={{ asset_version }}"></script>
  <script src="{% static 'netbox_rack_design/js/editor_panels.js' %}?v={{ asset_version }}" defer></script>
  <script src="{% static 'netbox_rack_design/js/legend_filter.js' %}?v={{ asset_version }}" defer></script>
  <script src="{% static 'netbox_rack_design/js/power_heatmap.js' %}?v={{ asset_version }}" defer></script>
  <script src="{% static 'netbox_rack_design/js/rack_layout.js' %}?v={{ asset_version }}" defer></script>
{% endblock javascript %}