{#
  Status pill with HTMX polling while the scan is in flight. Once the
  endpoint responds with a terminal state (completed / failed) the
  hx-trigger attribute is absent and polling self-terminates.
#}
{% set status = scan.status.value %}
<span
  id="scan-status"
  {% if status == "running" or status == "pending" %}
    hx-get="/ui/scans/{{ scan.id }}/status"
    hx-trigger="every 3s"
    hx-swap="outerHTML"
  {% endif %}
  class="inline-flex items-center gap-2 rounded-full px-3 py-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.16em] ring-1 ring-inset
    {% if status == 'completed' %}bg-emerald-500/10 text-emerald-400 ring-emerald-500/30
    {% elif status == 'failed' %}bg-blood-500/10 text-blood-400 ring-blood-500/30
    {% elif status == 'running' %}bg-brand-500/10 text-brand-300 ring-brand-500/30
    {% elif status == 'pending' %}bg-slate-500/10 text-slate-300 ring-slate-500/30
    {% else %}bg-ink-700 text-slate-400 ring-ink-600{% endif %}">
  {% if status in ("pending", "running") %}
    <span class="relative flex h-2 w-2">
      <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-400 opacity-75"></span>
      <span class="relative inline-flex h-2 w-2 rounded-full bg-brand-400"></span>
    </span>
  {% elif status == "completed" %}
    <svg viewBox="0 0 12 12" fill="currentColor" class="h-2 w-2"><circle cx="6" cy="6" r="6"/></svg>
  {% elif status == "failed" %}
    <svg viewBox="0 0 12 12" fill="currentColor" class="h-2 w-2"><circle cx="6" cy="6" r="6"/></svg>
  {% endif %}
  {{ status }}
</span>