{% from "macros.html" import badge, icon %}
{% set sb = sparkbars(queues) %}
<div class="text-xs uppercase tracking-wider text-muted px-2 mb-2">Queues</div>
{% for qq in queues %}
<a id="q-{{ qq.name }}" href="{{ url_for('queue_view', name=qq.name).path }}" hx-get="{{ url_for('queue_view', name=qq.name).path }}"
   hx-target="#queue-panel" hx-push-url="true"
   class="queue-item block rounded-lg px-3 py-2.5 mb-1 hover:bg-panel2 transition-colors{{ ' q-active' if qq.name == selected }}"
   {% if qq.name == selected %}aria-current="page"{% endif %}>
  <div class="flex items-center justify-between gap-2">
    <span class="flex items-center gap-2 min-w-0">
      <span class="text-muted shrink-0">{{ icon('queue', 'w-4 h-4') }}</span>
      <span class="q-name font-medium truncate">{{ qq.name }}</span>
    </span>
    {% if qq.paused %}
    <span class="{{ badge('warning', 'shrink-0') }}">paused</span>
    {% endif %}
  </div>
  {% if sb.get(qq.name) %}
  {# Small multiple: every queue's last hour on ONE shared scale, so a glance
     at the sidebar compares queues honestly. Neutral ink for done, danger
     for failed - the one chart per queue, anywhere in the app. #}
  <svg viewBox="0 0 120 20" width="120" height="20" class="q-spark mt-1.5 w-full"
       role="img" shape-rendering="crispEdges" preserveAspectRatio="none"
       aria-label="{{ qq.name }} activity, last hour">
    <line x1="0" y1="19.5" x2="120" y2="19.5" class="stroke-line"/>
    {% for b in sb[qq.name] %}
    {% if b.dh %}<rect x="{{ b.x }}" y="{{ b.y_done }}" width="3" height="{{ b.dh }}" class="fill-muted/40{{ ' opacity-40' if loop.last }}"/>{% endif %}
    {% if b.fh %}<rect x="{{ b.x }}" y="{{ b.y_fail }}" width="3" height="{{ b.fh }}" class="fill-danger{{ ' opacity-40' if loop.last }}"/>{% endif %}
    {% endfor %}
  </svg>
  {% endif %}
  {# Always render all three so they never appear/disappear (the main source of jumping);
     tabular-nums keeps the digits aligned as the numbers change. #}
  <div class="mt-1.5 flex gap-1 text-xs tabular-nums">
    <span class="{{ badge('info') }}" title="{{ qq.counts.active|comma }}">{{ qq.counts.active|compact }} active</span>
    <span class="{{ badge('muted') }}" title="{{ qq.counts.wait|comma }}">{{ qq.counts.wait|compact }} wait</span>
    <span class="{{ badge('danger') }}" title="{{ qq.counts.failed|comma }}">{{ qq.counts.failed|compact }} failed</span>
  </div>
</a>
{% else %}
<div class="text-muted text-sm px-2">none</div>
{% endfor %}

<div class="text-xs uppercase tracking-wider text-muted px-2 mb-2 mt-5">Cluster</div>
<a id="nav-workers" href="{{ url_for('workers_view').path }}" hx-get="{{ url_for('workers_view').path }}"
   hx-target="#queue-panel" hx-push-url="true"
   class="queue-item flex items-center gap-2.5 rounded-lg px-3 py-2.5 hover:bg-panel2 transition-colors{{ ' q-active' if selected == '__workers__' }}"
   {% if selected == '__workers__' %}aria-current="page"{% endif %}>
  <span class="text-muted">{{ icon('server', 'w-4 h-4') }}</span>
  <span class="q-name font-medium">Workers</span>
</a>