{% extends "base.html" %}
{% import "_run_macros.html" as rm %}
{% import "_macros.html" as m %}
{% block title %}Run #{{ run.id }} (live) — rosbackup-ng{% endblock %}
{% block head %}<script src="/static/htmx-sse.js" defer></script>{% endblock %}
{% block page_title %}Run #{{ run.id }}{% if live %} · live{% endif %}{% if run.dry_run %} · dry-run{% endif %}{% endblock %}
{% block head_actions %}
<a class="btn" href="/runs/{{ run.id }}">Table view</a>
<a class="btn" href="/runs">← History</a>
{% endblock %}
{% block content %}
<section class="card">
  <div class="run-head">
    <div class="run-head-top">
      <span class="run-head-scope">{{ m.scope_link(run.scope_kind, run.scope_value) }}</span>
      {% if run.dry_run %}<span class="chip">dry-run</span>{% endif %}
      {% if run.status == 'running' %}<span class="chip running">running</span>{% endif %}
    </div>
    <div class="run-head-meta">{{ run.trigger }} · started {{ run.started_at | datetime }}</div>
    {% if skipped_offline %}<div class="run-head-meta">⊘ Skipped {{ skipped_offline|length }} device(s) monitored offline: <span class="mono">{{ skipped_offline|join(', ') }}</span></div>{% endif %}
  </div>
  <div id="run-error"></div>

  {% if live %}
  {# Same SSE feed as the table view, rendered as compose-style rows (view=compose) — a
     faithful copy of the CLI's `-x` output. Each event OOB-swaps the matching row in place;
     the run keeps going server-side if this browser disconnects, and reopening re-attaches. #}
  <div hx-ext="sse" sse-connect="/events/runs/{{ run.id }}?view=compose" sse-swap="message"
       sse-close="done" hx-swap="none"></div>
  <div hx-get="/runs/{{ run.id }}/poll" hx-trigger="every 3s" hx-swap="none"></div>
  {% endif %}

  {% set op = run.scope_kind if run.scope_kind in ('upgrade', 'downgrade') else 'backup' %}
  <div class="term">
    {% if aggregate %}
    {%- set _verb = {'upgrade': 'Upgrading', 'downgrade': 'Downgrading'}.get(op, 'Backing up') %}
    {{ rm.compose_aggregate(stats, false, _verb) }}
    {% else %}
    <div class="compose">
      <div class="chead">[+] Executing {{ op }} for {{ rows|length }} device{{ '' if rows|length == 1 else 's' }} ...</div>
      {% for r in rows %}{{ rm.compose_row(r.name, r.status, false, r.since, r.elapsed, r.detail) }}{% endfor %}
    </div>
    {% endif %}
    {% if summary %}{{ rm.compose_summary(summary, size_str) }}{% else %}<div id="compose-summary" class="csummary"></div>{% endif %}
  </div>
</section>
{% endblock %}