{% import "tungsten/components/ui.html" as ui %}
{% macro filter_fields(table, filters, deferred, close_on_apply=false) %}
  <div class="grid gap-5" {% if deferred %}data-tw-defer @keydown.enter="$refs.apply.value = '1'"{% endif %}>
    {% for f in filters %}
    <div class="grid gap-4" {% if f.grid_style() %}style="{{ f.grid_style() }}"{% endif %}>
      {% for field in f.get_fields() %}{{ field.render(table.filter_form, f.base()) }}{% endfor %}
    </div>
    {% endfor %}
  </div>
  <div class="mt-5 flex flex-wrap gap-3">
    {% if deferred %}
    <button type="submit" class="flex-1 {{ ui.button_classes('primary') }}" @click="$refs.apply.value = '1'{% if close_on_apply %}; panel = false{% endif %}">
      {{ icon('check', 'h-4 w-4') }}<span>{{ __('Apply filters') }}</span>
    </button>
    {% endif %}
    <button type="button" class="flex-1 {{ ui.button_classes('gray') }}"
            hx-get="{{ table.ctx.url('_tw', 'table') }}?host={{ table.host.key | urlencode }}&_f=1&_reset=1" hx-target="#{{ table.id }}" hx-swap="outerHTML">
      {{ icon('rotate-ccw', 'h-4 w-4') }}<span>{{ __('Clear filters') }}</span>
    </button>
  </div>
{% endmacro %}
{% set sort_col, sort_dir = table.sort %}
{% set page_keys = rows | selectattr('key', 'defined') | map(attribute='key') | list %}
<div id="{{ table.id }}" class="tw-card overflow-hidden" data-tw-table
     hx-get="{{ table.url() }}" hx-trigger="tw-refresh from:body{% if table._poll %}, every {{ table._poll }}{% endif %}" hx-swap="outerHTML"
     x-data="{ selected: [], collapsed: [], panel: {{ 'true' if table.param('_panel') else 'false' }}, keys: {{ tojson_attr(page_keys) }},
               get allSelected() { return this.keys.length > 0 && this.keys.every(k => this.selected.includes(k)); },
               toggleAll() { this.selected = this.allSelected ? [] : [...this.keys]; },
               closeFilters() { this.panel = false; {% if deferred %}this.$root.querySelector('form').reset();{% endif %} } }"
     @tw-deselect.window="selected = []">
  <form hx-get="{{ ctx.url('_tw', 'table') }}" hx-target="#{{ table.id }}" hx-swap="outerHTML" hx-sync="this:replace"
        hx-trigger="change[!target.closest('[data-tw-local],[data-tw-defer]')], input changed delay:400ms from:find input[type=search], submit"
        onsubmit="return false">
    <input type="hidden" name="host" value="{{ host.key }}">
    <input type="hidden" name="_f" value="1">
    <input type="hidden" name="_panel" :value="panel ? '1' : ''">
    {% if deferred %}<input type="hidden" name="_applied" value="{{ table.applied_filters_value() }}"><input type="hidden" name="_apply" value="" x-ref="apply">{% endif %}
    {% if table.param('tab') %}<input type="hidden" name="tab" value="{{ table.param('tab') }}">{% endif %}
    {% if reordering %}<input type="hidden" name="reordering" value="1">{% endif %}
    {% if table.param('sort') is not none %}<input type="hidden" name="sort" value="{{ table.param('sort') }}"><input type="hidden" name="direction" value="{{ table.param('direction', '') }}">{% endif %}

    {% if heading or description %}
    <div class="px-5 pt-5">
      {% if heading %}<h3 class="text-base font-semibold text-gray-950 dark:text-white">{{ heading }}</h3>{% endif %}
      {% if description %}<p class="text-sm text-gray-500 dark:text-gray-400">{{ description }}</p>{% endif %}
    </div>
    {% endif %}

    {% if tabs %}
    {# ------------------------------------------------------------ list tabs #}
    <nav class="flex gap-2 overflow-x-auto border-b border-gray-100 px-4 dark:border-white/10" aria-label="{{ __('Tabs') }}">
      {% for t in tabs %}
      <button type="button" hx-get="{{ t.url }}" hx-target="#{{ table.id }}" hx-swap="outerHTML"
              class="-mb-px flex shrink-0 items-center gap-2 border-b-2 px-3 py-3 text-sm font-medium transition
                     {{ 'border-primary-500 text-primary-600 dark:text-primary-400' if t.active else 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200' }}"
              {% if t.active %}aria-current="page"{% endif %}>
        {{ icon(t.icon, 'h-4 w-4') }}{{ t.label }}
        {% if t.badge is not none %}<span class="rounded-full px-2 py-0.5 text-xs font-semibold {{ colors.pick(colors.BADGE, 'primary' if t.active else t.color) }}">{{ t.badge }}</span>{% endif %}
      </button>
      {% endfor %}
    </nav>
    {% endif %}

    {% if table._toolbar %}
    {# ------------------------------------------------------------ toolbar #}
    <div class="flex flex-wrap items-center gap-3 p-4">
      {% if table.is_searchable() %}
      <div class="w-full sm:w-72">{{ ui.search_input('search', table.search, search_placeholder, table.id ~ '-search') }}</div>
      {% endif %}
      {% for f in inline_filters %}
        {% for field in f.get_fields() %}
        <div class="min-w-[9rem] [&_.tw-label]:sr-only [&_[data-field]]:gap-y-0" {% if deferred %}data-tw-defer{% endif %}>{{ field.render(table.filter_form, f.base()) }}</div>
        {% endfor %}
      {% endfor %}
      {% if deferred and inline_filters and not panel_filters %}
      <button type="submit" class="{{ ui.button_classes('primary') }}" @click="$refs.apply.value = '1'">{{ icon('check', 'h-4 w-4') }}<span>{{ __('Apply filters') }}</span></button>
      {% endif %}
      {% if panel_filters %}
      {% set filters_button %}
      <button type="button" @click="panel ? closeFilters() : (panel = true)" class="{{ ui.button_classes('gray') }}" :class="panel && 'ring-primary-500 text-primary-600'"
              aria-haspopup="{{ 'dialog' if filters_layout == 'modal' else 'true' }}" :aria-expanded="panel">
        {{ icon('list-filter', 'h-4 w-4') }}<span>{{ __('More filters') if inline_filters else __('Filters') }}</span>
        {% if active_panel_count %}<span class="rounded-full bg-primary-600 px-1.5 text-xs text-white">{{ active_panel_count }}</span>{% endif %}
      </button>
      {% endset %}
      {% if filters_layout == 'dropdown' %}
      {# ------------------------------------------------------------ filters in a dropdown #}
      <div class="relative" @click.outside="panel && !$event.target.closest('.ts-dropdown') && closeFilters()" @keydown.escape.window="panel && closeFilters()">
        {{ filters_button }}
        <div x-show="panel" x-cloak x-transition.opacity.duration.100ms data-tw-filters="dropdown"
             class="absolute start-0 z-30 mt-2 {{ 'w-[28rem]' if panel_filters | selectattr('field', 'defined') | list else 'w-80' }} max-w-[calc(100vw-2rem)] rounded-xl bg-white p-4 shadow-lg ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
          <h4 class="mb-4 text-base font-semibold text-gray-950 dark:text-white">{{ __('Filters') }}</h4>
          {{ filter_fields(table, panel_filters, deferred, close_on_apply=true) }}
        </div>
      </div>
      {% else %}{{ filters_button }}{% endif %}
      {% endif %}
      <div class="ms-auto flex flex-wrap items-center gap-3">
        {% if groups %}
        <select name="group" class="tw-input w-auto pe-9">
          <option value="none">{{ __('No grouping') }}</option>
          {% for g in groups %}<option value="{{ g.attribute }}" {% if group and group.attribute == g.attribute %}selected{% endif %}>{{ __('Group by :label', label=g.get_label() | lower) }}</option>{% endfor %}
        </select>
        {% endif %}
        {% if toggleable %}
        <input type="hidden" name="_cols" value="1">
        {% call(part) ui.dropdown(width='w-60') %}
          {% if part == 'trigger' %}
          <button type="button" class="{{ ui.button_classes('gray') }}">{{ icon('columns-3', 'h-4 w-4') }}<span>{{ __('Columns') }}</span>{{ icon('chevron-down', 'h-4 w-4') }}</button>
          {% else %}
          <p class="px-2 pb-1 pt-1.5 text-xs font-semibold uppercase tracking-wide text-gray-400">{{ __('Show columns') }}</p>
          {% for c in toggleable %}
          <label class="flex cursor-pointer items-center gap-x-3 rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-white/5">
            <input type="checkbox" name="cols" value="{{ c.name }}" class="tw-checkbox" {% if c.visible %}checked{% endif %}>{{ c.label }}
          </label>
          {% endfor %}
          {% endif %}
        {% endcall %}
        {% endif %}
        {% if reorderable %}
        <button type="button" class="{{ ui.button_classes('primary' if reordering else 'gray') }}"
                hx-get="{{ table.url(reordering=(None if reordering else '1'), page=None) }}" hx-target="#{{ table.id }}" hx-swap="outerHTML">
          {{ icon('check' if reordering else 'arrow-up-down', 'h-4 w-4') }}<span>{{ __('Done reordering') if reordering else __('Reorder') }}</span>
        </button>
        {% endif %}
        {% for a in header_actions %}{{ a.render(ctx, host, None, table_id=table.id) }}{% endfor %}
      </div>
    </div>

    {# ------------------------------------------------------------ active filter chips #}
    {% if indicators %}
    <div class="flex flex-wrap items-center gap-2 border-t border-gray-100 px-4 py-3 text-sm dark:border-white/10">
      <span class="text-gray-500 dark:text-gray-400">{{ __('Active filters') }}</span>
      {% for i in indicators %}{{ ui.badge(i.label, 'primary') }}{% endfor %}
      <a href="#" class="ms-1 {{ colors.LINK.gray }}" hx-get="{{ ctx.url('_tw', 'table') }}?host={{ host.key | urlencode }}&_f=1&_reset=1" hx-target="#{{ table.id }}" hx-swap="outerHTML">{{ icon('x', 'h-4 w-4') }}</a>
    </div>
    {% endif %}
    {% endif %}

    {# ------------------------------------------------------------ bulk bar #}
    {% if selectable %}
    <div x-show="selected.length" x-cloak class="flex flex-wrap items-center gap-2 border-t border-gray-100 bg-primary-50/40 px-4 py-2.5 dark:border-white/10 dark:bg-primary-500/5">
      <span class="me-2 rounded-lg bg-white px-3 py-1.5 text-sm font-medium text-gray-700 ring-1 ring-gray-950/10 dark:bg-white/5 dark:text-gray-200 dark:ring-white/10"><span x-text="selected.length"></span> {{ __('selected') }}</span>
      {% for a in bulk_actions %}{{ a.render(ctx, host, None, style='soft', table_id=table.id) }}{% endfor %}
      <button type="button" class="ms-auto text-sm {{ colors.LINK.gray }}" @click="selected = []">{{ __('Clear selection') }}</button>
    </div>
    {% endif %}

    {# the filter panel sits beside the table, and above it on narrow screens, where beside it would squeeze the table #}
    <div class="flex flex-col-reverse md:flex-row">
    <div class="min-w-0 flex-1">
    {# ------------------------------------------------------------ table #}
    {% if rows and content_grid %}
    {# ------------------------------------------------------------ records as cards #}
    <div class="border-t border-gray-100 p-4 dark:border-white/10">
      {% if selectable %}
      <label class="mb-3 inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
        <input type="checkbox" class="tw-checkbox" data-tw-local :checked="allSelected" @click="toggleAll()">{{ __('Select all') }}
      </label>
      {% endif %}
      <div class="{{ content_grid }}" data-tw-grid>
        {% for row in rows %}
        {% if row.group is defined %}
        <h4 class="col-span-full mt-2 text-sm font-semibold text-gray-950 first:mt-0 dark:text-white">{{ row.group }}</h4>
        {% else %}
        <div class="relative flex flex-col gap-3 rounded-xl bg-white p-4 ring-1 ring-gray-950/5 transition hover:ring-gray-950/10 dark:bg-white/[0.03] dark:ring-white/10 {{ 'opacity-60' if row.trashed }} {{ row.classes }}"
             :class="selected.includes('{{ row.key }}') && '!ring-2 !ring-primary-500'" data-key="{{ row.key }}">
          {% if selectable %}
          <input type="checkbox" name="records" value="{{ row.key }}" class="tw-checkbox absolute end-4 top-4" data-tw-local x-model="selected" aria-label="{{ __('Select row') }}">
          {% endif %}
          {% for c in columns %}
          <div class="min-w-0 {{ 'pe-8 text-base font-semibold text-gray-950 dark:text-white' if loop.first else '' }}">
            {% if not loop.first %}<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ c.get_label() }}</p>{% endif %}
            {% if row.url and not c.editable and not c._url %}
            <a href="{{ row.url }}" class="block" hx-target="body" hx-swap="innerHTML show:window:top">{{ c.render_cell(table, row.record) }}</a>
            {% else %}{{ c.render_cell(table, row.record) }}{% endif %}
          </div>
          {% endfor %}
          {% if row_actions %}
          <div class="mt-auto flex flex-wrap items-center justify-end gap-2 border-t border-gray-100 pt-3 dark:border-white/10">
            {% for a in row_actions %}{{ a.render(ctx, host, row.record, style=(None if a._style else ('icon' if a._icon else 'link')), table_id=table.id) }}{% endfor %}
          </div>
          {% endif %}
        </div>
        {% endif %}
        {% endfor %}
      </div>
      {% if summaries %}
      <dl class="mt-4 flex flex-wrap gap-x-6 gap-y-2 rounded-xl bg-gray-50/60 px-4 py-3 text-sm dark:bg-white/5">
        {% for c in columns %}{% for s in summaries.get(c.name, []) %}
        <div><dt class="inline text-gray-500 dark:text-gray-400">{{ c.get_label() }} · {{ s.label }}:</dt> <dd class="inline font-semibold text-gray-950 dark:text-white">{{ s.value }}</dd></div>
        {% endfor %}{% endfor %}
      </dl>
      {% endif %}
    </div>
    {% elif rows %}
    <div class="{{ 'max-md:overflow-visible' if stacked }} overflow-x-auto border-t border-gray-100 dark:border-white/10">
      <table class="w-full table-auto divide-y divide-gray-100 text-start dark:divide-white/5 {{ 'max-md:block' if stacked }}" {% if stacked %}data-tw-stacked{% endif %}>
        <thead class="bg-gray-50/70 dark:bg-white/[0.03] {{ 'max-md:hidden' if stacked }}">
          {% if column_groups %}
          {# shared headings over grouped columns: ColumnGroup("Pricing", [...]) #}
          <tr>
            {% if reordering %}<th></th>{% endif %}
            {% if selectable %}<th></th>{% endif %}
            {% if table._row_index %}<th></th>{% endif %}
            {% for g in column_groups %}
            {% if g.group %}
            <th colspan="{{ g.span }}" class="border-b border-gray-200 px-3 pb-2 pt-3 text-sm font-semibold text-gray-950 dark:border-white/10 dark:text-white {{ 'text-end' if g.group._alignment == 'end' else ('text-start' if g.group._alignment == 'start' else 'text-center') }} {{ 'whitespace-normal' if g.group._wrap else 'whitespace-nowrap' }}">{{ g.group.get_label() }}</th>
            {% else %}<th colspan="{{ g.span }}"></th>{% endif %}
            {% endfor %}
            {% if row_actions %}<th></th>{% endif %}
          </tr>
          {% endif %}
          <tr>
            {% if reordering %}<th class="w-1 px-4 py-3"></th>{% endif %}
            {% if selectable %}
            <th class="w-1 px-4 py-3"><input type="checkbox" class="tw-checkbox" data-tw-local :checked="allSelected" @click="toggleAll()" aria-label="{{ __('Select all') }}"></th>
            {% endif %}
            {% if table._row_index %}<th class="w-1 px-3 py-3 text-start text-sm font-medium text-gray-500 dark:text-gray-400">#</th>{% endif %}
            {% for c in columns %}
            <th class="px-3 py-3 text-sm font-medium text-gray-600 dark:text-gray-300 {{ 'text-end' if c._alignment == 'end' else ('text-center' if c._alignment == 'center' else 'text-start') }}"
                {% if c._width %}style="width: {{ c._width }}"{% endif %}>
              {% if c._sortable %}
              <button type="button" hx-get="{{ table.sort_url(c) }}" hx-target="#{{ table.id }}" hx-swap="outerHTML"
                      class="group inline-flex items-center gap-x-1 whitespace-nowrap hover:text-gray-950 dark:hover:text-white">
                {{ c.get_label() }}
                {% if sort_col == c.name %}
                  <span class="text-primary-600 dark:text-primary-400">{{ icon('arrow-up' if sort_dir == 'asc' else 'arrow-down', 'h-3.5 w-3.5') }}</span>
                {% else %}
                  <span class="text-gray-400 group-hover:text-gray-500">{{ icon('chevrons-up-down', 'h-3.5 w-3.5') }}</span>
                {% endif %}
              </button>
              {% else %}<span class="whitespace-nowrap">{{ c.get_label() }}</span>{% endif %}
            </th>
            {% endfor %}
            {% if row_actions %}<th class="px-4 py-3 text-end text-sm font-medium text-gray-600 dark:text-gray-300">{{ __('Actions') }}</th>{% endif %}
          </tr>
          {% if individual_search %}
          {# per-column search boxes: searchable(is_individual=True) #}
          <tr>
            {% if reordering %}<th></th>{% endif %}
            {% if selectable %}<th></th>{% endif %}
            {% if table._row_index %}<th></th>{% endif %}
            {% for c in columns %}
            <th class="px-3 pb-3 font-normal">
              {% if c._searchable and c._individual_searchable %}{{ ui.search_input('col_search.' ~ c.name, column_searches.get(c.name, ''), __('Search :records...', records=c.get_label() | lower)) }}{% endif %}
            </th>
            {% endfor %}
            {% if row_actions %}<th></th>{% endif %}
          </tr>
          {% endif %}
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-white/5 {{ 'max-md:block' if stacked }}"
               {% if reordering %}data-tw-sortable="{{ ctx.url('_tw', 'reorder') }}" data-host="{{ host.key }}"{% endif %}>
          {% set colspan = columns | length + (1 if reordering else 0) + (1 if selectable else 0) + (1 if table._row_index else 0) + (1 if row_actions else 0) %}
          {% for row in rows %}
          {% if row.group is defined %}
          {% if group._collapsible %}
          <tr class="cursor-pointer bg-gray-50 dark:bg-white/5 {{ 'max-md:block' if stacked }}" data-tw-group="{{ row.group_index }}"
              @click="collapsed.includes({{ row.group_index }}) ? collapsed.splice(collapsed.indexOf({{ row.group_index }}), 1) : collapsed.push({{ row.group_index }})">
            <td colspan="{{ colspan }}" class="px-4 py-2 text-sm font-semibold text-gray-950 dark:text-white {{ 'max-md:block' if stacked }}">
              <button type="button" class="flex w-full items-center gap-2 text-start" :aria-expanded="!collapsed.includes({{ row.group_index }})">
                <span class="text-gray-400 transition-transform" :class="collapsed.includes({{ row.group_index }}) && '-rotate-90'">{{ icon('chevron-down', 'h-4 w-4') }}</span>{{ row.group }}
              </button>
            </td>
          </tr>
          {% else %}
          <tr class="bg-gray-50 dark:bg-white/5 {{ 'max-md:block' if stacked }}"><td colspan="{{ colspan }}" class="px-4 py-2 text-sm font-semibold text-gray-950 dark:text-white {{ 'max-md:block' if stacked }}">{{ row.group }}</td></tr>
          {% endif %}
          {% else %}
          <tr {% if group and group._collapsible %}x-show="!collapsed.includes({{ row.group_index }})"{% endif %} class="transition {{ 'odd:bg-gray-50/50 dark:odd:bg-white/[0.02]' if table._striped }} {{ 'opacity-60' if row.trashed }} {{ row.classes }} hover:bg-gray-50 dark:hover:bg-white/5 {{ 'max-md:relative max-md:block max-md:px-1 max-md:py-2' if stacked }} {{ 'max-md:pe-10' if stacked and selectable }}"
              :class="selected.includes('{{ row.key }}') && '!bg-primary-50/60 dark:!bg-primary-500/10'" data-key="{{ row.key }}">
            {% if reordering %}<td class="w-1 px-4 py-3"><span class="tw-drag-handle cursor-grab text-gray-400 hover:text-gray-600 active:cursor-grabbing">{{ icon('grip-vertical', 'h-5 w-5') }}</span></td>{% endif %}
            {% if selectable %}
            <td class="w-1 px-4 py-3 {{ 'max-md:absolute max-md:end-1 max-md:top-2' if stacked }}"><input type="checkbox" name="records" value="{{ row.key }}" class="tw-checkbox" data-tw-local x-model="selected" aria-label="{{ __('Select row') }}"></td>
            {% endif %}
            {% if table._row_index %}<td class="px-3 py-3 text-sm text-gray-500 dark:text-gray-400 {{ 'max-md:hidden' if stacked }}">{{ row.index }}</td>{% endif %}
            {% for c in columns %}
            <td class="px-3 py-3 {{ 'whitespace-normal' if c._wrap else 'whitespace-nowrap' }} {{ 'max-md:flex max-md:items-start max-md:justify-between max-md:gap-4 max-md:py-1.5 max-md:text-end max-md:before:shrink-0 max-md:before:text-start max-md:before:text-sm max-md:before:font-medium max-md:before:text-gray-500 max-md:before:content-[attr(data-label)] dark:max-md:before:text-gray-400' if stacked }}"
                {% if stacked %}data-label="{{ c.get_label() }}"{% endif %}>
              {% if row.url and not c.editable and not c._url %}
              {#- the table's form sets hx-target/hx-swap; a boosted (SPA) link must not inherit them -#}
              <a href="{{ row.url }}" class="block" hx-target="body" hx-swap="innerHTML show:window:top">{{ c.render_cell(table, row.record) }}</a>
              {% else %}{{ c.render_cell(table, row.record) }}{% endif %}
            </td>
            {% endfor %}
            {% if row_actions %}
            <td class="px-4 py-3 {{ 'max-md:block max-md:px-3 max-md:py-2' if stacked }}"><div class="flex items-center justify-end gap-2">
              {% for a in row_actions %}{{ a.render(ctx, host, row.record, style=(None if a._style else ('icon' if a._icon else 'link')), table_id=table.id) }}{% endfor %}
            </div></td>
            {% endif %}
          </tr>
          {% endif %}
          {% endfor %}
        </tbody>
        {% if summaries %}
        <tfoot class="border-t-2 border-gray-200 bg-gray-50/60 dark:border-white/10 dark:bg-white/5 {{ 'max-md:block' if stacked }}">
          <tr class="{{ 'max-md:block' if stacked }}">
            {% if reordering %}<td></td>{% endif %}
            {% if selectable %}<td class="{{ 'max-md:hidden' if stacked }}"></td>{% endif %}
            {% if table._row_index %}<td class="{{ 'max-md:hidden' if stacked }}"></td>{% endif %}
            {% for c in columns %}
            <td class="px-3 py-3 align-top text-sm {{ 'max-md:flex max-md:justify-between max-md:gap-4 max-md:py-1 max-md:before:font-medium max-md:before:text-gray-500 max-md:before:content-[attr(data-label)]' if stacked and summaries.get(c.name) }} {{ 'max-md:hidden' if stacked and not summaries.get(c.name) }}"
                {% if stacked and summaries.get(c.name) %}data-label="{{ c.get_label() }}"{% endif %}>
              {% for s in summaries.get(c.name, []) %}
              <div class="{{ 'text-end' if c._alignment == 'end' else '' }}"><span class="text-gray-500 dark:text-gray-400">{{ s.label }}:</span> <span class="font-semibold text-gray-950 dark:text-white">{{ s.value }}</span></div>
              {% endfor %}
              {% if loop.first and not summaries.get(c.name) %}<span class="font-medium text-gray-950 dark:text-white">{{ __('Summary') }}</span>{% endif %}
            </td>
            {% endfor %}
            {% if row_actions %}<td class="{{ 'max-md:hidden' if stacked }}"></td>{% endif %}
          </tr>
        </tfoot>
        {% endif %}
      </table>
    </div>

    {# ------------------------------------------------------------ pagination #}
    {% if paginated %}
    {% set pbtn = 'inline-flex h-9 min-w-[2.25rem] items-center justify-center rounded-lg px-2 text-sm font-medium transition' %}
    {% set pidle = pbtn ~ ' bg-white ring-1 ring-inset ring-gray-950/10 text-gray-700 hover:bg-gray-50 disabled:opacity-40 disabled:hover:bg-white dark:bg-white/5 dark:ring-white/10 dark:text-gray-300 dark:hover:bg-white/10' %}
    <nav class="flex flex-wrap items-center justify-between gap-3 border-t border-gray-100 px-4 py-3 dark:border-white/10" data-tw-pagination="{{ pagination_mode }}">
      {% if pagination_mode == 'default' %}
      <p class="text-sm text-gray-600 dark:text-gray-400">{{ __('Showing') }} <span class="font-medium">{{ from }}</span> {{ __('to') }} <span class="font-medium">{{ to }}</span> {{ __('of') }} <span class="font-medium">{{ total | number }}</span> {{ __('results') }}</p>
      {% elif pagination_mode == 'simple' %}
      <p class="text-sm text-gray-600 dark:text-gray-400">{{ __('Showing') }} <span class="font-medium">{{ from }}</span> {{ __('to') }} <span class="font-medium">{{ to }}</span></p>
      {% else %}<span></span>{% endif %}
      <div class="flex flex-wrap items-center gap-3">
        {% if pagination_mode == 'simple' and (page > 1 or has_next) %}
        <div class="flex items-center gap-1.5">
          <button type="button" class="{{ pidle }} gap-1 px-3" {% if page == 1 %}disabled{% endif %}
                  hx-get="{{ table.url(page=page - 1) }}" hx-target="#{{ table.id }}" hx-swap="outerHTML"><span class="rtl:rotate-180">{{ icon('chevron-left', 'h-4 w-4') }}</span>{{ __('Previous') }}</button>
          <button type="button" class="{{ pidle }} gap-1 px-3" {% if not has_next %}disabled{% endif %}
                  hx-get="{{ table.url(page=page + 1) }}" hx-target="#{{ table.id }}" hx-swap="outerHTML">{{ __('Next') }}<span class="rtl:rotate-180">{{ icon('chevron-right', 'h-4 w-4') }}</span></button>
        </div>
        {% elif pagination_mode == 'cursor' and (cursors.prev or cursors.next) %}
        <div class="flex items-center gap-1.5">
          <button type="button" class="{{ pidle }} gap-1 px-3" {% if not cursors.prev %}disabled{% endif %}
                  {% if cursors.prev %}hx-get="{{ table.url(page=None, cursor=cursors.prev) }}" hx-target="#{{ table.id }}" hx-swap="outerHTML"{% endif %}><span class="rtl:rotate-180">{{ icon('chevron-left', 'h-4 w-4') }}</span>{{ __('Previous') }}</button>
          <button type="button" class="{{ pidle }} gap-1 px-3" {% if not cursors.next %}disabled{% endif %}
                  {% if cursors.next %}hx-get="{{ table.url(page=None, cursor=cursors.next) }}" hx-target="#{{ table.id }}" hx-swap="outerHTML"{% endif %}>{{ __('Next') }}<span class="rtl:rotate-180">{{ icon('chevron-right', 'h-4 w-4') }}</span></button>
        </div>
        {% elif pagination_mode == 'default' and pages > 1 %}
        <div class="flex items-center gap-1.5">
          <button type="button" class="{{ pidle }}" {% if page == 1 %}disabled{% endif %}
                  hx-get="{{ table.url(page=page - 1) }}" hx-target="#{{ table.id }}" hx-swap="outerHTML" aria-label="{{ __('Previous') }}"><span class="rtl:rotate-180">{{ icon('chevron-left', 'h-4 w-4') }}</span></button>
          {% for n in page_links %}
            {% if n is none %}<span class="px-1 text-gray-400">…</span>
            {% elif n == page %}<span class="{{ pbtn }} bg-primary-600 text-white shadow-sm shadow-primary-600/25 dark:bg-primary-500" aria-current="page">{{ n }}</span>
            {% else %}<button type="button" class="{{ pidle }}"
                      hx-get="{{ table.url(page=n) }}" hx-target="#{{ table.id }}" hx-swap="outerHTML">{{ n }}</button>
            {% endif %}
          {% endfor %}
          <button type="button" class="{{ pidle }}" {% if page == pages %}disabled{% endif %}
                  hx-get="{{ table.url(page=page + 1) }}" hx-target="#{{ table.id }}" hx-swap="outerHTML" aria-label="{{ __('Next') }}"><span class="rtl:rotate-180">{{ icon('chevron-right', 'h-4 w-4') }}</span></button>
        </div>
        {% endif %}
        {% if table._per_page_options | length > 1 %}
        <select name="per_page" class="tw-input w-auto pe-9" aria-label="{{ __('Per page') }}">
          {% for n in table._per_page_options %}<option value="{{ n }}" {% if n == per_page %}selected{% endif %}>{{ __(':count per page', count=n) }}</option>{% endfor %}
        </select>
        {% endif %}
      </div>
    </nav>
    {% endif %}
    {% else %}
    <div class="border-t border-gray-100 dark:border-white/10">
      {% call ui.empty_state(empty_heading, empty_description, empty_icon) %}
        {% for a in empty_actions %}{{ a.render(ctx, host, None, table_id=table.id) }}{% endfor %}
      {% endcall %}
    </div>
    {% endif %}
    </div>

    {# ------------------------------------------------------------ filter panel #}
    {% if panel_filters and filters_layout == 'panel' %}
    {% set has_builder = panel_filters | selectattr('field', 'defined') | list %}
    <aside x-show="panel" x-cloak class="{{ 'md:w-80' if has_builder else 'md:w-72' }} shrink-0 border-t border-gray-100 p-4 md:border-s dark:border-white/10">
      <div class="mb-4 flex items-center justify-between">
        <h4 class="text-base font-semibold text-gray-950 dark:text-white">{{ __('Filters') }}</h4>
        <button type="button" class="tw-icon-btn text-gray-400" @click="closeFilters()" aria-label="{{ __('Close filters') }}">{{ icon('x', 'h-4 w-4') }}</button>
      </div>
      {{ filter_fields(table, panel_filters, deferred) }}
    </aside>
    {% endif %}
    </div>

    {% if panel_filters and filters_layout == 'modal' %}
    {# ------------------------------------------------------------ filters in a modal #}
    <div x-show="panel" x-cloak class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center" role="dialog" aria-modal="true"
         aria-labelledby="{{ table.id }}-filters-title" data-tw-filters="modal" @keydown.escape.window="panel && closeFilters()">
      <div class="fixed inset-0 bg-gray-950/50 backdrop-blur-[1px] dark:bg-gray-950/75" @click="closeFilters()"></div>
      <div class="relative max-h-[85vh] w-full {{ 'max-w-2xl' if panel_filters | selectattr('field', 'defined') | list else 'max-w-lg' }} overflow-y-auto rounded-xl bg-white p-6 shadow-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10"
           x-show="panel" x-transition>
        <div class="mb-5 flex items-center justify-between">
          <h4 id="{{ table.id }}-filters-title" class="text-base font-semibold text-gray-950 dark:text-white">{{ __('Filters') }}</h4>
          <button type="button" class="tw-icon-btn text-gray-400" @click="closeFilters()" aria-label="{{ __('Close filters') }}">{{ icon('x', 'h-4 w-4') }}</button>
        </div>
        {{ filter_fields(table, panel_filters, deferred, close_on_apply=true) }}
      </div>
    </div>
    {% endif %}
  </form>
</div>