{% 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). #}
  <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 %}