{% 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 %}
        <div class="card-actions">
          {# Chassis elevation: offered on the same has-bays test the editor uses, #}
          {# and to EVERYONE -- reading what sits in a bay needs no permission.    #}
          {% if has_chassis_in_scope %}
          <a href="{% url 'plugins:netbox_rack_design:design_chassis_elevation' pk=object.pk %}"
             class="btn btn-outline-secondary btn-sm me-2"
             title="{% trans 'Show the chassis bays' %}">
            <i class="mdi mdi-view-grid-outline" aria-hidden="true"></i> {% trans "Chassis" %}
          </a>
          {% endif %}
          {% if perms.netbox_rack_design.change_design %}
          <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>
          {% endif %}
        </div>
      </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) — and #}
        {# the power-heatmap toggle, on ONE row: the heatmap is a pure view      #}
        {# layer (docs/power-projection-spec.md §3), so it belongs here just as  #}
        {# much as in the editor. power_heatmap.js needs nothing editable: it    #}
        {# reads each tile's own data-draw-w and, with no editor present, simply #}
        {# renders the static server distribution without live recompute.       #}
        <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>
          </div>
          <div class="vr nbx-rd-toolbar-sep d-none d-md-block" aria-hidden="true"></div>
          <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>
          <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>

        {% 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>
  {# Same toggle as the editor's. It shares the nbxRdPowerHeatmap localStorage #}
  {# preference, so on/off carries between the elevation and the editor.       #}
  <script src="{% static 'netbox_rack_design/js/power_heatmap.js' %}?v={{ asset_version }}" defer></script>
{% endblock javascript %}