{# filterable_table.html — data table component
   Contract: ~/.claude/skills/ux-architect/components/data-table.md

   v0.62 CSS refactor: Tailwind utility soup → semantic .dz-table-*
   classes from components/table.css. Sticky header + sortable cols
   + column resize + visibility menu + bulk actions + loading
   overlay + empty state — all chrome lives in CSS now. Alpine
   state grammar (loading, colMenuOpen, isColumnVisible, bulkCount,
   columnWidths) unchanged; semantic classes layer over the same
   :class / x-show bindings. #}
{% if table %}
{%- set config_json = {
      "sortField": table.default_sort_field,
      "sortDir": table.default_sort_dir,
      "inlineEditable": table.inline_editable,
      "bulkActions": table.bulk_actions,
      "entityName": table.entity_name
    } | tojson -%}
<div id="{{ table.table_id }}"
     data-dazzle-table="{{ table.entity_name }}"
     {#
        x-data MUST be single-quoted because `config_json` (via `tojson`)
        contains unescaped `"` characters — Jinja's `tojson` escapes
        HTML-sensitive chars like `<`, `>`, `&`, `'` but NOT `"` since
        they are the JSON string delimiter. With a double-quoted
        attribute the first `"` inside the JSON prematurely terminates
        the attribute, leaving Alpine to parse the malformed
        `dzTable(..., {` expression — which cascades into every
        dzTable state name (loading, colMenuOpen, isColumnVisible,
        selected, bulkCount, columnWidths) reading as "undefined".
        That was the actual root cause of issue #804. Keeping this
        comment as a load-bearing reminder for anyone tempted to
        "tidy up" the quoting here.
     #}
     x-data='dzTable("{{ table.table_id }}", "{{ table.api_endpoint }}", {{ config_json }})'
     :aria-busy="loading"
     data-dz-bulk-count="0"
     class="dz-table">

  {# ── Table header: title + actions ───────────────────────────────────────── #}
  {# #983 — visually-hidden h1 landmark so list pages have a proper
     "page title" in the accessibility tree. Pre-#983 the table
     emitted only an h2; screenreaders had nothing at h1 to anchor
     on. The table-title h2 stays as the visible heading — promoting
     it to h1 would conflict with the workspace shell h1 on
     dashboard pages. #}
  {% if page_title %}
    <h1 class="dz-page-title visually-hidden">{{ page_title }}</h1>
  {% endif %}
  {% block table_header %}
  <div class="dz-table-header">
    <h2 class="dz-table-title">{{ table.title }}</h2>
    <div class="dz-table-header-actions">

      {# Column visibility menu #}
      {% if table.columns | length > 3 %}
      <div class="dz-table-col-menu" @click.outside="colMenuOpen = false">
        <button
          type="button"
          @click="colMenuOpen = !colMenuOpen"
          :aria-expanded="colMenuOpen"
          aria-label="Toggle column visibility"
          aria-haspopup="menu"
          class="dz-table-col-menu-trigger">
          {# Columns icon #}
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg">
            <rect x="1" y="1" width="3" height="12" rx="0.5" stroke="currentColor" stroke-width="1.5"/>
            <rect x="5.5" y="1" width="3" height="12" rx="0.5" stroke="currentColor" stroke-width="1.5"/>
            <rect x="10" y="1" width="3" height="12" rx="0.5" stroke="currentColor" stroke-width="1.5"/>
          </svg>
          Columns
        </button>

        {# Column visibility dropdown #}
        <div x-show="colMenuOpen"
             x-transition.opacity.duration.80ms
             role="menu"
             class="dz-table-col-menu-panel">
          {% for col in table.columns %}
          {% if not col.hidden %}
          <label role="menuitemcheckbox" class="dz-table-col-menu-item">
            <input type="checkbox"
                   class="dz-table-col-menu-checkbox"
                   :checked="isColumnVisible('{{ col.key }}')"
                   @change="toggleColumn('{{ col.key }}')"
                   aria-label="Show {{ col.label }} column" />
            <span>{{ col.label }}</span>
          </label>
          {% endif %}
          {% endfor %}
        </div>
      </div>
      {% endif %}

      {# Create button #}
      {% if table.create_url %}
      <a href="{{ table.create_url }}"
         data-dazzle-action="{{ table.entity_name }}.create"
         class="dz-button-primary">
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg">
          <path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
        New {{ table.entity_name | replace("_", " ") }}
      </a>
      {% endif %}
    </div>
  </div>
  {% endblock table_header %}

  {# ── Toolbar: search · filters · bulk actions ─────────────────────────────── #}
  <div class="dz-table-toolbar">
    {# Search — left #}
    {% if table.search_enabled %}
    {% with endpoint=table.api_endpoint, target='#' + table.table_id + '-body' %}
    {% include 'fragments/search_input.html' with context %}
    {% endwith %}
    {% endif %}

    {# Filter chips — centre, flex-grow #}
    {%- set has_filters = table.columns | selectattr('filterable') | list | length > 0 -%}
    {% if has_filters %}
    <div class="dz-table-toolbar-filters">
      {% include 'fragments/filter_bar.html' with context %}
    </div>
    {% endif %}

    {# Bulk actions — right, visible when rows selected #}
    {% if table.bulk_actions %}
    {% with entity_name=table.entity_name, actions_endpoint=table.api_endpoint %}
    {% include 'fragments/bulk_actions.html' with context %}
    {% endwith %}
    {% endif %}
  </div>

  {# ── Table scroll + loading overlay container ─────────────────────────────── #}
  {# --dz-list-rows feeds the min-height reservation in table.css that fixes
     #965's list-surface CLS. The CSS clamps to 10 internally so very large
     page_sizes don't reserve absurd vertical space when actual results are
     small. #}
  <div class="dz-table-scroll" style="--dz-list-rows: {{ table.page_size or 10 }}">

    {# Loading overlay — sits above the table, dimmed backdrop.
       #972: pre-fix this used `x-show="loading"` against the ancestor
       dzTable's `x-data` scope. Idiomorph re-evaluated the binding on
       morph before Alpine re-established the parent scope, throwing
       "loading is not defined" — the same failure mode as #970. Fixed
       per ADR-0022's preferred pattern: pure CSS keyed off htmx's
       `.htmx-request` class, applied to the request-initiating element
       (the outer dzTable wrapper). No Alpine binding, no morph race. #}
    <div aria-hidden="true" class="dz-table-loading">
      {# Spinner #}
      <svg class="dz-table-loading-spinner" viewBox="0 0 24 24" fill="none"
           xmlns="http://www.w3.org/2000/svg">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
        <path class="opacity-75" fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
      </svg>
      <span class="visually-hidden">Loading…</span>
    </div>

    {# Horizontal scroll region #}
    <div class="dz-table-scroll-x"
         role="region"
         aria-label="{{ table.title }} table"
         tabindex="0">

      <table class="dz-table-grid"
             data-entity="{{ table.entity_name }}"
             aria-label="{{ table.title }}">
        <caption class="visually-hidden">{{ table.title }}</caption>

        {# colgroup — one <col> per visible column. Drives column-resize via pointer events. #}
        <colgroup>
          {% if table.bulk_actions %}
          <col data-col="__select" style="width: 40px">
          {% endif %}
          {% for col in table.columns %}
          {% if not col.hidden %}
          <col data-col="{{ col.key }}"
               :style="columnWidths['{{ col.key }}'] ? 'width: ' + columnWidths['{{ col.key }}'] + 'px' : ''">
          {% endif %}
          {% endfor %}
          {# Actions column #}
          <col data-col="__actions" style="width: 64px">
        </colgroup>

        {# ── Sticky header ─────────────────────────────────────────────────── #}
        <thead class="dz-table-head">
          <tr>
            {# Select-all checkbox #}
            {% if table.bulk_actions %}
            <th scope="col" class="dz-table-th dz-table-th-select">
              <input type="checkbox"
                     class="dz-table-col-menu-checkbox"
                     @change="toggleSelectAll($event.target.checked)"
                     :checked="bulkCount > 0 && bulkCount === $el.closest('table').querySelectorAll('tbody tr[data-dz-row-id]').length"
                     :indeterminate="bulkCount > 0 && bulkCount < $el.closest('table').querySelectorAll('tbody tr[data-dz-row-id]').length"
                     aria-label="Select all rows" />
            </th>
            {% endif %}

            {# Column headers #}
            {% for col in table.columns %}
            {% if not col.hidden %}
            <th scope="col"
                data-dz-col="{{ col.key }}"
                x-show="isColumnVisible('{{ col.key }}')"
                {% if col.sortable %}:aria-sort="ariaSortDir('{{ col.key }}')"{% endif %}
                class="dz-table-th">

              {% if col.sortable %}
              {# Sortable header button #}
              <button type="button"
                      @click="toggleSort('{{ col.key }}')"
                      aria-label="Sort by {{ col.label }}"
                      class="dz-table-sort-button">
                {{ col.label }}
                {# 12px chevron SVG — rotated by Alpine sortIcon() #}
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"
                     xmlns="http://www.w3.org/2000/svg"
                     :class="sortIcon('{{ col.key }}')"
                     class="dz-table-sort-icon">
                  <path d="M2 4.5l4 4 4-4" stroke="currentColor" stroke-width="1.5"
                        stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
              {% else %}
              {{ col.label }}
              {% endif %}

              {# Resize handle — 4px wide, right edge of th #}
              <div role="separator"
                   aria-orientation="vertical"
                   aria-label="Resize {{ col.label }} column"
                   @pointerdown="startColumnResize('{{ col.key }}', $event)"
                   class="dz-table-resize-handle">
              </div>
            </th>
            {% endif %}
            {% endfor %}

            {# Actions column header #}
            <th scope="col" class="dz-table-th dz-table-th-actions">
              <span class="visually-hidden">Actions</span>
            </th>
          </tr>
        </thead>

        {# ── Table body — loaded via HTMX ──────────────────────────────────── #}
        <tbody id="{{ table.table_id }}-body"
               hx-get="{{ table.api_endpoint }}{% if table.default_sort_field %}?sort={{ table.default_sort_field }}&dir={{ table.default_sort_dir }}{% endif %}"
               {% if not table.search_first %}hx-trigger="load"{% endif %}
               hx-swap="morph:innerHTML"
               hx-headers='{"Accept": "text/html"}'
               hx-indicator="#{{ table.table_id }}-loading-sr"
               @htmx:before-request="loading = true"
               @htmx:after-settle="loading = false"
               class="dz-table-body">
          {% include 'fragments/table_rows.html' %}
        </tbody>
      </table>

      {# Empty state — visible (via :has CSS selector) when tbody has no data rows #}
      <div id="{{ table.table_id }}-empty"
           role="status"
           class="dz-table-empty">
        {# Empty icon #}
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             class="dz-table-empty-icon">
          <rect x="4" y="4" width="32" height="32" rx="4" stroke="currentColor" stroke-width="2"/>
          <path d="M12 16h16M12 20h10M12 24h8" stroke="currentColor" stroke-width="1.5"
                stroke-linecap="round"/>
        </svg>
        <p class="dz-table-empty-title">No {{ table.entity_name | replace("_", " ") | lower }}s found</p>
        <p class="dz-table-empty-hint">Try adjusting your search or filter criteria.</p>
        {% if table.create_url %}
        <a href="{{ table.create_url }}" class="dz-button-primary">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
            <path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
          New {{ table.entity_name | replace("_", " ") }}
        </a>
        {% endif %}
      </div>

    </div>{# /dz-table-scroll-x #}
  </div>{# /dz-table-scroll #}

  {# Screen-reader-only HTMX loading indicator (real indicator managed by Alpine loading flag above) #}
  <div id="{{ table.table_id }}-loading-sr" class="htmx-indicator visually-hidden"
       role="status" aria-label="Loading data">
    Loading…
  </div>

  {# ── Footer: pagination ───────────────────────────────────────────────────── #}
  {% if table.pagination_mode != "infinite" %}
  <div id="{{ table.table_id }}-pagination" class="dz-table-footer">
    {% include 'fragments/table_pagination.html' %}
  </div>
  {% endif %}

  {# Slide-over panel for detail views #}
  {% if table.slide_over %}
  {% include 'components/alpine/slide_over.html' %}
  {% endif %}

  {# Screen reader live region for Alpine announcements #}
  <div id="dz-live-region"
       aria-live="polite"
       aria-atomic="true"
       class="visually-hidden">
  </div>

</div>
{% endif %}