{# filterable_table.html — pure Tailwind data table, ux-architect/components/data-table contract #}
{% 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"
     class="flex flex-col gap-3">

  {# ── Table header: title + actions ───────────────────────────────────────── #}
  {% block table_header %}
  <div class="flex items-center justify-between">
    <h2 class="text-[15px] font-medium leading-[22px] tracking-[-0.01em] text-[hsl(var(--foreground))]">
      {{ table.title }}
    </h2>
    <div class="flex items-center gap-2">

      {# Column visibility menu #}
      {% if table.columns | length > 3 %}
      <div class="relative" @click.outside="colMenuOpen = false">
        <button
          type="button"
          @click="colMenuOpen = !colMenuOpen"
          :aria-expanded="colMenuOpen"
          aria-label="Toggle column visibility"
          aria-haspopup="menu"
          class="inline-flex items-center gap-1.5 h-7 px-2 rounded-[4px] text-[12px] font-medium
                 text-[hsl(var(--muted-foreground))] border border-[hsl(var(--border))]
                 bg-[hsl(var(--background))] hover:bg-[hsl(var(--card))]
                 transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]
                 select-none">
          {# 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:enter="transition duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
             x-transition:enter-start="opacity-0 scale-[0.97]"
             x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-[0.97]"
             role="menu"
             class="absolute right-0 top-full mt-1 w-44 z-[100]
                    bg-[hsl(var(--card))] border border-[hsl(var(--border))]
                    rounded-[6px] shadow-[0_4px_8px_rgb(0_0_0/0.08),0_2px_4px_rgb(0_0_0/0.04)]
                    py-1 overflow-hidden">
          {% for col in table.columns %}
          {% if not col.hidden %}
          <label role="menuitemcheckbox"
                 class="flex items-center gap-2 px-3 py-1.5 cursor-pointer
                        text-[13px] text-[hsl(var(--foreground))]
                        hover:bg-[hsl(var(--muted)/0.5)]
                        transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
            <input type="checkbox"
                   class="w-3.5 h-3.5 rounded-[2px] accent-[hsl(var(--primary))] cursor-pointer"
                   :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="inline-flex items-center gap-1 h-7 px-3 rounded-[4px] text-[12px] font-medium
                bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]
                hover:opacity-90 transition-opacity duration-[80ms]
                [transition-timing-function:cubic-bezier(0.2,0,0,1)] select-none">
        <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="flex items-center gap-2 flex-wrap">
    {# 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="flex-1 min-w-0">
      {% 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 ─────────────────────────────── #}
  <div class="relative rounded-[6px] border border-[hsl(var(--border))] overflow-hidden">

    {# Loading overlay — sits above the table, dimmed backdrop #}
    <div x-show="loading"
         x-transition:enter="transition duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition duration-[140ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         aria-hidden="true"
         class="absolute inset-0 z-[10] bg-[hsl(var(--background)/0.6)] backdrop-blur-[1px]
                flex items-center justify-center pointer-events-none">
      {# Spinner #}
      <svg class="w-5 h-5 text-[hsl(var(--muted-foreground))] animate-spin" 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="sr-only">Loading…</span>
    </div>

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

      <table class="w-full border-collapse"
             data-entity="{{ table.entity_name }}"
             aria-label="{{ table.title }}">
        <caption class="sr-only">{{ 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="sticky top-0 bg-[hsl(var(--card))] z-10"
               style="box-shadow: 0 1px 0 hsl(var(--border))">
          <tr>
            {# Select-all checkbox #}
            {% if table.bulk_actions %}
            <th scope="col"
                class="w-10 px-3 py-2 text-left">
              <input type="checkbox"
                     class="w-3.5 h-3.5 rounded-[2px] accent-[hsl(var(--primary))] cursor-pointer"
                     @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="relative px-3 py-2 text-left whitespace-nowrap
                       text-[12px] font-medium uppercase tracking-[0.04em]
                       text-[hsl(var(--muted-foreground))] select-none">

              {% if col.sortable %}
              {# Sortable header button #}
              <button type="button"
                      @click="toggleSort('{{ col.key }}')"
                      aria-label="Sort by {{ col.label }}"
                      class="inline-flex items-center gap-1 cursor-pointer
                             hover:text-[hsl(var(--foreground))]
                             transition-colors duration-[80ms]
                             [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
                {{ 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="transition-transform duration-[80ms]
                            [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
                  <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="absolute top-0 right-0 w-1 h-full cursor-col-resize
                          hover:bg-[hsl(var(--primary)/0.5)]
                          transition-colors duration-[80ms]
                          [transition-timing-function:cubic-bezier(0.2,0,0,1)]
                          z-10">
              </div>
            </th>
            {% endif %}
            {% endfor %}

            {# Actions column header #}
            <th scope="col" class="w-16 px-3 py-2">
              <span class="sr-only">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="divide-y divide-[hsl(var(--border))]">
          {% include 'fragments/table_rows.html' %}
        </tbody>
      </table>

      {# Empty state — visible when tbody has no data rows #}
      <div id="{{ table.table_id }}-empty"
           role="status"
           class="hidden py-16 flex flex-col items-center gap-3
                  text-[hsl(var(--muted-foreground))]
                  [&:not(:has(~ tbody tr[data-dz-row-id]))]:flex">
        {# 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="opacity-30">
          <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="text-[15px] font-medium text-[hsl(var(--foreground))]">No {{ table.entity_name | replace("_", " ") | lower }}s found</p>
        <p class="text-[13px]">Try adjusting your search or filter criteria.</p>
        {% if table.create_url %}
        <a href="{{ table.create_url }}"
           class="mt-1 inline-flex items-center gap-1.5 h-8 px-3 rounded-[4px]
                  text-[13px] font-medium bg-[hsl(var(--primary))]
                  text-[hsl(var(--primary-foreground))]
                  hover:opacity-90 transition-opacity duration-[80ms]
                  [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
          <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>{# /overflow-x-auto #}
  </div>{# /relative rounded border #}

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

  {# ── Footer: pagination ───────────────────────────────────────────────────── #}
  {% if table.pagination_mode != "infinite" %}
  <div id="{{ table.table_id }}-pagination"
       class="flex items-center justify-between">
    {% 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="sr-only">
  </div>

</div>
{% endif %}