{% import "adminsite/_icons.html" as icons %}
{% import "adminsite/_values.html" as values %}
{#- A reload brings new rows, none of them ticked, so it starts the selection
    the Actions menu reads again. -#}
<div id="records" class="relative flex min-h-0 flex-1 flex-col"
     x-data x-init="$store.selection.picked = 0; $store.selection.everything = false">
  {% if request.headers.get("hx-request") %}
    {% with oob = true %}
      {% include "adminsite/_records_total.html" %}
      {% include "adminsite/_filter_chips.html" %}
      {% if panels %}
        {% include "adminsite/_filters_count.html" %}
        {% include "adminsite/_filters_footer.html" %}
      {% endif %}
      {% include "adminsite/_bulk_actions.html" %}
    {% endwith %}
  {% endif %}
  {#- The rows come before their total, which this asks for once they are on
      screen. A table redrawn before the answer is back stops it, so a slow
      count never overwrites the newer table's. -#}
  {% if counting %}
    <div id="records-counter" hidden hx-trigger="load" hx-swap="none"
         hx-get="{{ request.url.path }}{% if request.url.query %}?{{ request.url.query }}{% endif %}"
         hx-on::before-cleanup-element="htmx.trigger(this, 'htmx:abort')"></div>
  {% endif %}
  <form id="records-actions" 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="$store.selection.everything ? '1' : ''">

    {#- Relative, so text kept for screen readers in a cell, such as "Not
        set", is placed inside this box, which scrolls. Placed against the
        list instead, it stretched the page around the table to the
        table's full size, and the page scrolled as well as the table. -#}
    <div class="relative 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);
                         $store.selection.picked = $refs.actions.querySelectorAll('input[name=keys]:checked').length;
                         $store.selection.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>

  </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="$store.selection.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="!$store.selection.everything"><span x-text="$store.selection.picked"></span> {{ _('selected') }}</span>
          <span x-show="$store.selection.everything" x-text="$store.selection.allMatching"></span>
        </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">
    {% include "adminsite/_records_count.html" %}
    <span class="flex-1"></span>
    {% if page_sizes %}
      <select name="size" form="sizes-{{ view.name }}" onchange="this.form.requestSubmit()"
              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>
      {% include "adminsite/_page_numbers.html" %}
      <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>