{% if records %}
<div class="bg-white dark:bg-secondary-800 rounded-xl border border-secondary-200 dark:border-secondary-700 overflow-hidden shadow-sm">
  <div class="overflow-x-auto">
  <table class="w-full text-sm">
    <thead>
      <tr class="border-b border-secondary-100 dark:border-secondary-700 bg-secondary-50 dark:bg-secondary-700/50">
        <th class="w-10 px-4 py-3">
          <input type="checkbox" class="rounded border-secondary-300 dark:border-secondary-600" onclick="toggleAll(this)">
        </th>

        {% for col in resource.table_columns %}
        <th class="px-4 py-3 text-left text-xs font-medium text-secondary-500 dark:text-secondary-400 uppercase tracking-wider whitespace-nowrap">
          {% if col.is_sortable() %}
            {% set next_dir = 'desc' if (sort_by == col.get_key() and sort_dir == 'asc') else 'asc' %}
            <a
              hx-get="{{ panel_prefix }}/{{ resource.slug }}/table?sort_by={{ col.get_key() }}&sort_dir={{ next_dir }}&search={{ search }}&page=1"
              hx-target="#list-container"
              hx-swap="innerHTML"
              hx-push-url="{{ panel_prefix }}/{{ resource.slug }}?sort_by={{ col.get_key() }}&sort_dir={{ next_dir }}&search={{ search }}&page=1"
              class="flex items-center gap-1 hover:text-secondary-900 dark:hover:text-secondary-100 transition-colors cursor-pointer">
              {{ col.get_label() }}
              {% if sort_by == col.get_key() %}
                <svg class="w-3 h-3 {{ 'rotate-180' if sort_dir == 'asc' else '' }}" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
                </svg>
              {% else %}
                <svg class="w-3 h-3 opacity-25" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
                </svg>
              {% endif %}
            </a>
          {% else %}
            {{ col.get_label() }}
          {% endif %}
        </th>
        {% endfor %}

        <th class="px-4 py-3 text-right text-xs font-medium text-secondary-500 dark:text-secondary-400 uppercase tracking-wider w-24">
          Actions
        </th>
      </tr>
    </thead>

      <tbody class="divide-y divide-secondary-100 dark:divide-secondary-700">
      {% for record in records %}
      {% set record_id = record | field_value('id') %}
      <tr class="hover:bg-secondary-50 dark:hover:bg-secondary-700/50 transition-colors group" id="row-{{ record_id }}">

        <td class="px-4 py-3">
          <input type="checkbox" class="rounded border-secondary-300 dark:border-secondary-600 row-checkbox" value="{{ record_id }}">
        </td>

        {% for col in resource.table_columns %}
        <td class="px-4 py-3 text-secondary-700 dark:text-secondary-300">
          {% set value = record | field_value(col.get_key()) %}
          {% if col.__class__.__name__ == 'Image' %}
            {% set _img_url = col.get_url(value) %}
            {% if _img_url %}
              <img src="{{ _img_url }}"
                   alt="{{ col.get_label() }}"
                   class="{{ col.get_img_class() }} ring-1 ring-secondary-200 dark:ring-secondary-600">
            {% else %}
              <span class="inline-flex items-center justify-center {{ col.get_img_class() }} bg-secondary-100 dark:bg-secondary-700 ring-1 ring-secondary-200 dark:ring-secondary-600">
                <svg class="w-4 h-4 text-secondary-400 dark:text-secondary-500" fill="currentColor" viewBox="0 0 24 24">
                  <path d="{{ col.get_placeholder_icon() }}"/>
                </svg>
              </span>
            {% endif %}
          {% elif col.__class__.__name__ == 'Badge' %}
            {% set rendered = col.render(value) %}
            {% if rendered != '—' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ col.css_classes(value) }}">
                {{ rendered }}
              </span>
            {% else %}—{% endif %}
          {% elif col.__class__.__name__ == 'Boolean' %}
            {% if col.is_true(value) %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300">{{ col.get_true_label() }}</span>
            {% else %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-secondary-100 text-secondary-600 dark:bg-secondary-700 dark:text-secondary-400">{{ col.get_false_label() }}</span>
            {% endif %}
          {% else %}
            {{ col.render(value) }}
          {% endif %}
        </td>
        {% endfor %}

        <td class="px-4 py-3 text-right">
          <div class="flex items-center justify-end gap-1">

            {% set _all = resource.all_row_actions %}
            {% set _show_inline = _all | selectattr('is_builtin') | list %}
            {% set _overflow    = _all | rejectattr('is_builtin') | list %}

            {# ── shared style maps ──────────────────────────────── #}
            {% set _icon_cls = {
              'success': 'text-secondary-400 hover:text-green-600 hover:bg-green-50 dark:hover:bg-green-900/30 dark:hover:text-green-400',
              'warning': 'text-secondary-400 hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/30 dark:hover:text-amber-400',
              'danger':  'text-secondary-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 dark:hover:text-red-400',
              'default': 'text-secondary-400 hover:text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-900/30 dark:hover:text-primary-400',
            } %}
            {% set _menu_cls = {
              'success': 'text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/30',
              'warning': 'text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/30',
              'danger':  'text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30',
              'default': 'text-secondary-700 dark:text-secondary-200 hover:bg-secondary-50 dark:hover:bg-secondary-700',
            } %}

            {# ── Inline actions ─────────────────────────────────── #}
            {% for action in _show_inline %}
              {% set _cls = _icon_cls.get(action.get_style(), _icon_cls['default']) %}
              {% if action.is_builtin %}
                {# Built-in: view → <a>, edit → <a>, delete → hx-delete #}
                {% if action.key == '__view__' and has_perm(resource.slug + ':view') %}
                <a href="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}/view"
                   class="p-1.5 rounded transition-colors {{ _cls }}" title="{{ action.get_label() }}">
                  {{ render_icon(action.get_icon()) }}
                </a>
                {% elif action.key == '__edit__' and has_perm(resource.slug + ':edit') %}
                <a href="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}"
                   class="p-1.5 rounded transition-colors {{ _cls }}" title="{{ action.get_label() }}">
                  {{ render_icon(action.get_icon()) }}
                </a>
                {% elif action.key == '__delete__' and has_perm(resource.slug + ':delete') %}
                <button class="p-1.5 rounded transition-colors {{ _cls }}" title="{{ action.get_label() }}"
                        hx-delete="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}"
                        hx-confirm="Delete this {{ resource.label }}?"
                        hx-target="#row-{{ record_id }}" hx-swap="outerHTML swap:200ms">
                  {{ render_icon(action.get_icon()) }}
                </button>
                {% endif %}
              {% else %}
                {# Custom action: data-action-trigger modal #}
                {% if has_perm(resource.slug + ':action') %}
                <button type="button"
                        data-action-trigger
                        data-action-url="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}/action/{{ action.key }}"
                        data-action-title="{{ action.get_modal_title() }}"
                        data-action-fields="{{ action.fields_json() | e }}"
                        data-action-confirm="{{ action.get_confirm() or '' }}"
                        data-action-submit="{{ action.get_label() }}"
                        class="p-1.5 rounded transition-colors {{ _cls }}" title="{{ action.get_label() }}">
                  {% if action.get_icon() %}
                  {{ render_icon(action.get_icon()) }}
                  {% else %}{{ action.get_label() }}{% endif %}
                </button>
                {% endif %}
              {% endif %}
            {% endfor %}

            {# ── Overflow menu (⋮) ──────────────────────────────── #}
            {# Build a list of overflow items the current user is allowed to see #}
            {% set _visible_overflow = [] %}
            {% for action in _overflow %}
              {% if action.is_builtin %}
                {% if (action.key == '__view__' and has_perm(resource.slug + ':view'))
                    or (action.key == '__edit__' and has_perm(resource.slug + ':edit'))
                    or (action.key == '__delete__' and has_perm(resource.slug + ':delete')) %}
                  {% set _ = _visible_overflow.append(action) %}
                {% endif %}
              {% elif has_perm(resource.slug + ':action') %}
                {% set _ = _visible_overflow.append(action) %}
              {% endif %}
            {% endfor %}
            {% if _visible_overflow %}
            <div class="relative" data-overflow-menu>
              <button type="button" onclick="toggleRowOverflow(this)"
                      class="p-1.5 rounded text-secondary-400 hover:text-secondary-700 hover:bg-secondary-100 dark:hover:bg-secondary-700 dark:hover:text-secondary-200 transition-colors"
                      title="More actions">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                  <circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/>
                </svg>
              </button>
              <div class="overflow-dropdown hidden fixed w-44 bg-white dark:bg-secondary-800 rounded-lg border border-secondary-200 dark:border-secondary-700 shadow-lg z-[9999] py-1">
                {% for action in _visible_overflow %}
                  {% set _mcls = _menu_cls.get(action.get_style(), _menu_cls['default']) %}
                  {% if action.is_builtin %}
                    {% if action.key == '__view__' %}
                    <a href="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}/view"
                       class="flex items-center gap-2 px-3 py-1.5 text-sm {{ _mcls }}">
                      {{ render_icon(action.get_icon(), "w-4 h-4 flex-shrink-0") }}{{ action.get_label() }}
                    </a>
                    {% elif action.key == '__edit__' %}
                    <a href="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}"
                       class="flex items-center gap-2 px-3 py-1.5 text-sm {{ _mcls }}">
                      {{ render_icon(action.get_icon(), "w-4 h-4 flex-shrink-0") }}{{ action.get_label() }}
                    </a>
                    {% elif action.key == '__delete__' %}
                    <button class="w-full text-left flex items-center gap-2 px-3 py-1.5 text-sm {{ _mcls }}"
                            hx-delete="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}"
                            hx-confirm="Delete this {{ resource.label }}?"
                            hx-target="#row-{{ record_id }}" hx-swap="outerHTML swap:200ms">
                      {{ render_icon(action.get_icon(), "w-4 h-4 flex-shrink-0") }}{{ action.get_label() }}
                    </button>
                    {% endif %}
                  {% else %}
                    <button type="button"
                            data-action-trigger
                            data-action-url="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}/action/{{ action.key }}"
                            data-action-title="{{ action.get_modal_title() }}"
                            data-action-fields="{{ action.fields_json() | e }}"
                            data-action-confirm="{{ action.get_confirm() or '' }}"
                            data-action-submit="{{ action.get_label() }}"
                            class="w-full text-left flex items-center gap-2 px-3 py-1.5 text-sm {{ _mcls }}">
                      {{ render_icon(action.get_icon(), "w-4 h-4 flex-shrink-0") }}
                      {{ action.get_label() }}
                    </button>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
            {% endif %}

          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>

  {% if total_pages > 1 %}
  <div class="px-4 py-3 border-t border-secondary-100 dark:border-secondary-700 flex items-center justify-between gap-4">
    <span class="text-xs text-secondary-500 dark:text-secondary-400">
      Showing {{ ((page - 1) * per_page) + 1 }}–{{ [page * per_page, total] | min }}
      of {{ total }}
    </span>
    <div class="flex items-center gap-1">
      {% if page > 1 %}
        <a hx-get="{{ panel_prefix }}/{{ resource.slug }}/table?page={{ page - 1 }}&search={{ search }}&sort_by={{ sort_by }}&sort_dir={{ sort_dir }}"
           hx-target="#list-container"
           hx-swap="innerHTML"
           hx-push-url="{{ panel_prefix }}/{{ resource.slug }}?page={{ page - 1 }}&search={{ search }}&sort_by={{ sort_by }}&sort_dir={{ sort_dir }}"
           class="px-3 py-1.5 text-xs rounded border border-secondary-200 dark:border-secondary-600
                  hover:bg-secondary-50 dark:hover:bg-secondary-700
                  text-secondary-700 dark:text-secondary-300 transition-colors cursor-pointer">
          Previous
        </a>
      {% endif %}

      {% set start_page = [1, page - 2] | max %}
      {% set end_page   = [total_pages, page + 2] | min %}
      {% for p in range(start_page, end_page + 1) %}
        {% if p == page %}
          <span class="px-3 py-1.5 text-xs rounded text-white bg-primary font-medium">{{ p }}</span>
        {% else %}
          <a hx-get="{{ panel_prefix }}/{{ resource.slug }}/table?page={{ p }}&search={{ search }}&sort_by={{ sort_by }}&sort_dir={{ sort_dir }}"
             hx-target="#list-container"
             hx-swap="innerHTML"
             hx-push-url="{{ panel_prefix }}/{{ resource.slug }}?page={{ p }}&search={{ search }}&sort_by={{ sort_by }}&sort_dir={{ sort_dir }}"
             class="px-3 py-1.5 text-xs rounded border border-secondary-200 dark:border-secondary-600
                    hover:bg-secondary-50 dark:hover:bg-secondary-700
                    text-secondary-700 dark:text-secondary-300 transition-colors cursor-pointer">
            {{ p }}
          </a>
        {% endif %}
      {% endfor %}

      {% if page < total_pages %}
        <a hx-get="{{ panel_prefix }}/{{ resource.slug }}/table?page={{ page + 1 }}&search={{ search }}&sort_by={{ sort_by }}&sort_dir={{ sort_dir }}"
           hx-target="#list-container"
           hx-swap="innerHTML"
           hx-push-url="{{ panel_prefix }}/{{ resource.slug }}?page={{ page + 1 }}&search={{ search }}&sort_by={{ sort_by }}&sort_dir={{ sort_dir }}"
           class="px-3 py-1.5 text-xs rounded border border-secondary-200 dark:border-secondary-600
                  hover:bg-secondary-50 dark:hover:bg-secondary-700
                  text-secondary-700 dark:text-secondary-300 transition-colors cursor-pointer">
          Next
        </a>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>

{% else %}
<div class="bg-white dark:bg-secondary-800 rounded-xl border border-secondary-200 dark:border-secondary-700 border-dashed py-16 text-center shadow-sm">
  <div class="w-12 h-12 rounded-full bg-secondary-100 dark:bg-secondary-700 flex items-center justify-center mx-auto mb-4">
    <svg class="w-6 h-6 text-secondary-400 dark:text-secondary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
        d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
    </svg>
  </div>
  {% if search %}
    <p class="text-sm font-medium text-secondary-700 dark:text-secondary-300">No results for "{{ search }}"</p>
    <p class="text-xs text-secondary-400 dark:text-secondary-500 mt-1">Try a different search term.</p>
  {% else %}
    <p class="text-sm font-medium text-secondary-700 dark:text-secondary-300">No {{ resource.label_plural | lower }} yet</p>
    <a href="{{ panel_prefix }}/{{ resource.slug }}/new"
       class="inline-flex items-center gap-1.5 mt-3 text-xs font-medium text-primary hover:opacity-80 transition-opacity">
      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
      </svg>
      Create the first {{ resource.label | lower }}
    </a>
  {% endif %}
</div>
{% endif %}

<script>
function toggleAll(master) {
  document.querySelectorAll('.row-checkbox').forEach(cb => cb.checked = master.checked);
}

function toggleRowOverflow(btn) {
  var menu = btn.nextElementSibling;
  var opening = menu.classList.contains('hidden');
  // close all open overflow menus
  document.querySelectorAll('.overflow-dropdown').forEach(function(m) { m.classList.add('hidden'); });
  if (opening) {
    var r = btn.getBoundingClientRect();
    menu.style.top  = (r.top - menu.offsetHeight - 4) + 'px';
    menu.style.left = (r.right - 176) + 'px'; // 176 = w-44
    menu.classList.remove('hidden');
    // recalc after paint (menu height now known)
    requestAnimationFrame(function() {
      menu.style.top = (r.top - menu.offsetHeight - 4) + 'px';
    });
  }
}

if (!window._rowOverflowClickHandler) {
  window._rowOverflowClickHandler = true;
  document.addEventListener('click', function(e) {
    if (!e.target.closest('[data-overflow-menu]')) {
      document.querySelectorAll('.overflow-dropdown').forEach(function(m) { m.classList.add('hidden'); });
    }
  });
}
</script>