{# List region — UX-035 adopter #2 (after grid).
   Contract: ~/.claude/skills/ux-architect/components/list-region.md (UX-069)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-list-* classes
   (components/regions.css). Hover state on .is-clickable modifier;
   attention accent still flows through unchanged attention_classes
   macro. Action buttons + CSV export use semantic class names. #}
{% 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 %}
{% from 'macros/ref_cell.html' import ref_cell %}
{% call region_card(None) %}
<div class="dz-list-region">
  {# Action row: region actions + CSV export. The dashboard slot
     owns the title (#794 second follow-up) — rendering it here would
     duplicate. Actions float right; the row stays full-width so the
     spacing above the table remains consistent. #}
  <div class="dz-list-actions">
    <div class="dz-list-action-group">
      {% if region_actions %}
      {% for act in region_actions %}
      <button type="button"
              class="dz-list-action-button"
              hx-post="{{ act.endpoint }}"
              hx-confirm="{{ act.confirm }}"
              hx-swap="none">{{ act.label }}</button>
      {% endfor %}
      {% endif %}
      {# v0.61.2 (#862): <a download> is ignored by Safari for same-origin
         text/csv responses; the tab navigates and renders CSV inline.
         dz.downloadCsv forces a fetch → Blob → click flow that works on
         all browsers and preserves the user's workspace context. #}
      <button type="button"
              data-dz-csv-endpoint="{{ endpoint }}"
              data-dz-csv-filename="{{ region_name | default('export') }}.csv"
              onclick="window.dz.downloadCsv(this.dataset.dzCsvEndpoint, this.dataset.dzCsvFilename)"
              class="dz-list-csv-button"
              title="Export CSV" aria-label="Export CSV">
        <svg 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>
      </button>
    </div>
  </div>

  {# Filter bar — per-column dropdowns #}
  {% if filter_columns %}
  <div class="dz-list-filters filter-bar">
    {% for fc in filter_columns %}
    <select class="dz-list-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 %}

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

  {% if items %}
  <div class="dz-list-scroll">
    <table class="dz-list-table">
      <thead>
        <tr>
          {% for col in columns %}
          <th>
            {% 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="dz-list-sort-link">
              {{ col.label }}
              {% if sort_field == col.key %}<span>{{ "▼" 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="dz-list-row {{ attention_classes(attn, 'tint') }}{% if action_url %} is-clickable{% endif %}"
            {% if attn %}title="{{ attn.message }}"{% 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 %}>
          {% for col in columns %}
          <td>
            {% 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" %}
              {{ ref_cell(item[col.key], item.get(col.key ~ "_display", ""), col.ref_route or "", 'htmx_drawer') }}
            {% else %}
              {{ item[col.key] | default("") | truncate_text }}
            {% endif %}
          </td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% if total > items | length %}
  <p class="dz-list-overflow">Showing {{ items | length }} of {{ total }}</p>
  {% endif %}
  {% else %}
  {% include "fragments/empty_state.html" %}
  {% endif %}
</div>
{% endcall %}