{% macro run_row(name, status, oob=false, since=none, elapsed=none) %}
<tr id="run-target-{{ name }}"{% if oob %} hx-swap-oob="true"{% endif %}>
  <td class="mono">{{ name }}</td>
  <td>
    {%- if status == 'Finished' %}<span class="chip ok">Finished</span>
    {%- elif status == 'Failed' %}<span class="chip bad">Failed</span>
    {%- elif status == 'Queued' %}<span class="chip muted">Queued</span>
    {%- else %}<span class="chip running">{{ status }}</span>{% endif %}
  </td>
  <td class="mono run-elapsed">
    {%- if status in ('Finished', 'Failed') %}{{ (elapsed | duration) if elapsed is not none else '—' }}
    {%- elif status != 'Queued' and since is not none %}<span data-elapsed-since="{{ '%.3f'|format(since) }}">0s</span>
    {%- else %}<span class="muted">—</span>{% endif %}
  </td>
</tr>
{% endmacro %}

{# Compose-style row — a faithful reproduction of the CLI's `-x` / --compose-style output
   (src/rosbackup/output/compose.py): "<sym> <name> <status> <elapsed>", only the symbol is
   coloured (✔ green / ✘ red / spinner by phase). Same id as run_row so the SSE feed
   OOB-swaps it in place; app.js animates the braille spinner + ticks the elapsed. #}
{% macro compose_row(name, status, oob=false, since=none, elapsed=none, detail='') %}
{%- set term = status in ('Finished', 'Failed') -%}
{%- set state = 'ok' if status == 'Finished' else ('bad' if status == 'Failed' else ('queued' if status in ('Waiting', 'Queued') else 'running')) -%}
{%- set sym = 'cyan' if status in ('Starting', 'Connecting') else ('blue' if status in ('Getting Info', 'Backing Up') else ('magenta' if status == 'Downloading' else ('dim' if status in ('Waiting', 'Queued') else 'yellow'))) -%}
<div id="run-target-{{ name }}" class="crow crow-{{ state }}"{% if oob %} hx-swap-oob="true"{% endif %}>
  <span class="csym {{ 'csym-ok' if status == 'Finished' else ('csym-bad' if status == 'Failed' else 'csym-' ~ sym) }}"{% if not term %} data-spin{% endif %}>{{ '✔' if status == 'Finished' else ('✘' if status == 'Failed' else '⠋') }}</span>
  <span class="cname">{{ name }}</span>
  <span class="cstatus">{{ status }}</span>
  <span class="cdetail"{% if detail %} title="{{ detail }}"{% endif %}>{{ detail or '' }}</span>
  <span class="celapsed"{% if not term and since is not none %} data-elapsed-since="{{ '%.3f'|format(since) }}"{% endif %}>{{ ('%.1f'|format(elapsed) ~ 's') if elapsed is not none else ('' if term else '0.0s') }}</span>
</div>
{% endmacro %}

{# Compose-style aggregate dashboard for large fleets (mirrors ComposeProgress._render_
   aggregate): progress bar + counts + a window of currently-running rows + a failures tail.
   The whole block OOB-swaps as #compose-agg on each event. #}
{% macro compose_aggregate(stats, oob=false, verb='Backing up') %}
<div id="compose-agg" class="compose-agg"{% if oob %} hx-swap-oob="true"{% endif %}>
<div class="cagg-head">[+] {{ verb }} {{ stats.total }} devices</div>
<div class="cagg-bar"><span class="bar-fill">{{ '█' * stats.filled }}</span><span class="bar-empty">{{ '░' * stats.empty }}</span> {{ stats.done }}/{{ stats.total }} {{ '%4.0f'|format(stats.pct) }}%   <span class="cs-ok">✔ {{ stats.success }}</span>  <span class="{{ 'cs-bad' if stats.failed else 'cs-dim' }}">✘ {{ stats.failed }}</span>  <span class="csym-cyan"><span class="csym" data-spin>⠋</span> {{ stats.running }} running</span>   {{ stats.elapsed_str }}{% if stats.eta_str %} <span class="cs-dim">eta {{ stats.eta_str }}</span>{% endif %}</div>
{%- if stats.active %}
<div class="cagg-sub">Active:</div>
{% for a in stats.active %}<div class="cagg-row"><span class="csym {{ a.cls }}" data-spin>⠋</span><span class="cagg-txt">{{ a.txt }}</span></div>
{% endfor %}
{%- if stats.hidden > 0 %}<div class="cagg-more cs-dim">    … and {{ stats.hidden }} more running</div>{% endif %}
{%- endif %}
{%- if stats.failures %}
<div class="cagg-sub cs-bad">Recent failures:</div>
<div class="cagg-fail cs-bad">    {{ stats.failures | join(', ') }}</div>
{%- endif %}
</div>
{% endmacro %}

{# Compose-style summary block (mirrors ComposeProgress.finish_summary; counts coloured). #}
{% macro compose_summary(summary, size_str='', oob=false) %}
<div id="compose-summary" class="csummary"{% if oob %} hx-swap-oob="true"{% endif %}>
{%- if summary %}
<div class="cs-h">Summary:</div>
<div class="cs-line">Total time: {{ '%.1f'|format(summary.duration_s or 0) }}s</div>
<div class="cs-line">Total size: {{ size_str }}</div>
<div class="cs-line">Success: <span class="cs-ok">{{ summary.success }}</span> | Failed: <span class="{{ 'cs-bad' if summary.failed else 'cs-dim' }}">{{ summary.failed }}</span> | Total: {{ summary.total }}</div>
{%- if summary.failed_targets %}<div class="cs-line cs-fail">Failed devices: {{ summary.failed_targets | join(', ') }}</div>{% endif %}
{%- endif %}
</div>
{% endmacro %}

{% macro run_error(detail, oob=false) %}
<div id="run-error"{% if oob %} hx-swap-oob="true"{% endif %} class="banner banner-warn">Run error: {{ detail }}</div>
{% endmacro %}

{% macro run_summary(summary, oob=false) %}
<div id="run-summary"{% if oob %} hx-swap-oob="true"{% endif %} class="run-summary">
  {%- if summary %}
  <span class="chip {{ 'ok' if summary.failed == 0 else 'bad' }}">{{ summary.success }}/{{ summary.total }} succeeded</span>
  <span class="muted">{{ summary.duration_s | duration }}</span>
  {%- if summary.failed_targets %}<span class="muted">failed: {{ summary.failed_targets | join(', ') }}</span>{% endif %}
  {%- endif %}
</div>
{% endmacro %}