{# ---- Heroicons (outline, MIT) as inline SVG — no build step needed ---- #}
{% macro icon(name, cls="w-4 h-4") -%}
<svg class="{{ cls }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
     aria-hidden="true">
{%- if name == 'pause' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5"/>
{%- elif name == 'play' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348c.777.427.777 1.541 0 1.967l-11.54 6.347a1.125 1.125 0 0 1-1.667-.985V5.653Z"/>
{%- elif name == 'retry' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992V4.356m-.002 4.99-3.181-3.182a8.25 8.25 0 0 0-13.803 3.7M4.031 9.865H.039m3.992 0V14.85m0 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7"/>
{%- elif name == 'trash' -%}<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397M4.772 5.79c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0V4.875c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201V5.23"/>
{%- elif name == 'promote' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/>
{%- elif name == 'bolt' -%}<path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/>
{%- elif name == 'sun' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/>
{%- elif name == 'moon' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"/>
{%- elif name == 'db' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125m16.5 0v3.75c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125v-3.75"/>
{%- elif name == 'users' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/>
{%- elif name == 'pulse' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941"/>
{%- elif name == 'key' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"/>
{%- elif name == 'clock' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
{%- elif name == 'warn' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/>
{%- elif name == 'chevron' -%}<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
{%- elif name == 'search' -%}<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
{%- elif name == 'inbox' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z"/>
{%- elif name == 'server' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"/>
{%- elif name == 'queue' -%}<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/>
{%- endif -%}
</svg>
{%- endmacro %}

{# One job as a native <details> accordion row. `state` keys the per-row actions
   (use the job's own state for search results that span states). #}
{% macro job_row(name, j, state, page=1) -%}
<details id="jrow-{{ state }}-{{ j.id }}" class="acc-item border-b border-line"
         hx-get="{{ url_for('job_detail', name=name, job_id=j.id).path }}"
         hx-target="#body-{{ state }}-{{ j.id }}" hx-trigger="toggle once">
  <summary class="flex items-center hover:bg-panel2/30 transition-colors cursor-pointer
                  list-none [&::-webkit-details-marker]:hidden">
    <label class="pl-3 flex items-center shrink-0" onclick="event.stopPropagation()">
      <input type="checkbox" class="jcheck chk" value="{{ j.id }}"
             aria-label="Select job {{ j.id }}" />
    </label>
    <div class="flex-1 flex items-center gap-3 px-4 py-2.5 min-w-0">
      <span class="chevron text-muted shrink-0">{{ icon('chevron', 'w-4 h-4') }}</span>
      <span class="font-mono text-muted shrink-0 whitespace-nowrap pr-2">#{{ j.id }}</span>
      <span class="font-medium w-28 truncate shrink-0">{{ j.name }}</span>
      <span class="font-mono text-muted text-xs flex-1 truncate min-w-0">{{ j.data|tojson }}</span>
      {% if j.progress is number %}
      <span class="w-28 shrink-0 hidden md:flex items-center gap-1.5">
        <span class="flex-1 h-1.5 rounded-full bg-panel2 overflow-hidden">
          <span class="block h-full {{ bar_color(j.state) }} rounded-full transition-[width] duration-300" style="width: {{ j.progress }}%"></span>
        </span>
        <span class="text-xs text-muted tabular-nums w-7 text-right">{{ j.progress }}%</span>
      </span>
      {% endif %}
      <span class="text-xs text-muted tabular-nums w-9 text-right shrink-0">{{ j.attempts_made }}×</span>
    </div>
    <div class="px-3 flex gap-1.5 shrink-0" onclick="event.stopPropagation()">
      {% if state == 'delayed' %}
      <button class="btn btn-sm btn-success tip" aria-label="Promote — run now"
              hx-post="{{ url_for('promote', name=name, job_id=j.id).path }}?page={{ page }}"
              hx-target="#queue-panel" data-loading-disable data-loading-aria-busy>{{ icon('promote', 'w-3.5 h-3.5') }}</button>
      {% endif %}
      {% if state == 'failed' %}
      <button class="btn btn-sm btn-info tip" aria-label="Retry this job"
              hx-post="{{ url_for('retry', name=name, job_id=j.id).path }}?state={{ state }}&page={{ page }}"
              hx-target="#queue-panel" data-loading-disable data-loading-aria-busy>{{ icon('retry', 'w-3.5 h-3.5') }}</button>
      {% endif %}
      <button class="btn btn-sm btn-danger tip" aria-label="Remove this job"
              hx-delete="{{ url_for('remove', name=name, job_id=j.id).path }}?state={{ state }}&page={{ page }}"
              hx-target="#queue-panel" hx-confirm="Remove job #{{ j.id }}?"
              data-loading-disable data-loading-aria-busy>
        {{ icon('trash', 'w-3.5 h-3.5') }}</button>
    </div>
  </summary>
  <div class="acc-body" id="body-{{ state }}-{{ j.id }}"></div>
</details>
{%- endmacro %}

{# state -> semantic status token (one token per state; see styles/input.css) #}
{% macro state_token(s) -%}
{%- if s == 'active' -%}info
{%- elif s == 'completed' -%}success
{%- elif s == 'failed' -%}danger
{%- elif s == 'delayed' -%}warning
{%- else -%}muted
{%- endif -%}
{%- endmacro %}

{# state -> solid progress-bar color #}
{% macro bar_color(s) -%}bg-{{ state_token(s) }}{%- endmacro %}

{# state -> pill colors (one token, three fixed intensities; both themes) #}
{% macro state_color(s) -%}
{%- set c = state_token(s) -%}text-{{ c }} bg-{{ c }}/10 ring-{{ c }}/30
{%- endmacro %}

{# A clickable job-id chip → the standalone job page. Import `with context` (url_for). #}
{% macro job_chip(queue, jid) -%}
{% set href = url_for('job_page', name=queue, job_id=jid).path %}
<a href="{{ href }}" hx-get="{{ href }}" hx-target="#queue-panel" hx-push-url="true"
   title="View job #{{ jid }}"
   class="px-1.5 py-0.5 rounded-md bg-info/10 text-info text-xs font-mono hover:bg-info/20">#{{ jid }}</a>
{%- endmacro %}