{# Queue display mode — review queue with inline transition actions
   UX-035 adopter #5 (after grid, list, kanban, tabbed_list).
   Contract: ~/.claude/skills/ux-architect/components/queue-region.md (UX-068)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-queue-* classes
   (components/regions.css). Row attention accent still flows through the
   unchanged attention_classes macro; row hover-tint applies only when no
   attention attribute is present, gated via `.dz-queue-row:not([data-dz-attn])`. #}
{% from 'macros/status_badge.html' import render_status_badge %}
{% from 'macros/region_wrapper.html' import region_card %}
{% from 'macros/attention_accent.html' import attention_classes %}
{% call region_card(None) %}
<div class="dz-queue-region">
  {# 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="dz-queue-count-row">
    <span class="dz-queue-count">{{ total }}</span>
  </div>
  {% endif %}

  {# Metrics summary #}
  {% if metrics %}
  <div class="dz-queue-metrics">
    {% for metric in metrics %}
    <div class="dz-queue-metric">
      <div class="dz-queue-metric-value">{{ metric.value }}</div>
      <div class="dz-queue-metric-label">{{ metric.label }}</div>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  {# Filter bar #}
  {% if filter_columns %}
  <div class="dz-queue-filters filter-bar">
    {% for fc in filter_columns %}
    <select class="dz-queue-filter-select"
            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="dz-queue-rows">
    {% 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="dz-queue-row {% if attn %}{{ attention_classes(attn, 'both') }}{% endif %}"
         {% if attn %}data-dz-attn="{{ attn.level }}"{% endif %}>

      {# Main content — clickable to navigate to detail #}
      <div class="dz-queue-row-main {% if action_url %}is-clickable{% endif %}"
           {% if action_url %}hx-get="{{ action_url | replace('{id}', item[action_id_field|default('id')]|resolve_fk_id) }}"
           hx-target="#dz-detail-drawer-content" hx-swap="innerHTML"{% endif %}>
        <div class="dz-queue-row-headline">
          {% set _display = item[display_key ~ "_display"] %}
          {% set _primary = item[display_key] %}
          <span class="dz-queue-row-title">{% if _display is not none %}{{ _display }}{% elif _primary is not none %}{{ _primary }}{% else %}{{ item.id }}{% endif %}</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="dz-queue-row-attn">{{ attn.message }}</p>
        {% endif %}
        {# Date columns as secondary info #}
        {% for col in columns %}
          {% if col.type == "date" and item[col.key] %}
          <span class="dz-queue-row-date">{{ col.label }}: {{ item[col.key] | timeago }}</span>
          {% endif %}
        {% endfor %}
      </div>

      {# Inline transition action buttons — outlined neutral #}
      {% if queue_transitions %}
      <div class="dz-queue-row-actions" onclick="event.stopPropagation()">
        {% for tr in queue_transitions %}
        {% if item.get(queue_status_field) != tr.to_state %}
        <button type="button"
                class="dz-queue-action"
                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="dz-queue-overflow">Showing {{ items | length }} of {{ total }}</p>
  {% endif %}
  {% else %}
  <p class="dz-empty-dense dz-queue-empty" role="status">{{ empty_message | default("Queue is empty.") }}</p>
  {% endif %}
</div>
{% endcall %}