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

{# Read-only projected rack elevation, rendered with GridStack (staticGrid). #}
{# Consumes the projection.project_rack contract: design, rack, front, rear,  #}
{# non_racked, face. Front/Rear toggle is client-side; the tray below lists   #}
{# position-less placements. State tints come from rack_design.css.           #}

{% 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' %}">
{% endblock head %}

{% block content %}
<div class="row mb-3">
  <div class="col col-md-12">
    <div class="card">
      <h2 class="card-header">
        {% blocktrans with rack=rack.name design=design.title %}Projected elevation: {{ rack }} ({{ design }}){% endblocktrans %}
        <div class="card-actions">
          <div class="btn-group btn-group-sm" role="group" aria-label="{% trans 'Face' %}">
            <button type="button" class="btn btn-outline-primary{% if face != 'rear' %} active{% endif %}"
                    id="nbx-rd-show-front">{% trans "Front" %}</button>
            <button type="button" class="btn btn-outline-primary{% if face == 'rear' %} active{% endif %}"
                    id="nbx-rd-show-rear">{% trans "Rear" %}</button>
          </div>
          {% if perms.netbox_rack_design.change_design %}
          <a href="{% url 'plugins:netbox_rack_design:design_editor' pk=design.pk rack_id=rack.pk %}"
             class="btn btn-sm btn-warning">
            <i class="mdi mdi-pencil" aria-hidden="true"></i> {% trans "Edit layout" %}
          </a>
          {% endif %}
        </div>
      </h2>

      <div class="card-body">
        {% include 'netbox_rack_design/inc/elevation_grid.html' %}
      </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' %}" defer></script>
  <script type="text/javascript">
    (function () {
      var front = document.getElementById('nbx-rd-face-front');
      var rear = document.getElementById('nbx-rd-face-rear');
      var btnFront = document.getElementById('nbx-rd-show-front');
      var btnRear = document.getElementById('nbx-rd-show-rear');
      function show(faceFront) {
        if (front) { front.style.display = faceFront ? '' : 'none'; }
        if (rear) { rear.style.display = faceFront ? 'none' : ''; }
        if (btnFront) { btnFront.classList.toggle('active', faceFront); }
        if (btnRear) { btnRear.classList.toggle('active', !faceFront); }
      }
      if (btnFront) { btnFront.addEventListener('click', function () { show(true); }); }
      if (btnRear) { btnRear.addEventListener('click', function () { show(false); }); }
    })();
  </script>
{% endblock javascript %}