{# List region — UX-035 adopter #2 (after grid). #}
{% from 'macros/status_badge.html' import render_status_badge %}
{% from 'macros/region_wrapper.html' import region_card %}
{% call region_card(None) %}
  {# Header row: title + region actions + CSV export #}
  <div class="flex items-center justify-between mb-3">
    <h3 class="text-[14px] font-semibold text-[hsl(var(--foreground))]">{{ title }}</h3>
    <div class="flex items-center gap-1">
      {% if region_actions %}
      {% for act in region_actions %}
      <button type="button"
              class="h-7 px-2.5 rounded-[4px] bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] text-[12px] font-medium hover:brightness-110 transition-[filter] duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)] inline-flex items-center"
              hx-post="{{ act.endpoint }}"
              hx-confirm="{{ act.confirm }}"
              hx-swap="none">{{ act.label }}</button>
      {% endfor %}
      {% endif %}
      <a href="{{ endpoint }}?format=csv" download
         class="h-7 w-7 inline-flex items-center justify-center rounded-[4px] text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
         title="Export CSV" aria-label="Export CSV">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
        </svg>
      </a>
    </div>
  </div>

  {# Filter bar — per-column dropdowns #}
  {% 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 %}

  {% if date_range %}
  <div class="date-range-bar">
    {% include "fragments/date_range_picker.html" %}
  </div>
  {% endif %}

  {% if items %}
  <div class="overflow-x-auto">
    <table class="w-full">
      <thead>
        <tr class="bg-[hsl(var(--muted)/0.3)] border-b border-[hsl(var(--border))]">
          {% for col in columns %}
          <th class="text-left text-[12px] font-medium text-[hsl(var(--muted-foreground))] px-3 py-2 tracking-tight">
            {% if col.sortable %}
            <a hx-get="{{ endpoint }}?sort={{ col.key }}&amp;dir={% if sort_field == col.key and sort_dir == 'asc' %}desc{% else %}asc{% endif %}"
               hx-target="#region-{{ region_name }}" hx-swap="innerHTML"
               class="cursor-pointer select-none hover:text-[hsl(var(--foreground))] inline-flex items-center gap-1 transition-colors duration-[80ms]">
              {{ col.label }}
              {% if sort_field == col.key %}<span class="ml-1">{{ "▼" if sort_dir == "desc" else "▲" }}</span>{% endif %}
            </a>
            {% else %}
            {{ col.label }}
            {% endif %}
          </th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for item in items %}
        {% set attn = item.get("_attention") if item.get is defined else none %}
        <tr class="border-b border-[hsl(var(--border))] last:border-0 transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]
            {% if attn %}
              {% if attn.level == 'critical' %}bg-[hsl(var(--destructive)/0.08)]{% endif %}
              {% if attn.level == 'warning' %}bg-[hsl(var(--warning)/0.08)]{% endif %}
              {% if attn.level == 'notice' %}bg-[hsl(var(--primary)/0.06)]{% endif %}
            {% endif %}
            {% if action_url %}cursor-pointer hover:bg-[hsl(var(--muted)/0.5)]{% endif %}"
            {% if attn %}title="{{ attn.message }}"{% 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 %}>
          {% for col in columns %}
          <td class="text-[13px] text-[hsl(var(--foreground))] px-3 py-2">
            {% if col.type == "badge" %}
              {{ render_status_badge(value=item[col.key]) }}
            {% elif col.type == "bool" %}
              {{ item[col.key] | bool_icon }}
            {% elif col.type == "date" %}
              {{ item[col.key] | timeago }}
            {% elif col.type == "currency" %}
              {{ item[col.key] | currency }}
            {% elif col.type == "ref" %}
              {% set ref = item[col.key] %}
              {% set display_name = item.get(col.key ~ "_display", "") %}
              {% if ref is mapping %}
                {% set display_name = display_name or (ref | ref_display) %}
                {% if col.ref_route and ref.get("id") %}
                <a hx-get="{{ col.ref_route | replace('{id}', ref.get('id', '')|string) }}"
                   hx-target="#dz-detail-drawer-content" hx-swap="innerHTML"
                   class="text-[hsl(var(--primary))] hover:underline" onclick="event.stopPropagation()">{{ display_name }}</a>
                {% else %}{{ display_name }}{% endif %}
              {% elif display_name %}{{ display_name }}{% else %}-{% endif %}
            {% else %}
              {{ item[col.key] | default("") | truncate_text }}
            {% endif %}
          </td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% if total > items | length %}
  <p class="text-[11px] text-[hsl(var(--muted-foreground))] mt-2">Showing {{ items | length }} of {{ total }}</p>
  {% endif %}
  {% else %}
  {% include "fragments/empty_state.html" %}
  {% endif %}
{% endcall %}