{% import "adminsite/_icons.html" as icons %}
{% import "adminsite/_values.html" as values %}
<div id="records" class="relative flex min-h-0 flex-1 flex-col"
     x-data="{ picked: 0, everything: false }">
  {% if request.headers.get("hx-request") %}
    {% with oob = true %}{% include "adminsite/_records_total.html" %}{% endwith %}
  {% endif %}
  <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' : ''">

    <div class="min-h-0 flex-1 overflow-auto">
      <table class="w-full border-separate border-spacing-0 max-md:hidden">
        <caption class="sr-only">{{ view.label_plural }}</caption>
        <thead>
          <tr>
            {% if actions %}
              <th class="sticky top-0 z-10 h-10 w-12 border-y border-base-300 bg-subtle ps-4 pe-1 text-start lg:ps-7">
                <input type="checkbox" class="checkbox checkbox-sm align-middle" 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 %}
            {#- The row's menu comes first, where it is in reach however many
                columns the table has. -#}
            <th class="sticky top-0 z-10 h-10 w-10 border-y border-base-300 bg-subtle px-1 {% if not actions %}ps-4 lg:ps-7{% endif %}">
              <span class="sr-only">{{ _('Actions') }}</span>
            </th>
            {% for path in columns %}
              {% set state = sort_state(request, path) %}
              {#- An amount lines up on the right; a key is a name for its
                  record, not an amount, so it reads from the start like text. -#}
              {% set numeric = view._fields.field_for(path).widget == 'number' and path not in view._schema.primary_key %}
              <th class="sticky top-0 z-10 h-10 border-y border-base-300 bg-subtle px-3 text-[12.5px] font-medium whitespace-nowrap {% if numeric %}text-end{% else %}text-start{% endif %} {% if loop.last %}pe-4 lg:pe-7{% endif %} {% if state %}text-base-content{% else %}text-muted{% endif %}"
                  {% if state == "asc" %}aria-sort="ascending"{% elif state == "desc" %}aria-sort="descending"{% endif %}>
                {% if view._pages.sortable(path) %}
                  <a class="inline-flex items-center gap-1 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._fields.label_for(path) }}
                    {% if state == "asc" %}<span aria-hidden="true">&uarr;</span>{% endif %}
                    {% if state == "desc" %}<span aria-hidden="true">&darr;</span>{% endif %}
                  </a>
                {% else %}
                  {{ view._fields.label_for(path) }}
                {% endif %}
              </th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for row in page %}
            {% with upward = loop.revindex <= 3 and loop.length > 5 %}{% include "adminsite/_row.html" %}{% endwith %}
          {% else %}
            <tr>
              <td class="py-20 text-center text-muted" colspan="{{ columns|length + (2 if actions else 1) }}">
                {{ _("No {things} to show.", things=view.label_plural|lower) }}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>

      {#- On a phone each row is a card: its first column and its first badge
          on top, the rest below with the first amount at the end. -#}
      {%- set layout = namespace(badge=none, amount=none) -%}
      {%- for path in columns[1:] -%}
        {%- set kind = view._fields.field_for(path).widget -%}
        {%- if layout.badge is none and kind in ("select", "checkbox") %}{% set layout.badge = path %}{% endif -%}
        {%- if layout.amount is none and kind == "number" %}{% set layout.amount = path %}{% endif -%}
      {%- endfor -%}
      <ul class="md:hidden" aria-label="{{ view.label_plural }}">
        {% for row in page %}
          {% set key = view._fields.identity_of(row) %}
          {% set first = columns[0] %}
          {% set text = view._fields.display(row, first) %}
          {% set is_key = view._fields.field_for(first).widget == "number" and first in view._schema.primary_key %}
          {% set shown = ("#" ~ text if is_key and text else (text or view.get_record_title(row))) %}
          {% set opens = urls.detail(view, key) if can_detail else (urls.edit(view, key) if can_edit else "") %}
          {% set rest = [] %}
          {% for path in columns[1:] if path not in (layout.badge, layout.amount) and view._fields.field_for(path).widget not in ("image", "file") %}
            {% set value = view._fields.display(row, path) %}
            {% if value %}{% set ignored = rest.append(value|string) %}{% endif %}
          {% endfor %}
          <li class="border-b border-line">
            <{{ "a" if opens else "div" }} {% if opens %}href="{{ opens }}"{% endif %} class="flex flex-col gap-1 px-4 py-3 active:bg-subtle">
              <span class="flex items-center justify-between gap-3">
                <span class="min-w-0 truncate font-medium {% if opens %}text-link{% endif %} {% if is_key %}font-mono text-[13.5px]{% endif %}">{{ shown }}</span>
                {% if layout.badge and view._fields.display(row, layout.badge) and not view._fields.hides(row, layout.badge) %}
                  {{ values.badge(view._fields.field_for(layout.badge), view._fields.value_at(row, layout.badge), view._fields.display(row, layout.badge)) }}
                {% endif %}
              </span>
              <span class="flex items-baseline justify-between gap-3">
                <span class="min-w-0 truncate text-[13px] text-muted">{{ rest|join(" · ") }}</span>
                {% if layout.amount %}
                  <span class="shrink-0 font-semibold tabular-nums">{{ view._fields.display(row, layout.amount) }}</span>
                {% endif %}
              </span>
            </{{ "a" if opens else "div" }}>
          </li>
        {% else %}
          <li class="py-16 text-center text-muted">{{ _("No {things} to show.", things=view.label_plural|lower) }}</li>
        {% endfor %}
      </ul>
    </div>

    {% if actions %}
      {#- Floats over the table while rows are ticked, so the actions are where
          the eye already is. -#}
      <div class="pointer-events-none absolute inset-x-0 bottom-20 z-20 flex justify-center px-4"
           x-show="picked > 0" x-cloak>
        <div role="region" aria-label="{{ _('Selection') }}"
             class="pointer-events-auto flex max-w-full flex-wrap items-center gap-1 rounded-box bg-neutral py-1.5 ps-4 pe-1.5 text-neutral-content shadow-float">
          <span class="pe-2 font-medium">
            <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 are selected.", count=total_text) }}</span>
            {% endif %}
          </span>
          {% if page.total is not none %}
            <button class="btn btn-ghost btn-sm text-neutral-content underline underline-offset-3 hover:bg-neutral-content/10" type="button"
                    x-show="!everything && picked >= {{ page|length }}" @click="everything = true">
              {{ _("Select all {count} matching", count=total_text) }}
            </button>
          {% endif %}
          <span class="mx-1 h-5 w-px bg-neutral-content/20" aria-hidden="true"></span>
          {% for item in actions %}
            {% if item.needs_dialog %}
              <button class="btn btn-sm {% if item.dangerous %}btn-error{% else %}btn-ghost text-neutral-content hover:bg-neutral-content/10{% endif %}"
                      type="button"
                      onclick="document.getElementById('action-{{ item.name }}').showModal()">
                {% if item.icon %}{{ icons.custom(item.icon, urls) }}{% endif %}
                {{ item.label }}
              </button>
            {% else %}
              <button class="btn btn-sm {% if item.dangerous %}btn-error{% else %}btn-ghost text-neutral-content hover:bg-neutral-content/10{% endif %}"
                      type="submit"
                      formaction="{{ urls.action(view, item.name) }}{% if request.url.query %}?{{ request.url.query }}{% endif %}">
                {% if item.icon %}{{ icons.custom(item.icon, urls) }}{% endif %}
                {{ item.label }}
              </button>
            {% endif %}
          {% endfor %}
          <span class="mx-1 h-5 w-px bg-neutral-content/20" aria-hidden="true"></span>
          <button class="btn btn-ghost btn-sm btn-square text-neutral-content/70 hover:bg-neutral-content/10" type="button"
                  aria-label="{{ _('Clear the selection') }}"
                  @click="
                    $refs.actions.querySelectorAll('input[type=checkbox]').forEach(box => box.checked = false);
                    picked = 0;
                    everything = false;
                  ">{{ icons.icon("x") }}</button>
        </div>
      </div>
    {% endif %}
  </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 max-w-md rounded-box border border-base-300 shadow-float" method="post"
            action="{{ urls.action(view, item.name) }}{% if request.url.query %}?{{ request.url.query }}{% endif %}"
            {% if action_rows[item.name]|selectattr("widget", "equalto", "file")|list %}enctype="multipart/form-data"{% 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-base 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-muted">
          <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>
        {% include "adminsite/_action_inputs.html" %}
        <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 %}

  {% include "adminsite/_action_forms.html" %}

  <div class="flex flex-wrap items-center gap-3 border-t border-base-300 px-4 py-3 text-[13px] text-muted lg:px-7">
    <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_sizes %}
      <select name="size" form="sizes-{{ view.name }}" onchange="this.form.submit()"
              class="select select-sm w-auto text-base-content" aria-label="{{ _('Rows per page') }}">
        {% for size in page_sizes %}
          <option value="{{ size }}" {% if size == page_size %}selected{% endif %}>
            {{ _('{count} rows', count=size) }}
          </option>
        {% endfor %}
      </select>
    {% endif %}
    {% 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="flex items-center gap-1" aria-label="{{ _('Pages') }}">
      <a class="btn btn-plain btn-sm btn-square {% if not page.has_previous %}btn-disabled{% endif %}"
         aria-label="{{ _('Previous') }}"
         {% 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">{{ icons.icon("chevron-left") }}</a>
      {#- Numbered pages only where the count is exact and pages have numbers:
          the first, the last, and the ones either side of this one. -#}
      {% set exact = page.total is not none and not page.estimated and not page.at_least %}
      {% if exact and not page.keyset and page.limit %}
        {% set last = [((page.total + page.limit - 1) // page.limit), 1]|max %}
        {% for number in range(1, last + 1) if number == 1 or number == last or (number - page_number)|abs <= 1 %}
          {% if not loop.first and number - loop.previtem > 1 %}
            <span class="px-1" aria-hidden="true">…</span>
          {% endif %}
          {% set address = urls.here(page=number if number > 1 else None) %}
          <a class="btn btn-sm min-w-8 px-2 tabular-nums {% if number == page_number %}btn-neutral{% else %}btn-plain{% endif %}"
             aria-label="{{ _('Page {number}', number=number) }}" {% if number == page_number %}aria-current="page"{% endif %}
             href="{{ address }}" hx-get="{{ address }}" hx-target="#records"
             hx-swap="outerHTML" hx-push-url="true">{{ number }}</a>
        {% endfor %}
      {% endif %}
      <a class="btn btn-plain btn-sm btn-square {% if not page.has_next %}btn-disabled{% endif %}"
         aria-label="{{ _('Next') }}"
         {% 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">{{ icons.icon("chevron-right") }}</a>
    </nav>
  </div>
</div>