{% from "macros.html" import badge, icon, state_color, state_label %}
<div class="p-5">
  <div class="flex items-center justify-between mb-5 gap-3">
    <h1 class="text-lg font-semibold flex items-center gap-2 min-w-0">
      <span class="text-accent shrink-0">{{ icon('queue', 'w-5 h-5') }}</span>
      <span class="truncate">{{ q.name }}</span>
      {% if q.paused %}
      <span class="{{ badge('warning', 'shrink-0') }}">paused</span>
      {% endif %}
    </h1>
    <div class="flex gap-2 items-start shrink-0">
      {% if q.paused %}
      <button class="btn btn-success" hx-post="{{ url_for('resume', name=q.name).path }}?state={{ state }}&page={{ page }}"
              data-loading-disable data-loading-aria-busy>{{ icon('play') }} Resume</button>
      {% else %}
      <button class="btn btn-warning" hx-post="{{ url_for('pause', name=q.name).path }}?state={{ state }}&page={{ page }}"
              data-loading-disable data-loading-aria-busy>{{ icon('pause') }} Pause</button>
      {% endif %}
    </div>
  </div>

  {# Health chips: rendered inline with the panel (no pop-in), then refreshed
     on job events (throttled - the buckets are per-minute, sub-second repaints
     buy nothing) and a slow tick. Targets its OWN id (not "this"): if this region
     ever fires after the panel navigated away, the id is gone and htmx aborts -
     a "this" target would re-root to the inherited #queue-panel and wipe it. #}
  <div id="metrics-live" class="mb-4 min-h-7" hx-get="{{ url_for('queue_metrics', name=q.name).path }}"
       hx-trigger="sse:changed throttle:5s, every 30s"
       hx-target="#metrics-live" hx-swap="innerHTML">{% include "partials/metrics.html" %}</div>

  <div class="flex gap-1 border-b border-line mb-4">
    {% for s in states %}
    <a href="{{ url_for('queue_view', name=q.name).path }}?state={{ s }}"
       hx-get="{{ url_for('queue_view', name=q.name).path }}?state={{ s }}" hx-push-url="true"
       class="relative flex items-center gap-2 px-3 py-2 text-sm font-medium transition-colors {{ 'text-fg' if s == state else 'text-muted hover:text-fg' }}">
      {{ state_label(s) }}
      <span id="tabcount-{{ s }}" title="{{ q.counts[s]|comma }}" class="text-xs font-mono tabular-nums px-1.5 py-0.5 rounded-md {{ state_color(s) }}">{{ q.counts[s]|compact }}</span>
      {% if s == state %}
      <span class="absolute -bottom-px inset-x-2 h-0.5 rounded-full bg-accent"></span>
      {% endif %}
    </a>
    {% endfor %}
  </div>

  {# Flow throughput, active tab only (where in-flight flows live). Self-refreshing
     band (stable wrapper morphs its own inner html on job events). #}
  {% if state == 'active' and fm %}
  <div class="mb-4 min-h-7" id="flow-metrics"
       hx-get="{{ url_for('flow_metrics_fragment', name=q.name).path }}"
       hx-trigger="sse:changed throttle:5s, every 30s"
       hx-target="#flow-metrics" hx-swap="innerHTML">{% include "partials/flow_metrics.html" %}</div>
  {% endif %}

  <div class="relative max-w-sm mb-3">
    <label for="job-search" class="sr-only">Search {{ state_label(state) }} jobs by name, data, or id</label>
    <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted">{{ icon('search', 'w-4 h-4') }}</span>
    <input id="job-search" type="search" name="query" autocomplete="off" value="{{ query|default('') }}"
           placeholder="search {{ state_label(state) }} - name, data, or #id…"
           class="input !pl-9"
           hx-get="{{ url_for('jobs_fragment', name=q.name).path }}?state={{ state }}"
           hx-trigger="input changed delay:300ms, search"
           hx-target="#jobs" hx-indicator="#search-spin">
    <span id="search-spin" class="htmx-indicator absolute right-2.5 top-1/2 -translate-y-1/2 text-muted">
      {{ icon('retry', 'w-3.5 h-3.5 animate-spin') }}</span>
  </div>

  {# Shown by CSS (:has) only while a job row is open - the live table is paused so it
     can't move under you. Tells the operator why updates stopped (and how to resume). #}
  <div class="jobs-paused items-center gap-2 mb-2 px-3 py-1.5 rounded-lg
              bg-warning/10 text-warning text-xs">
    {{ icon('pause', 'w-3.5 h-3.5') }}
    <span>Live updates paused while you're viewing a job - close it to resume.</span>
  </div>

  <div id="jobs" class="card mb-6">
    {% with name = q.name %}
      {% if query %}{% include "partials/search_results.html" %}{% else %}{% include "partials/jobs.html" %}{% endif %}
    {% endwith %}
  </div>

  {% include "partials/names.html" %}

  {# same mt-8 rhythm as the by-name section above, with or without it present #}
  <div id="schedulers" class="mt-8">
    {% with name = q.name, schedulers = q.schedulers %}{% include "partials/schedulers.html" %}{% endwith %}
  </div>
</div>