{# Queue display mode — review queue with inline transition actions #}
{# UX-035 adopter #5 (after grid, list, kanban, tabbed_list).         #}
{% from 'macros/status_badge.html' import render_status_badge %}
{% from 'macros/region_wrapper.html' import region_card %}
{% call region_card(None) %}
  {# Count badge row — dashboard slot owns the title (#794 second
     follow-up), we just surface the total item count here. #}
  {% if total > 0 %}
  <div class="flex items-center justify-end mb-2">
    <span class="inline-flex items-center px-2 h-5 rounded-[3px] text-[11px] font-medium bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]">{{ total }}</span>
  </div>
  {% endif %}

  {# Metrics summary #}
  {% if metrics %}
  <div class="flex gap-3 mb-3">
    {% for metric in metrics %}
    <div class="p-2 rounded-[4px] bg-[hsl(var(--muted)/0.4)] border border-[hsl(var(--border))] flex-1 text-center">
      <div class="text-[16px] font-semibold text-[hsl(var(--foreground))]">{{ metric.value }}</div>
      <div class="text-[11px] text-[hsl(var(--muted-foreground))]">{{ metric.label }}</div>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  {# Filter bar #}
  {% if filter_columns %}
  <div class="flex flex-wrap gap-2 mb-2 filter-bar">
    {% for fc in filter_columns %}
    <select class="h-7 px-2 rounded-[4px] bg-[hsl(var(--background))] border border-[hsl(var(--border))] text-[12px] text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]"
            hx-get="{{ endpoint }}" hx-target="#region-{{ region_name }}" hx-swap="innerHTML"
            hx-include="closest .filter-bar" name="filter_{{ fc.key }}">
      <option value="">All {{ fc.label }}</option>
      {% for opt in fc.options %}
      <option value="{{ opt }}" {% if active_filters.get(fc.key) == opt %}selected{% endif %}>{{ opt | humanize }}</option>
      {% endfor %}
    </select>
    {% endfor %}
  </div>
  {% endif %}

  {# Queue items #}
  {% if items %}
  <div class="space-y-2">
    {% for item in items %}
    {% set attn = item.get("_attention") if item.get is defined else none %}
    {# Queue row — plain pad only, no full border. Dashboard slot owns
       card chrome; full border here reads as a card-in-card (issue
       #794 second follow-up). Attention states keep their left-border
       accent since side borders are accents, not chrome. #}
    <div class="flex items-center gap-3 p-3 rounded-[4px] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]
      {% if attn %}
        border-l-4
        {% if attn.level == 'critical' %}border-l-[hsl(var(--destructive))] bg-[hsl(var(--destructive)/0.04)]
        {% elif attn.level == 'warning' %}border-l-[hsl(var(--warning))] bg-[hsl(var(--warning)/0.04)]
        {% elif attn.level == 'notice' %}border-l-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.04)]
        {% endif %}
      {% else %}
        hover:bg-[hsl(var(--muted)/0.4)]
      {% endif %}">

      {# Main content — clickable to navigate to detail #}
      <div class="flex-1 min-w-0 {% if action_url %}cursor-pointer{% endif %}"
           {% if action_url %}hx-get="{{ action_url | replace('{id}', item[action_id_field|default('id')]|string) }}"
           hx-target="#dz-detail-drawer-content" hx-swap="innerHTML"{% endif %}>
        <div class="flex items-center gap-2">
          <span class="text-[13px] font-medium text-[hsl(var(--foreground))] truncate">{{ item[display_key ~ "_display"] | default(item[display_key]) | default(item.id) }}</span>
          {% for col in columns %}
            {% if col.type == "badge" and col.key != display_key %}
              {{ render_status_badge(value=item[col.key]) }}
            {% endif %}
          {% endfor %}
        </div>
        {% if attn %}
        <p class="text-[11px] text-[hsl(var(--muted-foreground))] mt-0.5">{{ attn.message }}</p>
        {% endif %}
        {# Date columns as secondary info #}
        {% for col in columns %}
          {% if col.type == "date" and item[col.key] %}
          <span class="text-[11px] text-[hsl(var(--muted-foreground))]">{{ col.label }}: {{ item[col.key] | timeago }}</span>
          {% endif %}
        {% endfor %}
      </div>

      {# Inline transition action buttons — outlined neutral #}
      {% if queue_transitions %}
      <div class="flex gap-1 flex-shrink-0" onclick="event.stopPropagation()">
        {% for tr in queue_transitions %}
        {% if item.get(queue_status_field) != tr.to_state %}
        <button type="button"
                class="h-7 px-2.5 rounded-[4px] border border-[hsl(var(--border))] text-[11px] font-medium text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted))] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)] inline-flex items-center"
                hx-put="{{ queue_api_endpoint }}/{{ item.id }}"
                hx-vals='{"{{ queue_status_field }}": "{{ tr.to_state }}"}'
                hx-ext="json-enc"
                hx-target="#region-{{ region_name }}"
                hx-swap="innerHTML">
          {{ tr.label }}
        </button>
        {% endif %}
        {% endfor %}
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% if total > items | length %}
  <p class="text-[11px] text-[hsl(var(--muted-foreground))] mt-2">Showing {{ items | length }} of {{ total }}</p>
  {% endif %}
  {% else %}
  <p class="dz-empty-dense text-[13px] text-[hsl(var(--muted-foreground))] py-4 text-center" role="status">{{ empty_message | default("Queue is empty.") }}</p>
  {% endif %}
{% endcall %}