{%- set total_text -%}
  {%- set number = "{:,}".format(page.total) if page.total is not none else "" -%}
  {%- if page.at_least %}{{ _("more than {count}", count=number) }}
  {%- elif page.estimated %}{{ _("about {count}", count=number) }}
  {%- else %}{{ number }}{% endif -%}
{%- endset -%}
<div id="records" class="flex min-h-0 flex-1 flex-col"
     x-data="{ picked: 0, everything: false }">
  <form method="post" class="flex min-h-0 flex-1 flex-col"
        x-ref="actions" action="{{ urls.action(view, '') }}">
    {{ csrf_input | safe if csrf_input }}
    <input type="hidden" name="everything" :value="everything ? '1' : ''">

    {% if actions %}
      <div class="flex flex-wrap items-center gap-2 border-b border-base-300 bg-base-200 px-3 py-2 lg:px-6"
           x-show="picked > 0" x-cloak>
        <span class="font-medium"><span x-text="picked"></span> {{ _('selected') }}</span>
        {% if page.total is not none %}
          <button class="btn btn-link btn-xs px-1" type="button"
                  x-show="!everything && picked >= {{ page|length }}"
                  @click="everything = true">
            {{ _("Select all {count} matching", count=total_text) }}
          </button>
          <span class="text-base-content/70" x-show="everything">
            {{ _("All {count} matching rows are selected.", count=total_text) }}
          </span>
        {% endif %}
        <span class="flex-1"></span>
        {% for item in actions %}
          {% if item.needs_dialog %}
            <button class="btn btn-sm {% if item.dangerous %}btn-error btn-soft{% endif %}"
                    type="button"
                    onclick="document.getElementById('action-{{ item.name }}').showModal()">
              {{ item.label }}
            </button>
          {% else %}
            <button class="btn btn-sm {% if item.dangerous %}btn-error btn-soft{% endif %}"
                    type="submit"
                    formaction="{{ urls.action(view, item.name) }}{% if request.url.query %}?{{ request.url.query }}{% endif %}">
              {{ item.label }}
            </button>
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}

    <div class="min-h-0 flex-1 overflow-auto">
      <table class="table table-sm table-pin-rows">
        <caption class="sr-only">{{ view.label_plural }}</caption>
        <thead>
          <tr class="bg-base-100">
            {% if actions %}
              <th class="w-10">
                <input type="checkbox" class="checkbox checkbox-sm" aria-label="{{ _('Select this page') }}"
                       @change="
                         $refs.actions.querySelectorAll('input[name=keys]')
                           .forEach(box => box.checked = $event.target.checked);
                         picked = $refs.actions.querySelectorAll('input[name=keys]:checked').length;
                         everything = false;
                       ">
              </th>
            {% endif %}
            {% for path in columns %}
              {% set state = sort_state(request, path) %}
              <th class="{% if view.field_for(path).widget == 'number' %}text-end{% endif %}"
                  {% if state == "asc" %}aria-sort="ascending"{% elif state == "desc" %}aria-sort="descending"{% endif %}>
                <a class="inline-flex items-center gap-1 font-medium hover:text-base-content"
                   href="{{ urls.sorted_by(path) }}"
                   hx-get="{{ urls.sorted_by(path) }}" hx-target="#records"
                   hx-swap="outerHTML" hx-push-url="true">
                  {{ view.label_for(path) }}
                  {% if state == "asc" %}<span class="text-primary" aria-hidden="true">&uarr;</span>{% endif %}
                  {% if state == "desc" %}<span class="text-primary" aria-hidden="true">&darr;</span>{% endif %}
                </a>
              </th>
            {% endfor %}
            <th class="w-12"></th>
          </tr>
        </thead>
        <tbody>
          {% for row in page %}
            {% set key = view.identity_of(row) %}
            <tr class="hover:bg-base-200">
              {% if actions %}
                <td>
                  <input type="checkbox" class="checkbox checkbox-sm" name="keys" value="{{ key }}"
                         aria-label="{{ _('Select {name}', name=view.title_of(row)) }}"
                         @change="
                           picked = $refs.actions.querySelectorAll('input[name=keys]:checked').length;
                           everything = false;
                         ">
                </td>
              {% endif %}
              {% for path in columns %}
                {% set widget = view.field_for(path).widget %}
                {% set text = view.display(row, path) %}
                <td class="whitespace-nowrap {% if widget == 'number' %}text-end tabular-nums{% endif %}">
                  {% if loop.first %}
                    <a class="link link-hover link-primary font-medium" href="{{ urls.detail(view, key) }}">
                      {{ text or view.title_of(row) }}
                    </a>
                  {% elif widget == "image" and text %}
                    {% set stored = view.value_at(row, path) %}
                    <img src="{{ urls.file(view, path, stored) }}" alt="{{ text }}"
                         class="h-8 w-8 rounded object-cover" loading="lazy">
                  {% elif widget == "file" and text %}
                    <a class="link link-hover" href="{{ urls.file(view, path, view.value_at(row, path)) }}">{{ text }}</a>
                  {% elif widget == "select" and text %}
                    <span class="badge badge-soft badge-sm">{{ text }}</span>
                  {% elif widget == "checkbox" and text %}
                    <span class="badge badge-sm {% if view.value_at(row, path) %}badge-success badge-soft{% else %}badge-ghost{% endif %}">{{ text }}</span>
                  {% else %}
                    {{ text }}
                  {% endif %}
                </td>
              {% endfor %}
              <td class="text-end">
                <a class="btn btn-ghost btn-xs" href="{{ urls.edit(view, key) }}">{{ _('Edit') }}</a>
              </td>
            </tr>
          {% else %}
            <tr>
              <td class="py-16 text-center text-base-content/60" colspan="{{ columns|length + 2 }}">
                {{ _("No {things} to show.", things=view.label_plural|lower) }}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </form>

  {#- Each dialog is its own form, so a required input in one dialog never
      stops another action from submitting. On submit it copies the ticked
      rows across from the table. -#}
  {% for item in actions if item.needs_dialog %}
    <dialog id="action-{{ item.name }}" class="modal">
      <form class="modal-box" method="post"
            action="{{ urls.action(view, item.name) }}{% if request.url.query %}?{{ request.url.query }}{% endif %}"
            @submit="
              $el.querySelectorAll('input[data-copied]').forEach(node => node.remove());
              $refs.actions.querySelectorAll('input[name=keys]:checked').forEach(box => {
                const copy = document.createElement('input');
                copy.type = 'hidden';
                copy.name = 'keys';
                copy.value = box.value;
                copy.dataset.copied = '';
                $el.appendChild(copy);
              });
            ">
        {{ csrf_input | safe if csrf_input }}
        <input type="hidden" name="everything" :value="everything ? '1' : ''">
        <h3 class="text-lg font-semibold">{{ item.label }}</h3>
        {% if item.confirm %}
          <p class="pt-2 text-base-content/80">{{ item.confirm }}</p>
        {% endif %}
        <p class="pt-1 text-base-content/60">
          <span x-show="!everything"><span x-text="picked"></span> {{ _('selected') }}</span>
          {% if page.total is not none %}
            <span x-show="everything">{{ _("All {count} matching rows", count=total_text) }}</span>
          {% endif %}
        </p>
        {% if action_rows[item.name] %}
          <div class="mt-3">
            {% for row in action_rows[item.name] %}
              {% include "adminsite/_field.html" %}
            {% endfor %}
          </div>
        {% endif %}
        <div class="modal-action">
          <button type="button" class="btn btn-ghost btn-sm"
                  onclick="this.closest('dialog').close()">{{ _('Cancel') }}</button>
          <button type="submit"
                  class="btn btn-sm {% if item.dangerous %}btn-error{% else %}btn-primary{% endif %}">
            {{ item.label }}
          </button>
        </div>
      </form>
      <div class="modal-backdrop" onclick="this.closest('dialog').close()"></div>
    </dialog>
  {% endfor %}

  <div class="flex items-center gap-3 border-t border-base-300 px-3 py-2 text-base-content/70 lg:px-6">
    <span class="tabular-nums" data-count>
      {% if page.keyset %}
        {% if page.total is not none %}{{ total_text }} {{ view.label_plural|lower }}{% endif %}
      {% elif page.total is not none %}
        {{ _("{first} to {last} of {total}", first=page.first_position, last=page.last_position, total=total_text) }}
      {% else %}
        {{ _("{first} to {last}", first=page.first_position, last=page.last_position) }}
      {% endif %}
    </span>
    <span class="flex-1"></span>
    {% if page.keyset %}
      {% set previous = urls.here(page=None, after=None, before=page.previous_cursor or None) %}
      {% set next = urls.here(page=None, before=None, after=page.next_cursor or None) %}
    {% else %}
      {% set previous = urls.here(page=page_number - 1 if page_number > 2 else None) %}
      {% set next = urls.here(page=page_number + 1) %}
    {% endif %}
    <nav class="join" aria-label="{{ _('Pages') }}">
      <a class="join-item btn btn-sm {% if not page.has_previous %}btn-disabled{% endif %}"
         {% if not page.has_previous %}aria-disabled="true" tabindex="-1"{% endif %}
         href="{{ previous }}" hx-get="{{ previous }}" hx-target="#records"
         hx-swap="outerHTML" hx-push-url="true">{{ _('Previous') }}</a>
      {% if not page.keyset %}
        <span class="join-item btn btn-sm pointer-events-none" aria-current="page">{{ _("Page {number}", number=page_number) }}</span>
      {% endif %}
      <a class="join-item btn btn-sm {% if not page.has_next %}btn-disabled{% endif %}"
         {% if not page.has_next %}aria-disabled="true" tabindex="-1"{% endif %}
         href="{{ next }}" hx-get="{{ next }}" hx-target="#records"
         hx-swap="outerHTML" hx-push-url="true">{{ _('Next') }}</a>
    </nav>
  </div>
</div>