{% extends "base.html" %}
{% block title %}{{ page.title }} — {{ plugin.package }}{% endblock %}
{% block content %}
<section class="panel bw-page" id="page-{{ page.id }}"
         data-bw-page-id="{{ page.id }}"
         data-bw-page-kind="{{ page.kind }}">
  <h1>{{ page.title }}</h1>
  {# The live state (severity badge, tiles, refused notices, plots) lives
     INSIDE the poll region: a polling browser swaps only this region, so
     anything outside it freezes at the first render (fold R-a). #}
  {# Waveform first (fold F8, owner directive — issue comment 6127477670):
     a digital analyzer leads with its lane traces, so the declared
     captures render BEFORE the readings region on pages that carry them.
     Pages WITHOUT lanes plots keep the tile-first shape below. #}
  {% if lanes %}
  <section class="bw-lanes-region" id="page-lanes-{{ page.id }}" aria-label="Declared captures">
    {{ lanes }}
  </section>
  {% endif %}
  {# The live state (severity badge, tiles, refused notices, scalar plots)
     lives INSIDE the poll region: a polling browser swaps only this
     region. The lanes figure above sits OUTSIDE it — a poll must not
     wipe viewport state (the page's own controls rule, extended);
     slice 3's zoom/scroll swaps land on that stable wrapper. #}
  <div id="page-readings"
       hx-get="/pages/{{ page.id }}/readings"
       hx-trigger="every 2s"
       hx-swap="innerHTML">
    {% include "page-readings.html" %}
  </div>
  {% if controls %}
  {# Staged changes are HOST state: the inputs render outside the poll
     region (a poll must not wipe an operator's in-flight input), and a
     staged value appears only here — never in a reading tile (§E.3). #}
  <section class="panel bw-controls" aria-label="Staged changes">
    <h2>Staged changes</h2>
    {% if action_error %}
    <div class="notice notice-refused" role="alert">
      <p><strong>{{ action_label or "Apply refused" }}</strong> — {{ action_error.code }}: {{ action_error.message }}{% if action_error.adapter %} (device answered {{ action_error.adapter.code }} / {{ action_error.adapter.dispatch_state }}){% endif %}. Any staged values are retained.</p>
    </div>
    {% endif %}
    <form method="post" action="/pages/{{ page.id }}/stage"
          hx-post="/pages/{{ page.id }}/stage"
          hx-headers='{"X-CSRF-Token": "{{ csrf_token }}"}'>
      {%- for control in controls %}{{ control.input }}{% endfor %}
      <button type="submit">Stage</button>
    </form>
    <form method="post" action="/pages/{{ page.id }}/apply"
          hx-post="/pages/{{ page.id }}/apply"
          hx-headers='{"X-CSRF-Token": "{{ csrf_token }}"}'>
      <button type="submit">Apply staged values</button>
      <p class="hint">Apply writes each staged value, then re-reads the parameter — the page shows the read-back. No lease or policy guards this write.</p>
    </form>
  </section>
  {% endif %}
</section>
{% endblock %}