{% extends 'base/layout.html' %}
{% load static %}
{% load lens %}
{% load helpers %}

{% block title %}World map{% endblock %}

{% block head %}
  {{ block.super }}
  {% comment %}
  NetBox sends `Referrer-Policy: same-origin`, so the browser sends no Referer with a request to
  another origin, and OpenStreetMap's tile servers refuse every tile that arrives without one
  ("Referer is required"). This page alone relaxes it to the page's origin, which is all a tile
  server is told: never the path, the query or anything after the host. Set in the head, before
  the map's worker is started, which takes the policy of the page that starts it.
  {% endcomment %}
  <meta name="referrer" content="strict-origin-when-cross-origin">
  <link rel="stylesheet" href="{% lens_static 'netbox_spatial_lens/lens.css' %}">
  {% include 'netbox_spatial_lens/inc/palette.html' %}
{% endblock %}

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

        <div class="lens-toolbar">
          {% comment %}
          The same control the floor has, over the same kind of choice. The legend under this
          map is also its filter, so the colouring decides what a reader can narrow to: with
          only site group to colour by, "show me everything still planned" could not be asked.
          {% endcomment %}
          <div class="btn-group btn-group-sm" role="group" aria-label="Colour the sites by">
            {% for o in overlays %}
              <a href="?overlay={{ o.name }}"
                 class="btn btn-outline-primary{% if overlay and o.name == overlay.name %} active{% endif %}"
                 {% if overlay and o.name == overlay.name %}aria-current="true"{% endif %}
                 title="{{ o.description }}">{{ o.label }}</a>
            {% endfor %}
          </div>
          <span class="lens-toolbar__spacer"></span>
          {% comment %}
          The lists hang under their own buttons rather than beside the map or below it.

          Beside it they cost a third of the width of the one drawing on the page that wants
          all of it, for reference read once in a while. Below it they were out of the corner
          of the eye you were using, and you lost the map to reach them. Under the button that
          opens them is where a reader looks, and the count stays on the button so the number
          the column was really conveying at a glance survives the panel being shut.

          Each carries a filter, because twenty-eight sites is already too many to read down,
          and ticks, because "these three" is the question you arrive with.
          {% endcomment %}
          {% include 'netbox_spatial_lens/inc/finder.html' with group='sites' key='nodeKey' noun='site' label='Sites' icon='map-marker-outline' rows=world.site_nodes row_template='netbox_spatial_lens/inc/finder_site.html' %}
          {% include 'netbox_spatial_lens/inc/finder.html' with group='circuits' key='linkId' noun='circuit' label='Circuits' icon='transit-connection-variant' rows=world.links row_template='netbox_spatial_lens/inc/finder_circuit.html' empty_text='No circuit has both ends recorded.' %}
          {% comment %}
          Empty until something is selected or a band is picked. The totals are in the stat
          strip and on the two buttons, and a third copy of them here said nothing new.
          {% endcomment %}
          <span class="text-muted lens-scale" data-lens-world-status></span>
          {% include 'netbox_spatial_lens/inc/help.html' with text='Click a site to open it. Click a circuit to highlight it and its two ends. Sites and Circuits find by name and narrow the map to what you tick; tick one to trace it. Click legend bands to filter; you can pick several. Marker size is the rack count. Escape clears.' %}
        </div>

        {% if world.site_nodes %}
          {% include 'netbox_spatial_lens/inc/stats.html' with stats=world.stats %}

          {% comment %}
          One renderer: a MapLibre globe, drawn by world.js from the config at the foot of the
          page. The message covers the map until it is drawn, and stays with the reason when it
          cannot be: no WebGL, or MapLibre could not be loaded. The strip above, the legends and
          the finders work without the map.
          {% endcomment %}
          <div class="lens-stage">
          <div class="lens-map" data-lens-map></div>
          <div class="lens-map-message" data-lens-map-message role="status">Loading the map&hellip;</div>

          {% comment %}
          The legends sit on the drawing they explain rather than in a column beside it. They
          are controls, used constantly, so they stay in view; the lists they used to share a
          column with are not, and have moved behind the toolbar buttons.
          {% endcomment %}
          <div class="lens-map-legends" data-lens-legends>
            <button type="button" class="lens-map-legends__toggle" data-lens-legends-toggle
                    aria-expanded="true" title="Hide the legends">
              <i class="mdi mdi-chevron-up" aria-hidden="true"></i>
            </button>
            <div class="lens-map-legends__body">
              <div class="lens-map-legend">
                <h3 class="lens-map-legend__title">
                  {% if overlay %}{{ overlay.label }}{% else %}Legend{% endif %}
                  <span class="lens-scope">sites</span>
                </h3>
                {% include 'netbox_spatial_lens/inc/legend.html' with legend=world.legend filter='sites' %}
              </div>
              {% if world.providers %}
                <div class="lens-map-legend">
                  <h3 class="lens-map-legend__title">Provider <span class="lens-scope">circuits</span></h3>
                  {% include 'netbox_spatial_lens/inc/legend.html' with legend=world.providers filter='circuits' %}
                </div>
              {% endif %}
            </div>
          </div>
          </div>
        {% else %}
          <div class="lens-empty">
            <p class="mb-1">No site has coordinates recorded, so there is nothing to place.</p>
            <p class="mb-0 small">Set latitude and longitude on a site.</p>
          </div>
        {% endif %}

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

</div>

{% if world.ungeocoded %}
  {% comment %}
  Named, not dropped. A map that quietly omits part of an estate is worse than no map, because
  it reads as complete. Below the map rather than in a finder, because this is the one list you
  are meant to read once and then act on by recording coordinates.
  {% endcomment %}
  <div class="row">
    <div class="col col-12">
      <div class="card">
        <h2 class="card-header">
          <span>No coordinates</span>
          <span class="badge text-bg-secondary ms-2">{{ world.ungeocoded|length }}</span>
        </h2>
        <div class="card-body">
          <div class="lens-ungeocoded">
            {% for site in world.ungeocoded %}<div>{{ site|linkify }}</div>{% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
{% endif %}

{{ map_config|json_script:"lens-map-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/world.js' %}" defer></script>
{% endblock %}