{% if not connected %}
<div class="panel" id="scan-queue">
  <div class="phead">
    <h2>Live Scan Queue</h2>
  </div>
  <div style="display:flex;align-items:center;gap:9px;color:var(--ink-mute);font-size:12px;padding:8px 0">
    <span style="color:var(--sev-high)">⚡</span> Not connected
  </div>
</div>

{% elif error %}
<div class="panel" id="scan-queue">
  <div class="phead">
    <h2>Live Scan Queue</h2>
  </div>
  <div style="display:flex;align-items:center;gap:9px;color:var(--ink-mute);font-size:12px;padding:8px 0">
    <span style="color:var(--sev-high)">⚠</span> {{ error }}
  </div>
</div>

{% elif queue and queue.groups %}
<div class="panel" id="scan-queue">
  <div class="phead">
    <h2>Live Scan Queue</h2>
    <div style="display:flex;gap:8px;align-items:center">
      <a class="plink" href="/queue">more →</a>
      <span class="pmeta">auto 5m</span>
      <button class="prefresh" id="q-refresh"
              hx-get="/api/queue?force=1"
              hx-target="#scan-queue-container"
              hx-swap="innerHTML"
              onclick="this.classList.add('spin');setTimeout(()=>this.classList.remove('spin'),900)">
        ↻ Refresh
      </button>
    </div>
  </div>
  <div class="q-metrics">
    <div class="q-metric">
      <div class="qv">{{ queue.total_queued }}</div>
      <div class="ql"><span class="mdot" style="background:var(--ink-faint)"></span> Queued</div>
    </div>
    <div class="q-metric">
      <div class="qv" style="color:var(--accent)">{{ queue.total_processing }}</div>
      <div class="ql"><span class="mdot" style="background:var(--accent)"></span> Processing</div>
    </div>
    <div class="q-metric">
      <div class="qv mono">{{ queue.oldest_wait if queue.oldest_wait else '—' }}</div>
      <div class="ql"><span class="mdot" style="background:var(--sev-high)"></span> Oldest</div>
    </div>
  </div>
  {% for group in queue.groups[:4] %}
  <div class="qgroup">
    <div class="qgroup-top">
      <span class="qname" title="{{ group.project_name }}">{{ group.project_name }}</span>
      {% if group.version_name %}<span class="qver" title="{{ group.version_name }}">{{ group.version_name | truncate(20, True, '…') }}</span>{% endif %}
      {% if group.all_done %}
      <span class="qdone-badge">✓ done</span>
      {% else %}
      <span class="qwait">{{ group.oldest_wait_display }}</span>
      {% endif %}
    </div>
    <div class="qdots">
      {%- for scan in group.scans -%}
        {%- if scan.is_error -%}{% set st = 'err' %}
        {%- elif scan.is_done -%}{% set st = 'done' %}
        {%- elif scan.status == 'STARTED' -%}{% set st = 'run' %}
        {%- else -%}{% set st = 'init' %}{%- endif -%}
        <span class="qdot {{ st }} qt-{{ scan.type_slug }}" style="--i:{{ loop.index0 }}" title="{{ scan.type }} — {{ scan.status }}"></span>
      {%- endfor -%}
      {% if not group.all_done %}<span class="qbar"><i></i></span>{% endif %}
    </div>
  </div>
  {% endfor %}
  {% if queue.groups | length > 4 %}
  <div class="qgroup qgroup-more">
    <span class="qmore">+{{ queue.groups | length - 4 }} more in queue</span>
  </div>
  {% endif %}
</div>

{% else %}
<div class="panel" id="scan-queue">
  <div class="phead">
    <h2>Live Scan Queue</h2>
    <button class="prefresh" id="q-refresh"
            hx-get="/api/queue?force=1"
            hx-target="#scan-queue-container"
            hx-swap="innerHTML"
            onclick="this.classList.add('spin');setTimeout(()=>this.classList.remove('spin'),900)">
      ↻ Refresh
    </button>
  </div>
  <div style="display:flex;align-items:center;gap:9px;color:var(--sev-low);font-size:12px;padding:8px 0">
    ✓ No scans in queue
  </div>
</div>
{% endif %}