{% from "admin/components/field.html" import render_field_value with context %}
{% from "admin/components/icons.html" import icon %}
{# Table, ported from shadcn/ui: a bordered card wrapping a
   `w-full caption-bottom text-sm` table, muted uppercase headers, and
   rows that highlight on hover. Class strings come from ui('table', ...)
   so the dashboard's Table widget and tabular inlines match this one.

   Included, not a macro, so it shares list_content.html's ambient
   context (rows, list_display, model_admin, ordering, actions,
   permissions, base_path, reorderable).

   Row actions are one dropdown trigger rather than a row of icon
   buttons. Built inline instead of through a shared dropdown-menu
   partial: Delete needs hx-delete/hx-confirm on an item, which a
   data-only item list cannot express.

   Reorderable drag-and-drop is visual only: SortableJS reorders the
   <tr> elements with no onEnd handler and nothing hydrated from a data
   attribute, so there is no state to keep in sync and the next sort,
   search, page, or reload simply re-renders the server's real order.
   That is also why x-init sits on <tbody> with no x-data: htmx's
   outerHTML swap replaces this whole component, and Alpine re-runs
   x-init on what it discovers, so the drag survives a swap for
   free. #}
{# selectAll state lives here, not on the bulk-actions form: the header
   checkbox is inside this table and the form is a sibling in the
   toolbar (linked by the HTML form= attribute), so Alpine state cannot
   span them. The form's hidden flag is written imperatively for the
   same reason. #}
<div class="{{ ui('table', 'wrapper') }}"
     x-data="{
       pageTicked: false,
       allMatching: false,
       total: {{ page.total_count }},
       onPage: {{ rows | length }},
       setFlag() {
         var input = document.querySelector('#bulk-actions-form [name=\'_select_all\']');
         if (input) input.value = this.allMatching ? '1' : '';
       },
       tickPage(checked) {
         this.pageTicked = checked;
         if (!checked) { this.allMatching = false; }
         this.setFlag();
         document.querySelectorAll('.row-checkbox').forEach(function (cb) { cb.checked = checked; });
       },
     }">
  {% if actions %}
  {# Only worth offering when there is more to select than is on screen. #}
  <div x-show="pageTicked && total > onPage" x-cloak class="{{ ui('table', 'select-all') }}">
    <span x-show="!allMatching">
      {{ ngettext("The %(num)d on this page is selected.", "All %(num)d on this page are selected.", rows|length) }}
    </span>
    <button type="button" x-show="!allMatching"
            @click="allMatching = true; setFlag()"
            class="{{ ui('table', 'select-all-action') }}">
      {{ ngettext("Select the %(num)d matching", "Select all %(num)d matching", page.total_count) }}
    </button>
    <span x-show="allMatching" x-cloak>
      {{ ngettext("The %(num)d matching this filter is selected.", "All %(num)d matching this filter are selected.", page.total_count) }}
    </span>
    <button type="button" x-show="allMatching" x-cloak
            @click="allMatching = false; setFlag()"
            class="{{ ui('table', 'select-all-action') }}">
      {{ _("Clear selection") }}
    </button>
  </div>
  {% endif %}
  <div class="{{ ui('table', 'scroll') }}">
  <table class="{{ ui('table') }}">
    <thead class="{{ ui('table', 'head') }}">
      <tr>
        {% if reorderable %}<th scope="col" class="w-8"></th>{% endif %}
        {% if actions %}
        <th scope="col" class="w-10 px-4 py-2.5">
          <input type="checkbox" title="{{ _('Select all') }}"
                 @change="tickPage($event.target.checked)"
                 class="{{ ui('checkbox') }}">
        </th>
        {% endif %}
        {# The header is a dropdown offering Asc/Desc explicitly rather
           than a link that cycles: with a cycling link you cannot tell
           what a click will do until you try it. Both choices are real
           hrefs, so sorting works with JS off. #}
        {% for name in list_display %}
        {% set sorted_by = sort_controls[name] %}
        <th scope="col" class="{{ ui('table', 'th') }}"
            {% if sorted_by.direction == "asc" %}aria-sort="ascending"{% elif sorted_by.direction == "desc" %}aria-sort="descending"{% endif %}>
          {% if not sorted_by.sortable %}
          {# Outside sortable_by: a plain label, with no menu and no sort
             URLs to hand-type either -- the server drops them. #}
          <span class="inline-flex h-8 items-center">{{ _(model_admin.get_field(name).label) }}</span>
          {% else %}
          <div class="relative inline-flex" x-data="{ open: false }"
               @keydown.escape="open = false" @click.outside="open = false">
            <button type="button" x-ref="sort{{ loop.index }}" @click="open = !open"
                    :aria-expanded="open ? 'true' : 'false'" aria-haspopup="menu"
                    class="-ml-3 h-8 gap-1 {{ ui('button', 'ghost-muted', 'size-xs') }} data-[state=open]:bg-accent">
              {{ _(model_admin.get_field(name).label) }}
              {%- if sorted_by.direction == "asc" %}{{ icon("arrow-up", "size-3.5") }}
              {%- elif sorted_by.direction == "desc" %}{{ icon("arrow-down", "size-3.5") }}
              {%- else %}{{ icon("chevrons-up-down", "size-3.5 opacity-50") }}{% endif %}
            </button>
            <div x-show="open" x-cloak role="menu"
                 x-anchor.bottom-start.offset.6="$refs.sort{{ loop.index }}"
                 x-transition:enter="transition ease-out duration-150"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100"
                 class="{{ ui('dropdown', 'content') }} min-w-32">
              <a href="{{ sorted_by.asc_url }}" role="menuitem" @click="open = false"
                 hx-get="{{ sorted_by.asc_url }}" hx-target="#resource-list" hx-select="#resource-list"
                 hx-swap="outerHTML" hx-push-url="true"
                 class="{{ ui('dropdown', 'item') }} {{ 'font-medium text-foreground' if sorted_by.direction == 'asc' else '' }}">
                {{ icon("arrow-up", "size-4 shrink-0 text-muted-foreground") }}<span class="truncate">{{ _("Asc") }}</span>
              </a>
              <a href="{{ sorted_by.desc_url }}" role="menuitem" @click="open = false"
                 hx-get="{{ sorted_by.desc_url }}" hx-target="#resource-list" hx-select="#resource-list"
                 hx-swap="outerHTML" hx-push-url="true"
                 class="{{ ui('dropdown', 'item') }} {{ 'font-medium text-foreground' if sorted_by.direction == 'desc' else '' }}">
                {{ icon("arrow-down", "size-4 shrink-0 text-muted-foreground") }}<span class="truncate">{{ _("Desc") }}</span>
              </a>
            </div>
          </div>
          {% endif %}
        </th>
        {% endfor %}
        <th scope="col" class="w-8"></th>
      </tr>
    </thead>
    <tbody class="{{ ui('table', 'body') }}"
           {% if reorderable %}x-init="window.Sortable && Sortable.create($el, { handle: '.drag-handle', animation: 150 })"{% endif %}>
      {% for row in rows %}
      <tr id="row-{{ row.pk }}" class="{{ ui('table', 'row') }}">
        {% if reorderable %}
        <td class="px-2 py-2.5">
          <button type="button" tabindex="-1" title="{{ _('Drag to reorder (not saved)') }}"
                  class="drag-handle cursor-grab {{ ui('button', 'ghost-muted', 'size-icon-xs') }}">
            {{ icon("menu", "w-3.5 h-3.5") }}<span class="sr-only">{{ _("Drag to reorder") }}</span>
          </button>
        </td>
        {% endif %}
        {% if actions %}
        <td class="px-4 py-2.5">
          <input type="checkbox" name="pks" value="{{ row.pk }}" form="bulk-actions-form" title="{{ _('Select row') }}"
                 @change="if (!$event.target.checked) { pageTicked = false; allMatching = false; setFlag(); }"
                 class="row-checkbox {{ ui('checkbox') }}">
        </td>
        {% endif %}
        {% for name in list_display %}
        <td class="{{ ui('table', 'cell') }}">
          {% set rendered = render_field_value(model_admin.get_field(name), row.cells[name], model_admin.get_empty_value()) %}
          {#- A cell named by list_display_links links to the record, unless it
              already contains an anchor -- a relation, chiefly. Nesting <a> in
              <a> is invalid HTML that browsers silently restructure. -#}
          {% if permissions.can_view and name in linked_columns and "<a " not in rendered %}
          <a href="{{ base_path }}/{{ model_admin.get_slug() }}/{{ row.pk }}{{ list_query }}" class="{{ ui('text', 'link') }}">{{ rendered }}</a>
          {%- else %}{{ rendered }}{% endif %}
        </td>
        {% endfor %}
        <td class="{{ ui('table', 'cell') }} text-right">
          {% if permissions.can_view or permissions.can_update or permissions.can_delete %}
          <div class="relative inline-flex" x-data="{ open: false }" @keydown.escape="open = false" @click.outside="open = false">
            <button type="button" x-ref="trigger" @click="open = !open"
                    :aria-expanded="open ? 'true' : 'false'" aria-haspopup="menu" aria-label="{{ _('Open menu') }}"
                    :class="open ? 'bg-accent text-accent-foreground' : ''"
                    class="{{ ui('button', 'ghost-muted', 'size-icon-sm') }}">
              {{ icon("dots-vertical", "w-4 h-4") }}
            </button>
            <div x-show="open" x-cloak role="menu"
                 x-anchor.bottom-end.offset.6="$refs.trigger"
                 x-transition:enter="transition ease-out duration-150"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-100"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-95"
                 class="{{ ui('dropdown', 'content') }} w-32">
              {% if permissions.can_view %}
              <a href="{{ base_path }}/{{ model_admin.get_slug() }}/{{ row.pk }}{{ list_query }}" role="menuitem" class="{{ ui('dropdown', 'item') }}">
                {{ icon("view", "w-4 h-4 shrink-0") }}<span class="truncate">{{ _("View") }}</span>
              </a>
              {% endif %}
              {% if permissions.can_update %}
              <a href="{{ base_path }}/{{ model_admin.get_slug() }}/{{ row.pk }}/edit{{ list_query }}" role="menuitem" class="{{ ui('dropdown', 'item') }}">
                {{ icon("edit", "w-4 h-4 shrink-0") }}<span class="truncate">{{ _("Edit") }}</span>
              </a>
              {% endif %}
              {% if permissions.can_delete %}
              {% if previews_deletes %}
              {# A previewing resource has something to say before the
                 delete, so the row leads to the page that says it. #}
              <a
                href="{{ base_path }}/{{ model_admin.get_slug() }}/{{ row.pk }}/delete{{ list_query }}"
                role="menuitem"
                class="{{ ui('dropdown', 'item') }} text-destructive hover:bg-destructive/10"
              >{{ icon("delete", "w-4 h-4 shrink-0") }}<span class="truncate">{{ _("Delete") }}</span></a>
              {% else %}
              <button
                type="button"
                role="menuitem"
                @click="open = false"
                class="{{ ui('dropdown', 'item') }} text-destructive hover:bg-destructive/10"
                hx-delete="{{ base_path }}/{{ model_admin.get_slug() }}/{{ row.pk }}/delete{{ list_query }}"
                hx-target="#row-{{ row.pk }}"
                hx-swap="outerHTML swap:0.2s"
                hx-confirm="{{ _('Delete this %(name)s?', name=_(model_admin.get_verbose_name())) }}"
              >{{ icon("delete", "w-4 h-4 shrink-0") }}<span class="truncate">{{ _("Delete") }}</span></button>
              {% endif %}
              {% endif %}
            </div>
          </div>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% if not rows %}
  <p class="{{ ui('table', 'empty') }}">{{ _("No records.") }}</p>
  {% endif %}
  </div>
</div>