{% from "macros.html" import icon, bar_color, job_row, empty_state, pglink with context %}
{% if state in ['failed', 'completed', 'delayed', 'wait'] and jobs %}
<div class="flex items-center gap-2 px-4 py-2 bg-panel2/60 border-b border-line">
  {# Bulk-action bar - shown by JS only when ≥1 row is selected (persists across pages). #}
  <div id="bulk-bar" class="items-center gap-2" style="display: none">
    <span class="text-xs text-muted"><b id="bulk-count" class="text-fg tabular-nums">0</b> selected</span>
    <button type="button" class="btn btn-sm btn-ghost ring-1 ring-line"
            data-js-bulk-clear>clear</button>
    <button id="bulk-delete" class="btn btn-sm btn-danger"
            hx-post="{{ url_for('bulk_remove', name=name).path }}?state={{ state }}&page={{ page }}"
            hx-vals="js:{ids: Matador.bulk.ids()}" hx-target="#queue-panel"
            hx-confirm="Delete selected jobs?" data-loading-disable data-loading-aria-busy>
      {{ icon('trash', 'w-3.5 h-3.5') }} delete</button>
  </div>
  <div class="flex-1"></div>
  {% if state == 'failed' %}
  <button class="btn btn-sm btn-info" hx-post="{{ url_for('retry_all', name=name).path }}"
          hx-confirm="Retry all failed jobs?" data-loading-disable data-loading-aria-busy>
    {{ icon('retry', 'w-3.5 h-3.5') }} retry all</button>
  {% endif %}
  <button class="btn btn-sm btn-danger" hx-post="{{ url_for('clean', name=name).path }}?state={{ state }}"
          hx-confirm="Clean ALL {{ state }} jobs?" data-loading-disable data-loading-aria-busy>
    {{ icon('trash', 'w-3.5 h-3.5') }} clean {{ state }}</button>
</div>

{% endif %}

{# data-view sits ON the grid itself (bulk-select page identity) - no extra
   wrapper: idiomorph relocates id-keyed rows across intermediate divs. #}
<div class="jobs-table" id="jt-{{ name }}-{{ state }}" data-view="{{ name }}:{{ state }}">
  {% if state in ['failed', 'completed', 'delayed', 'wait'] and jobs %}
  {# Header cells mirror the row cells one-per-track; the subgrid aligns them. #}
  <div class="jobs-head border-b border-line bg-panel2/30 text-xs uppercase tracking-wider text-muted select-none">
    <label class="cursor-pointer">
      <input type="checkbox" id="select-all" class="chk" aria-label="Select all jobs on this page" />
    </label>
    <span></span>
    <span data-col="id">id</span>
    <span data-col="name">job</span>
    <span>data</span>
    <span></span>
    {# right-aligned like the numeric values they head #}
    <span class="justify-end" data-col="time">when</span>
    <span class="justify-end" title="attempts">×</span>
    <span></span>
  </div>
  {% endif %}
  {% for j in jobs %}{{ job_row(name, j, state, page) }}
  {% else %}
  <div class="col-span-full">{{ empty_state('inbox', 'No ' ~ state ~ ' jobs' ~ (' - all clear' if state == 'failed' else '')) }}</div>
  {% endfor %}
</div>

{# Live-refresh the list (table + total count + pagination) on any job event, for every
   state. Paused while a row is open by jobs-live.js (progressive: if that JS fails to
   load, the refresh still fires - just without the pause). Morph + stable row ids keep
   it flicker-free; throttle + drop rate-cap it. #}
{# id keyed by view: idiomorph matches by id, so a morph can never recycle this
   node (and its init-time htmx closures) across different queue/state views #}
<div data-jobs-live id="jl-{{ name }}-{{ state }}" class="hidden"
     hx-get="{{ url_for('jobs_fragment', name=name).path }}?state={{ state }}&page={{ page }}"
     hx-trigger="sse:changed throttle:1s" hx-target="#jobs"
     hx-swap="morph:innerHTML" hx-sync="this:drop"></div>

{% if pages > 1 %}
<div class="flex items-center justify-between px-4 py-2.5 border-t border-line text-xs">
  <span class="text-muted">{{ total|comma }} {{ state }} · page {{ page }} of {{ pages }}</span>
  <nav class="flex items-center gap-1" aria-label="pagination">
    {{ pglink(page - 1, icon('chevron', 'w-3.5 h-3.5 rotate-90'), disabled=(page <= 1)) }}
    {% for p in nav %}
      {% if p is none %}<span class="px-1 text-muted">…</span>
      {% else %}{{ pglink(p, p, active=(p == page)) }}{% endif %}
    {% endfor %}
    {{ pglink(page + 1, icon('chevron', 'w-3.5 h-3.5 -rotate-90'), disabled=(page >= pages)) }}
  </nav>
</div>
{% endif %}