{% load i18n %}
{% load static %}
{% load rack_design %}

{# ------------------------------------------------------------------------- #}
{# Shared per-rack block: one rack rendered with BOTH its Front and Rear      #}
{# faces side by side, full-depth opposite-face hatch and the hover-card      #}
{# data-* attributes. Used by BOTH the interactive editor                     #}
{# (design_editor.html, editable=True) and the read-only projected elevation  #}
{# (design_elevation.html, editable=False) so the two can never drift apart.  #}
{#                                                                            #}
{# Context:                                                                   #}
{#   b         the per-rack bundle from views._project_rack_bundle:           #}
{#             {rack, front, rear, non_racked, widgets, rack_meta, hidden?}   #}
{#   editable  True  -> editor affordances (drag grids, per-tile × remove,    #}
{#                      embedded widget JSON payload for editor.js).           #}
{#             False -> static, read-only (locked tiles, no remove buttons,   #}
{#                      no JSON payload). View-only Front/Rear toggles + the   #}
{#                      hover card still work.                                 #}
{#                                                                            #}
{# Widget indices (editor only): the page builds `widgets` in the order       #}
{# (*front, *rear, *non_racked); each tile is stamped with its GLOBAL index   #}
{# via gs-id/data-widget-index so editor.js can pair JSON to DOM.             #}
{# ------------------------------------------------------------------------- #}

{% with rack=b.rack front=b.front rear=b.rear non_racked=b.non_racked %}
{% with front_len=front|length rear_len=rear|length %}
{% with rid=rack.pk|stringformat:"s" %}
<div class="nbx-rd-rack-block{% if editable and b.hidden %} hidden{% endif %}"
     id="rd-rack-{{ rack.pk }}"
     data-rack-id="{{ rack.pk }}"
     data-u-height="{{ b.rack_meta.u_height }}"
     data-desc-units="{{ b.rack_meta.desc_units|yesno:'true,false' }}">

  {# ---- Per-rack header: name + site/location + face toggles ---- #}
  <div class="nbx-rd-rack-block-header">
    <div class="nbx-rd-rack-block-title">
      <a href="{{ rack.get_absolute_url }}">{{ rack.name }}</a>
      {% if rack.location %}<span class="text-muted small">· {{ rack.location }}</span>
      {% elif rack.site %}<span class="text-muted small">· {{ rack.site }}</span>{% endif %}
    </div>
    {# Independent on/off toggles per rack: each shows/hides its OWN face. #}
    {# Both start active; the JS refuses to hide the last visible face.    #}
    <div class="btn-group btn-group-sm" role="group" aria-label="{% trans 'Face' %}">
      <button type="button" class="btn btn-outline-primary active"
              aria-pressed="true" data-rd-show-front>{% trans "Front" %}</button>
      <button type="button" class="btn btn-outline-primary active"
              aria-pressed="true" data-rd-show-rear>{% trans "Rear" %}</button>
    </div>
    {# Per-rack power planning input (docs/pdu-distribution-spec.md §6.3): the #}
    {# greenfield planned-power flow (define planned feeds + power_limitation/ #}
    {# pdu_location override, models.DesignRackPower) -- GATED to racks with   #}
    {# NO real PowerFeeds yet. A provisioned rack's PDUs bind straight to its  #}
    {# real feeds via the per-PDU bind-to-feed dialog instead. Editor only.    #}
    {% if editable and not b.has_real_feeds %}
    <button type="button" class="btn btn-outline-warning btn-sm ms-2"
            data-rd-rack-power-btn
            title="{% trans 'Rack power (planning input)' %}"
            aria-label="{% trans 'Rack power' %}">
      <i class="mdi mdi-flash" aria-hidden="true"></i> {% trans "Power" %}
    </button>
    {% endif %}
  </div>

  {# ---- Per-rack power bar (docs/power-projection-spec.md): projected draw #}
  {# vs capacity, always visible in normal mode. ok/warn/critical color.     #}
  {% if b.power %}
  <div class="nbx-rd-power-bar nbx-rd-power-{{ b.power.state }}"
       data-rd-power-draw="{{ b.power.draw_w|floatformat:0 }}"
       data-rd-power-capacity="{{ b.power.capacity_w|floatformat:0 }}"
       data-rd-power-util="{{ b.power.util_pct|floatformat:0 }}"
       data-rd-power-warn="{{ b.power.warn_pct }}"
       data-rd-power-critical="{{ b.power.critical_pct }}"
       {% if b.power.unconnected_count %}data-rd-power-unconnected="{{ b.power.unconnected_devices|join:'|' }}"{% endif %}
       title="{% trans 'Projected power' %}: {{ b.power.draw_w|floatformat:0 }} W / {{ b.power.capacity_w|floatformat:0 }} W ({{ b.power.util_pct|floatformat:0 }}%){% if b.power.unconnected_count %} · {{ b.power.unconnected_count }} {% trans 'device(s) with power ports not connected' %}: {{ b.power.unconnected_devices|join:', ' }}{% endif %}">
    <div class="nbx-rd-power-fill" style="width: {{ b.power.util_pct|floatformat:0 }}%;"></div>
    <span class="nbx-rd-power-label">
      {{ b.power.draw_w|floatformat:0 }} / {{ b.power.capacity_w|floatformat:0 }} W
      · {{ b.power.util_pct|floatformat:0 }}%{% if b.power.unconnected_count %} ⚠ {{ b.power.unconnected_count }}{% endif %}
    </span>
  </div>
  {% endif %}

  {# ---- Per-bank power distribution (docs/pdu-distribution-spec.md): present #}
  {# only in distribution_mode="script". power_heatmap.js reads it to color    #}
  {# PDU banks and tint tiles by feed/bank when the heatmap is on.             #}
  {% if b.power.distribution %}{% with did="rd-distribution-"|add:rid %}{{ b.power.distribution|json_script:did }}{% endwith %}{% endif %}

  {# ---- Rack faces: Front + Rear side by side (independent toggles). ---- #}
  <div class="nbx-rd-faces">
    {# ---- Front face ---- #}
    <div class="text-center nbx-rd-face" data-rd-face="front" id="nbx-rd-face-front-{{ rid }}">
      <h3 class="h5">{% trans "Front" %}</h3>
      <div class="d-flex justify-content-center">
        <ul class="nbx-rd-unit-numbers">
          {% for u in rack.units %}<li>{% if u|rack_whole_unit %}{{ u|floatformat:"0" }}{% endif %}</li>{% endfor %}
        </ul>
        {# Positioning anchor for the displacement stripe bar (spec §3, user #}
        {# ruling 2026-07-09): the bar hangs OUTSIDE the grid's right edge,  #}
        {# absolutely positioned against this wrapper. Created by editor.js  #}
        {# only; the read-only elevation never renders one.                  #}
        <div class="nbx-rd-grid-wrap">
        <div class="grid-stack nbx-rd-rack{% if editable %} nbx-rd-editable{% endif %}"
             id="nbx-rd-grid-front-{{ rid }}"
             data-rack-id="{{ rack.pk }}"
             data-face="front"
             gs-column="1"
             gs-max-row="{{ rack.u_height|mul2 }}"
             gs-min-row="{{ rack.u_height|mul2 }}">
          {% for slot in front %}
            {# A DISPLACED vacating slot (spec §3, ruling 2026-07-09) renders  #}
            {# as the OUTSIDE stripe bar (after the grid, below), never a full #}
            {# tile composited under the occupant. Editable mode keeps the     #}
            {# tile: editor.js collapses it and owns the bar (displaceOne).    #}
            {% if editable or not slot.displaced %}
            <div class="grid-stack-item nbx-rd-state-{{ slot.state }}{% if slot.opposite_face %} nbx-rd-opposite{% endif %}"
                 gs-w="1"
                 gs-h="{{ slot.u_height|mul2 }}"
                 gs-x="0"
                 gs-y="{{ slot|slot_gs_y:rack }}"
                 {% if editable %}gs-id="w-{{ rid }}-{{ forloop.counter0 }}" data-widget-index="{{ forloop.counter0 }}"{% else %}gs-no-move="true" gs-no-resize="true" gs-locked="true"{% endif %}>
              <div class="grid-stack-item-content"
                   {% with bg=slot|slot_color %}{% if bg %}data-role-bg="{{ bg }}" data-role-fg="{{ slot|slot_text_color }}"{% if slot.state == 'existing' and not slot.opposite_face %} style="background-color: #{{ bg }}; color: #{{ slot|slot_text_color }};"{% endif %}{% endif %}{% endwith %}
                   data-name="{{ slot.display_label }}"
                   data-draw-w="{{ slot.draw_w|floatformat:0 }}"
                   data-draw-known="{{ slot.draw_known|yesno:'1,0' }}"
                   {% if slot.power_ports %}data-power="{% for p in slot.power_ports %}{{ p.name }}:{{ p.draw|floatformat:0 }}:{% if p.connected %}1{% elif p.connected == False %}0{% endif %}{% if not forloop.last %}|{% endif %}{% endfor %}"{% endif %}
                   {% with dtn=slot|slot_device_type_name %}{% if dtn %}data-device-type-name="{{ dtn }}"{% endif %}{% endwith %}
                   {% with rn=slot|slot_role_name %}{% if rn %}data-role-name="{{ rn }}"{% endif %}{% endwith %}
                   {% with tn=slot|slot_tenant_name %}{% if tn %}data-tenant-name="{{ tn }}"{% endif %}{% endwith %}
                   {% if slot.state == 'move_in' and slot.device %}data-old-name="{{ slot.device.name }}"{% if slot.device.tenant %} data-old-tenant="{{ slot.device.tenant }}"{% endif %} data-moved-to="{{ rack.name }} · U{{ slot.u_position|floatformat:'0' }}"{% endif %}
                   {% if slot.state == 'move_out_ghost' and slot.placement %}{% if slot.placement.proposed_name %}data-new-name="{{ slot.placement.proposed_name }}"{% endif %}{% if slot.placement.target_rack %} data-moved-to="{{ slot.placement.target_rack.name }}{% if slot.placement.target_position %} · U{{ slot.placement.target_position|floatformat:'0' }}{% else %} · tray{% endif %}"{% endif %}{% endif %}
                   title="{{ slot.display_label }} (U{{ slot.u_position|floatformat:"0" }}, {{ slot.state }})">
                {% if editable and not slot.opposite_face %}<button type="button" class="nbx-rd-remove-btn" title="{% trans 'Flag for removal' %}"
                        aria-label="{% trans 'Flag for removal' %}">&times;</button>{% endif %}
                {% if slot.display_label != slot.label %}<span class="nbx-rd-label nbx-rd-label-hidden">{{ slot.label }}</span><span class="nbx-rd-name-display">{{ slot.display_label }}</span>{% else %}<span class="nbx-rd-label">{{ slot.label }}</span>{% endif %}
              </div>
            </div>
            {% endif %}
          {% endfor %}
        </div>
        {# Read-only displaced treatment (spec §3, ruling 2026-07-09): the    #}
        {# outside stripe bar per displaced slot -- same geometry/CSS as the  #}
        {# editor's makeStripeBar. Editable mode: editor.js owns the bars.    #}
        {% if not editable %}{% for slot in front %}{% if slot.displaced %}
        <div class="nbx-rd-stripe nbx-rd-state-{{ slot.state }}"
             style="top: {{ slot|stripe_top_pct:rack|floatformat:3 }}%; height: {{ slot|stripe_height_pct:rack|floatformat:3 }}%;"
             title="was: {{ slot.label }}"
             data-name="was: {{ slot.label }}"
             {% with dtn=slot|slot_device_type_name %}{% if dtn %}data-device-type-name="{{ dtn }}"{% endif %}{% endwith %}
             {% with rn=slot|slot_role_name %}{% if rn %}data-role-name="{{ rn }}"{% endif %}{% endwith %}
             {% with tn=slot|slot_tenant_name %}{% if tn %}data-tenant-name="{{ tn }}"{% endif %}{% endwith %}></div>
        {% endif %}{% endfor %}{% endif %}
        </div>{# /.nbx-rd-grid-wrap #}
      </div>
    </div>

    {# ---- Rear face ---- #}
    <div class="text-center nbx-rd-face" data-rd-face="rear" id="nbx-rd-face-rear-{{ rid }}">
      <h3 class="h5">{% trans "Rear" %}</h3>
      <div class="d-flex justify-content-center">
        <ul class="nbx-rd-unit-numbers">
          {% for u in rack.units %}<li>{% if u|rack_whole_unit %}{{ u|floatformat:"0" }}{% endif %}</li>{% endfor %}
        </ul>
        {# Stripe-bar anchor, same as the front face above. #}
        <div class="nbx-rd-grid-wrap">
        <div class="grid-stack nbx-rd-rack{% if editable %} nbx-rd-editable{% endif %}"
             id="nbx-rd-grid-rear-{{ rid }}"
             data-rack-id="{{ rack.pk }}"
             data-face="rear"
             gs-column="1"
             gs-max-row="{{ rack.u_height|mul2 }}"
             gs-min-row="{{ rack.u_height|mul2 }}">
          {% for slot in rear %}
            {% if editable or not slot.displaced %}
            <div class="grid-stack-item nbx-rd-state-{{ slot.state }}{% if slot.opposite_face %} nbx-rd-opposite{% endif %}"
                 gs-w="1"
                 gs-h="{{ slot.u_height|mul2 }}"
                 gs-x="0"
                 gs-y="{{ slot|slot_gs_y:rack }}"
                 {% if editable %}gs-id="w-{{ rid }}-{{ forloop.counter0|add:front_len }}" data-widget-index="{{ forloop.counter0|add:front_len }}"{% else %}gs-no-move="true" gs-no-resize="true" gs-locked="true"{% endif %}>
              <div class="grid-stack-item-content"
                   {% with bg=slot|slot_color %}{% if bg %}data-role-bg="{{ bg }}" data-role-fg="{{ slot|slot_text_color }}"{% if slot.state == 'existing' and not slot.opposite_face %} style="background-color: #{{ bg }}; color: #{{ slot|slot_text_color }};"{% endif %}{% endif %}{% endwith %}
                   data-name="{{ slot.display_label }}"
                   data-draw-w="{{ slot.draw_w|floatformat:0 }}"
                   data-draw-known="{{ slot.draw_known|yesno:'1,0' }}"
                   {% if slot.power_ports %}data-power="{% for p in slot.power_ports %}{{ p.name }}:{{ p.draw|floatformat:0 }}:{% if p.connected %}1{% elif p.connected == False %}0{% endif %}{% if not forloop.last %}|{% endif %}{% endfor %}"{% endif %}
                   {% with dtn=slot|slot_device_type_name %}{% if dtn %}data-device-type-name="{{ dtn }}"{% endif %}{% endwith %}
                   {% with rn=slot|slot_role_name %}{% if rn %}data-role-name="{{ rn }}"{% endif %}{% endwith %}
                   {% with tn=slot|slot_tenant_name %}{% if tn %}data-tenant-name="{{ tn }}"{% endif %}{% endwith %}
                   {% if slot.state == 'move_in' and slot.device %}data-old-name="{{ slot.device.name }}"{% if slot.device.tenant %} data-old-tenant="{{ slot.device.tenant }}"{% endif %} data-moved-to="{{ rack.name }} · U{{ slot.u_position|floatformat:'0' }}"{% endif %}
                   {% if slot.state == 'move_out_ghost' and slot.placement %}{% if slot.placement.proposed_name %}data-new-name="{{ slot.placement.proposed_name }}"{% endif %}{% if slot.placement.target_rack %} data-moved-to="{{ slot.placement.target_rack.name }}{% if slot.placement.target_position %} · U{{ slot.placement.target_position|floatformat:'0' }}{% else %} · tray{% endif %}"{% endif %}{% endif %}
                   title="{{ slot.display_label }} (U{{ slot.u_position|floatformat:"0" }}, {{ slot.state }})">
                {% if editable and not slot.opposite_face %}<button type="button" class="nbx-rd-remove-btn" title="{% trans 'Flag for removal' %}"
                        aria-label="{% trans 'Flag for removal' %}">&times;</button>{% endif %}
                {% if slot.display_label != slot.label %}<span class="nbx-rd-label nbx-rd-label-hidden">{{ slot.label }}</span><span class="nbx-rd-name-display">{{ slot.display_label }}</span>{% else %}<span class="nbx-rd-label">{{ slot.label }}</span>{% endif %}
              </div>
            </div>
            {% endif %}
          {% endfor %}
        </div>
        {# Read-only displaced stripe bars, same as the front face above. #}
        {% if not editable %}{% for slot in rear %}{% if slot.displaced %}
        <div class="nbx-rd-stripe nbx-rd-state-{{ slot.state }}"
             style="top: {{ slot|stripe_top_pct:rack|floatformat:3 }}%; height: {{ slot|stripe_height_pct:rack|floatformat:3 }}%;"
             title="was: {{ slot.label }}"
             data-name="was: {{ slot.label }}"
             {% with dtn=slot|slot_device_type_name %}{% if dtn %}data-device-type-name="{{ dtn }}"{% endif %}{% endwith %}
             {% with rn=slot|slot_role_name %}{% if rn %}data-role-name="{{ rn }}"{% endif %}{% endwith %}
             {% with tn=slot|slot_tenant_name %}{% if tn %}data-tenant-name="{{ tn }}"{% endif %}{% endwith %}></div>
        {% endif %}{% endfor %}{% endif %}
        </div>{# /.nbx-rd-grid-wrap #}
      </div>
    </div>
  </div>{# /.nbx-rd-faces #}

  {# ---- Per-rack non-racked tray ---- #}
  {# Editor: always shown as a drop target. Read-only: shown only when there  #}
  {# are non-racked placements (no empty drop affordance in view mode).       #}
  {% if editable or non_racked %}
  <div class="nbx-rd-tray-wrap mt-3">
    <h3 class="h6">{% trans "Non-racked tray" %}</h3>
    <div class="grid-stack nbx-rd-tray"
         id="nbx-rd-grid-tray-{{ rid }}"
         data-rack-id="{{ rack.pk }}"
         data-face=""
         gs-column="1"
         gs-min-row="2">
      {% for slot in non_racked %}
        {# The tray is a LIST (spec §9.2/§9.4), not a grid with meaningful #}
        {# rows: every item gets its own sequential row (index * 2, since   #}
        {# every tray tile is a fixed gs-h="2") so items never overlap and  #}
        {# the container grows to fit -- server-render order first, session #}
        {# drops append after (see editor.js's tray "dropped" handler).     #}
        <div class="grid-stack-item nbx-rd-state-{{ slot.state }}"
             gs-w="1"
             gs-h="2"
             gs-x="0"
             gs-y="{{ forloop.counter0|mul2 }}"
             {% if editable %}gs-id="w-{{ rid }}-{{ forloop.counter0|add:front_len|add:rear_len }}" data-widget-index="{{ forloop.counter0|add:front_len|add:rear_len }}"{% else %}gs-no-move="true" gs-no-resize="true" gs-locked="true"{% endif %}>
          <div class="grid-stack-item-content"
               {% with bg=slot|slot_color %}{% if bg %}data-role-bg="{{ bg }}" data-role-fg="{{ slot|slot_text_color }}"{% endif %}{% endwith %}
               data-name="{{ slot.display_label }}"
               {% with dtn=slot|slot_device_type_name %}{% if dtn %}data-device-type-name="{{ dtn }}"{% endif %}{% endwith %}
               {% with rn=slot|slot_role_name %}{% if rn %}data-role-name="{{ rn }}"{% endif %}{% endwith %}
               {% with tn=slot|slot_tenant_name %}{% if tn %}data-tenant-name="{{ tn }}"{% endif %}{% endwith %}
               {% if slot.state == 'move_in' and slot.device %}data-old-name="{{ slot.device.name }}"{% if slot.device.tenant %} data-old-tenant="{{ slot.device.tenant }}"{% endif %} data-moved-to="{{ rack.name }} · tray"{% endif %}
               title="{{ slot.display_label }} ({{ slot.state }})">
            {% if editable %}<button type="button" class="nbx-rd-remove-btn" title="{% trans 'Flag for removal' %}"
                    aria-label="{% trans 'Flag for removal' %}">&times;</button>{% endif %}
            {% if slot.display_label != slot.label %}<span class="nbx-rd-label nbx-rd-label-hidden">{{ slot.label }}</span><span class="nbx-rd-name-display">{{ slot.display_label }}</span>{% else %}<span class="nbx-rd-label">{{ slot.label }}</span>{% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {# Per-rack editor payload (editor only): one widget per projected slot, #}
  {# keyed by the rack pk so editor.js can hydrate each block independently. #}
  {% if editable %}{% with eid="rd-editor-data-"|add:rid %}{{ b.widgets|json_script:eid }}{% endwith %}{% endif %}

  {# Saved per-(design, rack) power planning override (docs/pdu-distribution- #}
  {# spec.md): lets the rack-power button (editor.js) pre-fill without an     #}
  {# extra fetch. null when nothing has been saved for this rack yet.        #}
  {% if editable %}{% with rpid="rd-rackpower-"|add:rid %}{{ b.rack_power|json_script:rpid }}{% endwith %}{% endif %}
</div>{# /.nbx-rd-rack-block #}
{% endwith %}{% endwith %}{% endwith %}