{% extends "mirrorwall/base.html" %}
{% block title %}Queue — LoadCoach{% endblock %}
{% block content %}
<h2>Queue</h2>
<div class="filter-bar" aria-label="Queue controls">
  <form method="post" action="/queue/pause">
    <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token }}">
    <button type="submit" data-variant="secondary"{% if report.flags.paused %} disabled aria-disabled="true"{% endif %}>Pause dispatch</button>
  </form>
  <form method="post" action="/queue/resume">
    <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token }}">
    <button type="submit" data-variant="primary"{% if not report.flags.paused and not report.flags.draining %} disabled aria-disabled="true"{% endif %}>Resume dispatch</button>
  </form>
  <form method="post" action="/queue/drain">
    <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token }}">
    <button type="submit" data-variant="secondary"{% if report.flags.draining %} disabled aria-disabled="true"{% endif %}>Drain for shutdown</button>
  </form>
  <span class="muted" id="queue-live-status" role="status" aria-live="polite">connecting…</span>
</div>
<p class="muted">Pause stops claiming without dropping jobs; drain finishes in-flight work and claims nothing new; resume clears both. Each takes effect on the scheduler's next tick, and the page updates without a reload while the stream is connected.</p>

<div id="queue-live" data-stream-url="/api/v1/queue/stream" aria-live="polite">
{% include "queue/_live.html" %}
</div>
{% endblock %}
{% block scripts %}
<script src="{{ 'js/sse.js' | asset_url }}" defer></script>
<script>
  // Progressive enhancement (ADR-0020): the page above is complete and static; this swaps in
  // each full-state frame the server renders. A frame is the whole live region, never a diff, so
  // a reconnect after any gap is correct after its first frame.
  document.addEventListener("DOMContentLoaded", function () {
    var live = document.getElementById("queue-live");
    var status = document.getElementById("queue-live-status");
    if (!live || !window.mirrorwallSse) { if (status) { status.textContent = "static"; } return; }
    var handle = window.mirrorwallSse.connect(live.getAttribute("data-stream-url"), {
      "queue.status": function (payload) {
        if (payload && typeof payload.html === "string") { live.innerHTML = payload.html; }
        if (status) { status.textContent = "live · update " + payload.sequence; }
      }
    });
    if (!handle) { if (status) { status.textContent = "static"; } return; }
    handle.source.addEventListener("open", function () { if (status && status.textContent === "connecting…") { status.textContent = "live"; } });
    handle.source.addEventListener("error", function () { if (status) { status.textContent = "reconnecting…"; } });
  });
</script>
{% endblock %}