{% extends "base.html" %}
{% block title %}{{ device_id }} — standalone{% endblock %}
{% block content %}
<h1>Device <code>{{ device_id }}</code></h1>
{% if load_diagnostic %}
<div class="notice notice-refused" role="alert">
  <p><strong>Adapter not loaded</strong> — {{ load_diagnostic }}</p>
</div>
{% endif %}
{% if action_error %}
<div class="notice notice-refused" role="alert">
  <p><strong>{{ action_label or "Connect refused" }}</strong> — {{ action_error.code }}: {{ action_error.message }}{% if action_error.adapter %} (device answered {{ action_error.adapter.code }} / {{ action_error.adapter.dispatch_state }}){% endif %}</p>
</div>
{% if action_error.get("reason") in ("binding_absent", "binding_stale") %}
{# The binding refusals offer the way out (#385 §1.4): the scan-and-pick flow. #}
<p><a class="action" href="/">Scan and re-pick the endpoint</a></p>
{% endif %}
{% endif %}
<div class="actions">
  {% if connected %}
  <span class="state state-connected">connected</span>
  <form method="post" action="/devices/{{ device_id }}/disconnect"
        hx-post="/devices/{{ device_id }}/disconnect"
        hx-headers='{"X-CSRF-Token": "{{ csrf_token }}"}'>
    <button type="submit">Disconnect</button>
  </form>
  {% else %}
  <span class="state state-disconnected">disconnected</span>
  <form method="post" action="/devices/{{ device_id }}/connect"
        hx-post="/devices/{{ device_id }}/connect"
        hx-headers='{"X-CSRF-Token": "{{ csrf_token }}"}'>
    <button type="submit">Connect</button>
  </form>
  {% endif %}
</div>
{% if scenarios %}
<section class="panel">
  <h2>Scenario</h2>
  <form method="post" action="/devices/{{ device_id }}/scenario"
        hx-post="/devices/{{ device_id }}/scenario"
        hx-headers='{"X-CSRF-Token": "{{ csrf_token }}"}'>
    <label for="scenario-select">State</label>
    <select id="scenario-select" name="scenario">
      {%- for row in scenarios %}
      <option value="{{ row.id }}"{% if row.id == scenario_current %} selected{% endif %}>{{ row.title }}</option>
      {%- endfor %}
    </select>
    <button type="submit">Switch</button>
  </form>
  <p class="hint">The switch applies to the next connection — a live connection keeps its transport.</p>
</section>
{% endif %}
{% if presets %}
<section class="panel">
  <h2>Presets</h2>
  {# Selection performs no device I/O; the apply form is the write action. #}
  <form method="post" action="/devices/{{ device_id }}/preset-apply"
        hx-post="/devices/{{ device_id }}/preset-apply"
        hx-headers='{"X-CSRF-Token": "{{ csrf_token }}"}'>
    <label for="preset-select">Preset</label>
    <select id="preset-select" name="preset_id">
      {%- for row in presets %}
      <option value="{{ row.id }}">{{ row.title }}</option>
      {%- endfor %}
    </select>
    <button type="submit">Apply preset</button>
  </form>
  <p class="hint">Applying validates the preset, checks the device firmware before any write, then writes and re-reads each setting.</p>
</section>
{% endif %}
{% if has_presentation %}
<section class="panel">
  <h2>Presentation pages</h2>
  <p class="hint">The plugin's declared manifest renders at its own pages; this page keeps the session controls.</p>
  <ul class="page-links">
    {%- for page in pages %}
    <li><a href="/pages/{{ page.id }}">{{ page.title }}</a></li>
    {%- endfor %}
  </ul>
</section>
{% else %}
<section class="panel">
  <h2>Readings</h2>
  <p class="hint">Declared parameters:
    {%- for parameter in parameters %} {{ parameter.name }}{% if parameter.unit %} ({{ parameter.unit }}){% endif %}{{ "," if not loop.last }}{% endfor %}
  </p>
  <div id="readings"
       hx-get="/devices/{{ device_id }}/readings"
       hx-trigger="every 2s"
       hx-swap="innerHTML">
    {% include "readings.html" %}
  </div>
</section>
{% endif %}
{% endblock %}