{% extends "base.html" %}

{#
  The page frame. Everything that changes with a poll is in `_board.html`, which is
  rendered inline here on first load and then replaces itself every 30 seconds.

  The chart shells are here rather than in the fragment on purpose — see the note there.
  The first plate is the lead: it is the metric the operator configured first, given the
  height to be read from across the counter rather than leaned into.
#}

{% block content %}
{% include "_board.html" %}

<section class="plates" aria-label="History">
  {% for chart in charts %}
  <figure class="plate{% if loop.first %} is-lead{% endif %}" data-metric="{{ chart.metric }}">
    <figcaption>{{ chart.metric.replace("_", " ") }}</figcaption>
    <div class="plot"></div>
  </figure>
  {% endfor %}
</section>

{#
  Zone heatmaps. Shells here rather than in the fragment for the same reason the plates
  are: a canvas inside `#board` would be destroyed and repainted every 30 seconds.

  One figure per zone whose config asked for `heatmap`, built from the config rather than
  from the data — a zone nobody has walked through yet renders cold, which is the true
  answer, where omitting the figure would read as "this zone is not being watched".
#}
{% if heatmaps %}
<section class="floors" aria-label="Zone heatmaps">
  {% for scope in heatmaps %}
  <figure class="floor"
          data-camera="{{ scope.camera_id }}"
          data-zone="{{ scope.zone_id }}">
    <figcaption>{{ scope.zone_id }} <span class="floor-camera">{{ scope.camera_id }}</span></figcaption>
    <canvas class="floor-grid" role="img"
            aria-label="Foot-point density for {{ scope.zone_id }}"></canvas>
    <p class="floor-scale">
      <span class="floor-peak">&mdash;</span>
      <span class="floor-note">busiest cell</span>
    </p>
  </figure>
  {% endfor %}
</section>
{% endif %}
{% endblock %}