{% from "tungsten/forms/macros.html" import ui_action %}
<div class="grid gap-y-3" data-field="{{ v.path }}">
  <input type="hidden" name="_tw_ui.{{ v.path }}.page" value="{{ v.page }}">
  <input type="hidden" name="_tw_ui.{{ v.path }}.qprev" value="{{ v.search }}">
  <div class="relative">
    <span class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3 text-gray-400">{{ icon('search', 'h-4 w-4') }}</span>
    <input type="search" name="_tw_ui.{{ v.path }}.q" value="{{ v.search }}" placeholder="{{ __('Search') }}" autocomplete="off"
           class="tw-input ps-9" aria-label="{{ __('Search') }}"
           hx-post="{{ form.refresh_url }}" hx-trigger="input changed delay:400ms, search" hx-target="#{{ form.id }}"
           hx-swap="outerHTML" hx-include="closest form" hx-sync="closest form:replace">
  </div>
  {% for key in v.hidden %}<input type="hidden" name="{{ v.path }}" value="{{ key }}">{% endfor %}
  <div class="overflow-x-auto rounded-xl ring-1 ring-gray-950/5 dark:ring-white/10">
    <table class="w-full text-start text-sm">
      <thead class="bg-gray-50 text-xs font-semibold text-gray-600 dark:bg-white/5 dark:text-gray-300">
        <tr><th class="w-10 px-3 py-2"></th>{% for c in v.columns %}<th class="px-3 py-2 text-start">{{ c }}</th>{% endfor %}</tr>
      </thead>
      <tbody class="divide-y divide-gray-100 dark:divide-white/5">
        {% for r in v.rows %}
        <tr class="cursor-pointer hover:bg-gray-50 dark:hover:bg-white/5" @click="if ($event.target.tagName !== 'INPUT') $el.querySelector('input').click()">
          <td class="px-3 py-2">
            <input type="{{ 'checkbox' if v.multiple else 'radio' }}" name="{{ v.path }}" value="{{ r.key }}"
                   class="{{ 'tw-checkbox' if v.multiple else 'tw-radio' }}" {% if r.key in v.selected %}checked{% endif %}
                   aria-label="{{ r.cells[0] }}">
          </td>
          {% for cell in r.cells %}<td class="px-3 py-2 text-gray-700 dark:text-gray-200">{{ cell }}</td>{% endfor %}
        </tr>
        {% else %}
        <tr><td colspan="{{ v.columns|length + 1 }}" class="px-3 py-8 text-center text-gray-500 dark:text-gray-400">{{ __('No records found') }}</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% if v.pages > 1 %}
  <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
    <span>{{ __('Page :page of :pages', page=v.page, pages=v.pages) }}</span>
    <span class="flex gap-x-2">
      {% if v.page > 1 %}{{ ui_action(form, 'picker.page:' ~ v.path ~ ':' ~ (v.page - 1), __('Previous'), 'tw-btn px-2.5 py-1.5 text-xs ring-1 ring-gray-950/10 dark:ring-white/20') }}{% endif %}
      {% if v.page < v.pages %}{{ ui_action(form, 'picker.page:' ~ v.path ~ ':' ~ (v.page + 1), __('Next'), 'tw-btn px-2.5 py-1.5 text-xs ring-1 ring-gray-950/10 dark:ring-white/20') }}{% endif %}
    </span>
  </div>
  {% endif %}
  {% for e in v.errors %}<p class="text-sm text-danger-600 dark:text-danger-400">{{ __(e) }}</p>{% endfor %}
</div>