{# Filterable table component — Alpine dzTable for all state #}
{% if table %}
<div id="{{ table.table_id or 'dt-table' }}"
     class="space-y-4"
     x-data="dzTable('{{ table.table_id or 'dt-table' }}', '{{ table.api_endpoint }}', '{{ table.sort_field }}', '{{ table.sort_dir }}')"
     data-dazzle-table="{{ table.entity_name }}">

  {# Header row: title + actions #}
  {% block table_header %}
  <div class="flex items-center justify-between">
    <h2 class="text-2xl font-bold">{{ table.title }}</h2>
    <div class="flex gap-2">
      {# Column visibility toggle #}
      {% if table.columns | length > 3 %}
      <div @click.outside="colMenuOpen = false" class="relative">
        <button @click="colMenuOpen = !colMenuOpen" class="btn btn-ghost btn-sm" aria-label="Toggle column visibility">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h18M3 8h18M3 12h18M3 16h18M3 20h18"/></svg>
          Columns
        </button>
        <div x-show="colMenuOpen" x-transition
             class="absolute right-0 mt-2 w-48 bg-base-100 shadow-lg rounded-box p-2 z-50">
          {% for col in table.columns %}
          {% if not col.hidden %}
          <label class="flex items-center gap-2 py-1 px-2 hover:bg-base-200 rounded cursor-pointer">
            <input type="checkbox" class="checkbox checkbox-xs"
                   :checked="isColumnVisible('{{ col.key }}')"
                   @change="toggleColumn('{{ col.key }}')" />
            <span class="text-sm">{{ col.label }}</span>
          </label>
          {% endif %}
          {% endfor %}
        </div>
      </div>
      {% endif %}
      {% if table.create_url %}
      <a href="{{ table.create_url }}" class="btn btn-primary btn-sm" data-dazzle-action="{{ table.entity_name }}.create">+ New {{ table.entity_name }}</a>
      {% endif %}
    </div>
  </div>

  {% endblock table_header %}

  {# Search bar #}
  {% if table.search_enabled %}
  {% with endpoint=table.api_endpoint, target='#' + (table.table_id or 'dt-table') + '-body' %}
  {% include 'fragments/search_input.html' with context %}
  {% endwith %}
  {% endif %}

  {# Filter bar #}
  {% set has_filters = table.columns | selectattr('filterable') | list | length > 0 %}
  {% if has_filters %}
  {% include 'fragments/filter_bar.html' with context %}
  {% endif %}

  {# Bulk actions toolbar #}
  {% if table.bulk_actions %}
  {% with entity_name=table.entity_name, actions_endpoint=table.api_endpoint %}
  {% include 'fragments/bulk_actions.html' %}
  {% endwith %}
  {% endif %}

  {# Skeleton loading indicator #}
  <div id="{{ table.table_id or 'dt-table' }}-loading" class="htmx-indicator"
       role="status" aria-label="Loading">
    <div class="overflow-x-auto">
      <table class="table table-zebra w-full" aria-hidden="true">
        <tbody>
          {% for _ in range(5) %}
          <tr>
            {% for col in table.columns %}
            {% if not col.hidden %}
            <td data-dz-col="{{ col.key }}"><div class="dz-skeleton dz-skeleton-cell" style="width: {{ range(50, 90) | random }}%"></div></td>
            {% endif %}
            {% endfor %}
            <td><div class="dz-skeleton dz-skeleton-cell" style="width: 40%"></div></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <span class="sr-only">Loading data...</span>
  </div>

  {# Table #}
  <div class="overflow-x-auto" role="region" aria-label="{{ table.title }} table" tabindex="0">
    <table class="table table-zebra w-full" data-entity="{{ table.entity_name }}"
           aria-label="{{ table.title }}">
      <caption class="sr-only">{{ table.title }}</caption>
      <thead>
        <tr>
          {% if table.bulk_actions %}
          <th scope="col" class="w-10">
            <input type="checkbox" class="checkbox checkbox-sm"
                   @change="toggleSelectAll($event.target.checked)"
                   aria-label="Select all rows" />
          </th>
          {% endif %}
          {% for col in table.columns %}
          {% if not col.hidden %}
          <th scope="col" data-dz-col="{{ col.key }}"
              {% if col.sortable %}
              :aria-sort="ariaSortDir('{{ col.key }}')"
              {% endif %}>
            {% if col.sortable %}
            <button class="inline-flex items-center gap-1 cursor-pointer select-none hover:bg-base-200 rounded px-1 -mx-1"
                    @click="toggleSort('{{ col.key }}')"
                    aria-label="Sort by {{ col.label }}">
              {{ col.label }}
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                   class="w-3 h-3 stroke-current transition-transform"
                   :class="sortIcon('{{ col.key }}')" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>
              </svg>
            </button>
            {% else %}
            {{ col.label }}
            {% endif %}
          </th>
          {% endif %}
          {% endfor %}
          <th scope="col" class="w-16"><span class="sr-only">Actions</span></th>
        </tr>
      </thead>
      <tbody id="{{ table.table_id or 'dt-table' }}-body"
             hx-get="{{ table.api_endpoint }}{% if table.sort_field %}?sort={{ table.sort_field }}&dir={{ table.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 or 'dt-table' }}-loading">
        {% include 'fragments/table_rows.html' %}
      </tbody>
    </table>
  </div>

  {# Pagination #}
  {% if table.pagination_mode == "infinite" %}
  {% else %}
  <div id="{{ table.table_id or 'dt-table' }}-pagination">
    {% include 'fragments/table_pagination.html' %}
  </div>
  {% endif %}

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