{% extends 'generic/object.html' %}
{% load lens %}

{% block head %}
  {{ block.super }}
  <link rel="stylesheet" href="{% lens_static 'netbox_spatial_lens/lens.css' %}">
  {% include 'netbox_spatial_lens/inc/palette.html' %}
  {% comment %}
  In the head, before any module script: a browser resolves bare specifiers such as `three`
  only through an import map it has read before the first module loads.
  {% endcomment %}
  {% lens_import_map three_imports %}
{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-8">
    <div class="card">
      <div class="card-body">

        <div class="lens-toolbar">
          {% include 'netbox_spatial_lens/inc/levels.html' with site=object.site floor=floor rack=object %}
          <div class="btn-group btn-group-sm" role="group" aria-label="Colour the devices by">
            {% for o in device_overlays %}
              <a href="?colour={{ o.name }}"
                 class="btn btn-outline-primary{% if device_overlay and o.name == device_overlay.name %} active{% endif %}"
                 {% if device_overlay and o.name == device_overlay.name %}aria-current="true"{% endif %}
                 title="{{ o.description }}">{{ o.label }}</a>
            {% endfor %}
          </div>
          {% if elevation.devices %}
            {% comment %}
            The same control the floor has, over the same problem. Reading a name off a 48U
            cabinet by eye is what a room of fifty cabinets is at the other zoom. Dims the rest
            rather than hiding it, so a device keeps its place in the rack.
            {% endcomment %}
            <span class="lens-toolbar__spacer"></span>
            {% if device_tags %}
              {% include 'netbox_spatial_lens/inc/finder.html' with group='device-tags' key='tags' noun='tag' label='Tags' icon='tag-outline' rows=device_tags row_template='netbox_spatial_lens/inc/finder_tag.html' %}
            {% endif %}
            {% include 'netbox_spatial_lens/inc/field_finders.html' %}
            <label class="lens-find">
              <i class="mdi mdi-magnify" aria-hidden="true"></i>
              <input type="search" data-lens-find placeholder="Name or asset tag" aria-label="Find a device or asset tag"
                     autocomplete="off" spellcheck="false">
            </label>
          {% else %}
            <span class="lens-toolbar__spacer"></span>
          {% endif %}
          {% include 'netbox_spatial_lens/inc/help.html' with text='Drag to turn the rack, right-drag to move it, scroll to zoom. Click a device to show what it is cabled to. Double-click a device to open it. Click a cable to trace it. The find box matches a name or an asset tag; Tags narrows to the devices with any tag you tick. Click legend bands to filter; you can pick several. Escape clears.' %}
        </div>

        {% comment %}
        The four figures somebody walks up to a rack with. They were all on the page already,
        spread between a line of muted text, a badge halfway down a card, and a panel you had
        to select a device to open, which meant a reader wanting to know whether this cabinet
        had room left with none of them.
        {% endcomment %}
        {% include 'netbox_spatial_lens/inc/stats.html' with stats=stats %}

        {% comment %}
        One renderer: a Three.js scene, drawn by rack3d.js from the scene at the foot of the
        page. The message covers the stage until the rack is drawn, and stays with the reason
        when it cannot be: the drawing is turned off, there is no WebGL, or Three.js could not
        be loaded. The strip above and the column beside work without the drawing.
        {% endcomment %}
        <div class="lens-stage lens-3d" data-lens-3d>
          <div class="lens-3d__canvas" data-lens-3d-canvas></div>

          <div class="lens-3d__controls" data-lens-3d-controls hidden>
            <div class="btn-group btn-group-sm" role="group" aria-label="Look at the rack from">
              <button type="button" class="btn btn-outline-primary" data-lens-view="front">Front</button>
              <button type="button" class="btn btn-outline-primary" data-lens-view="rear">Rear</button>
              <button type="button" class="btn btn-outline-primary" data-lens-view="side">Side</button>
              <button type="button" class="btn btn-outline-primary" data-lens-view="angle">3/4</button>
            </div>
            <div class="btn-group btn-group-sm" role="group" aria-label="Device faces">
              <button type="button" class="btn btn-outline-primary" data-lens-mode="images" aria-pressed="true">Images</button>
              <button type="button" class="btn btn-outline-primary" data-lens-mode="colour" aria-pressed="false">Colour</button>
            </div>
            <div class="btn-group btn-group-sm" role="group" aria-label="Display">
              <button type="button" class="btn btn-outline-primary" data-lens-labels aria-pressed="false" title="Names">
                <i class="mdi mdi-label-outline" aria-hidden="true"></i><span class="visually-hidden">Names</span>
              </button>
              <button type="button" class="btn btn-outline-primary" data-lens-fullscreen title="Full screen">
                <i class="mdi mdi-fullscreen" aria-hidden="true"></i><span class="visually-hidden">Full screen</span>
              </button>
            </div>
          </div>

          <div class="lens-3d__tip" data-lens-3d-tip hidden></div>
          <div class="lens-map-message" data-lens-3d-message role="status">Loading the rack&hellip;</div>
        </div>

      </div>
    </div>
  </div>

  <div class="col col-md-4">
    {% comment %}
    The allocation panel answers "what is left in this rack", and narrows to one device when
    one is selected. Both states are rendered up front and the script switches between them,
    so selecting a device costs no request.
    {% endcomment %}
    {% if device_overlay %}
      <div class="card">
        <h2 class="card-header">{{ device_overlay.label }}</h2>
        <div class="card-body">
          {% include 'netbox_spatial_lens/inc/legend.html' with legend=device_legend reservations=elevation.reservations filter='devices' %}
        </div>
      </div>
    {% endif %}

    <div class="card">
      <h2 class="card-header">
        <span>Port allocation</span>
        <span class="lens-scope" data-lens-scope>whole rack</span>
      </h2>
      <div class="card-body">
        <div class="lens-alloc" data-lens-alloc="rack">
          {% for group in rack_allocation %}
            {% include 'netbox_spatial_lens/inc/alloc_row.html' with group=group %}
          {% empty %}
            <p class="text-muted mb-0">Nothing in this rack has any ports recorded.</p>
          {% endfor %}
        </div>
        {% for m in elevation.devices %}
          <div class="lens-alloc" data-lens-alloc="{{ m.device.pk }}" hidden>
            {% for group in m.port_groups %}
              {% include 'netbox_spatial_lens/inc/alloc_row.html' with group=group %}
            {% empty %}
              <p class="text-muted mb-0">{{ m.label }} has no ports recorded.</p>
            {% endfor %}

            {% if m.power.has_data %}
              {% comment %}
              Power sits with the ports rather than in a card of its own, because "what is in
              this device and what feeds it" is one question asked at one moment: when you
              click the device.
              {% endcomment %}
              <div class="lens-power">
                <div class="lens-power__head">
                  <span>Power</span>
                  <span class="text-muted">
                    {{ m.power.allocated_watts|floatformat:0 }} W allocated
                    {% if m.power.maximum_watts %}of {{ m.power.maximum_watts|floatformat:0 }} W{% endif %}
                  </span>
                </div>
                {% for supply in m.power.feeds %}
                  <div class="lens-power__row">
                    <span class="lens-power__port">{{ supply.port }}</span>
                    <i class="mdi mdi-arrow-right text-muted"></i>
                    <span>
                      {% if supply.outlet %}{{ supply.outlet }}{% endif %}
                      {% if supply.feed %}<span class="badge text-bg-secondary">{{ supply.feed }}</span>{% endif %}
                    </span>
                  </div>
                {% endfor %}
                {% if m.power.unconnected %}
                  <div class="lens-power__row text-muted">
                    {{ m.power.unconnected }} power port{{ m.power.unconnected|pluralize }} not cabled
                  </div>
                {% endif %}
              </div>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>

    {% for band in elevation.reservations %}
      {% comment %}
      One panel per reservation, rendered up front and shown when its band is selected, the
      same pattern as the port allocation and the per-device cabling. Reserved space is the
      one thing a rack drawing can be wrong about in a way that costs money, so what it says
      and who claimed it should be one click away rather than three.
      {% endcomment %}
      <div class="card" data-lens-reservation="{{ band.reservation.pk }}" hidden>
        <h2 class="card-header">
          <span>{{ band.label }}</span>
          <span class="lens-scope">
            <a href="{{ band.reservation.get_absolute_url }}">Open reservation</a>
          </span>
        </h2>
        <table class="table table-hover attr-table">
          {% if band.reservation.description %}
            <tr><th scope="row">Description</th><td>{{ band.reservation.description }}</td></tr>
          {% endif %}
          <tr><th scope="row">Units</th><td>{{ band.reservation.units|join:", " }}</td></tr>
          <tr><th scope="row">Status</th><td>{{ band.reservation.get_status_display }}</td></tr>
          <tr><th scope="row">Reserved by</th><td>{{ band.reservation.user|placeholder }}</td></tr>
          <tr><th scope="row">Tenant</th><td>{{ band.reservation.tenant|linkify|placeholder }}</td></tr>
          {% if band.reservation.comments %}
            <tr><th scope="row">Comments</th><td>{{ band.reservation.comments }}</td></tr>
          {% endif %}
        </table>
      </div>
    {% endfor %}

    <div class="card lens-trace-card" data-lens-trace-card hidden>
      <h2 class="card-header">
        <span>Path</span>
        <span class="lens-scope" data-lens-trace-summary></span>
      </h2>
      <div class="card-body">
        <div data-lens-trace></div>
      </div>
    </div>

    <div class="card">
      <h2 class="card-header">
        <span>Cabling</span>
        <span class="badge text-bg-secondary ms-2"
              data-lens-cable-count="{{ elevation.runs|length }}">{{ elevation.runs|length }}</span>
      </h2>
      <div class="card-body lens-cables">
        {% comment %}
        Two ways to narrow the same list, and they compose. The legend answers "which kind of
        cable"; the finder answers "which of these exactly", which a rack of thirty-six rows
        needs as much as the map's site list did. Both are the shared controls, so a band and a
        tick narrow the drawing and this list without either knowing about the other.
        {% endcomment %}
        {% if elevation.runs %}
          <div class="lens-cables__controls">
            {% include 'netbox_spatial_lens/inc/finder.html' with group='cables' key='cableId' noun='cable' label='Find a cable' icon='cable-data' rows=elevation.runs row_template='netbox_spatial_lens/inc/finder_cable.html' %}
          </div>
        {% endif %}

        {% if cable_legend %}
          {% include 'netbox_spatial_lens/inc/legend.html' with legend=cable_legend filter='cables' %}
        {% endif %}

        {% comment %}
        One block per device, plus the rack-wide list. The script shows whichever matches the
        selection, so clicking a device narrows this card to that device rather than leaving
        the whole rack on screen with most of it faded.
        {% endcomment %}
        {% for mounted, runs in runs_by_device %}
          <div data-lens-cabling="{{ mounted.device.pk }}" hidden>
            {% include 'netbox_spatial_lens/inc/device_cabling.html' with device=mounted.device runs=runs %}
          </div>
        {% endfor %}

        {% comment %}
        What the card shows with nothing selected. It used to be every cable in the rack, which
        is fine at thirty-six and is a page nobody can read at four hundred. The cables are in
        the finder above, where they can be searched; this says so rather than leaving a card
        that reads as "no cabling recorded".
        {% endcomment %}
        <div data-lens-cabling="rack">
        {% if elevation.runs %}
          <p class="text-muted small mb-0">
            {{ external_runs|length }} leaving the rack, {{ internal_runs|length }} within it.
          </p>
        {% else %}
          <p class="text-muted mb-0">Nothing in this rack has a cable recorded.</p>
        {% endif %}
        </div>
      </div>
    </div>

    {% if elevation.unplaced %}
      <div class="card">
        <h2 class="card-header">In the rack, no U recorded</h2>
        <div class="card-body">
          {% comment %}
          Stated rather than hidden. A device with no position cannot be drawn, and silently
          leaving it out makes the elevation disagree with the rack's own device count.
          {% endcomment %}
          {% for device in elevation.unplaced %}
            <div>{{ device|linkify }} <span class="text-muted small">{{ device.device_type }}</span></div>
          {% endfor %}
        </div>
      </div>
    {% endif %}
  </div>
</div>

<script type="application/json" id="lens-rack-config">
  {"traceUrl": "{% url 'plugins:netbox_spatial_lens:trace' termination_type='APP.MODEL' termination_id=0 %}"}
</script>
{{ rack3d_config|json_script:"lens-rack3d-config" }}
<script src="{% lens_static 'netbox_spatial_lens/state.js' %}" defer></script>
<script src="{% lens_static 'netbox_spatial_lens/legend.js' %}" defer></script>
<script src="{% lens_static 'netbox_spatial_lens/finder.js' %}" defer></script>
<script src="{% lens_static 'netbox_spatial_lens/rack_panel.js' %}" defer></script>
<script type="module" src="{% lens_static 'netbox_spatial_lens/rack3d.js' %}"></script>
{% endblock %}