{# Filterable table component — no Alpine, no datatable.js #}
{# All state managed by dz.js initTable() via data-dz-table #}
{% if table %}
<div id="{{ table.table_id or 'dt-table' }}"
     class="space-y-4"
     data-dz-table
     data-dz-table-endpoint="{{ table.api_endpoint }}"
     data-dz-sort-field="{{ table.sort_field }}"
     data-dz-sort-dir="{{ table.sort_dir }}">

  {# Header row: title + actions #}
  <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 data-dz-toggleable class="relative">
        <button data-dz-toggle class="btn btn-ghost btn-sm" title="Toggle columns">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h18M3 8h18M3 12h18M3 16h18M3 20h18"/></svg>
          Columns
        </button>
        <div data-dz-show style="display:none;"
             class="absolute right-0 mt-2 w-48 bg-base-100 shadow-lg rounded-box p-2 z-50">
          {% for col in table.columns %}
          <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"
                   data-dz-col-toggle="{{ col.key }}" checked />
            <span class="text-sm">{{ col.label }}</span>
          </label>
          {% 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>

  {# 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 %}

  {# Loading indicator #}
  <div id="{{ table.table_id or 'dt-table' }}-loading" class="htmx-indicator flex justify-center py-4">
    <span class="loading loading-spinner loading-md"></span>
  </div>

  {# Table #}
  <div class="overflow-x-auto">
    <table class="table table-zebra w-full" data-entity="{{ table.entity_name }}" data-dazzle-table="{{ table.entity_name }}">
      <thead>
        <tr>
          {% if table.bulk_actions %}
          <th class="w-10">
            <input type="checkbox" class="checkbox checkbox-sm" data-dz-select-all />
          </th>
          {% endif %}
          {% for col in table.columns %}
          <th data-dz-col="{{ col.key }}"
              {% if col.sortable %}
              class="cursor-pointer select-none hover:bg-base-200"
              data-dz-sort="{{ col.key }}"
              {% endif %}>
            <span class="inline-flex items-center gap-1">
              {{ col.label }}
              {% if col.sortable %}
              <svg data-dz-sort-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                   class="w-3 h-3 stroke-current transition-transform"
                   style="display:none;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>
              </svg>
              {% endif %}
            </span>
          </th>
          {% endfor %}
          <th class="w-16"></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 %}"
             hx-trigger="load"
             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 #}
  {% include 'fragments/table_pagination.html' %}

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