polyadmin 0.1.0b1__py3-none-any.whl

polyadmin/templates/admin/components/ui/radio-group.html

@@ -0,0 +1,28 @@
+{# RadioGroup, ported from shadcn/ui.
+
+   Radix reimplements radio semantics on divs with a roving tabindex; a
+   native <input type="radio"> already has all of it -- one tab stop per
+   group, arrow keys within it, and a plain form submit -- so this keeps
+   the native control and takes only shadcn's layout and colouring.
+   Zero JS.
+
+   `choices` is a list of dicts: {"value": ..., "label": ...,
+   "help": ...(optional)}. #}
+{% macro radio_group(name, label, choices=(), selected=none) %}
+<fieldset class="mb-4">
+  <legend class="{{ ui('label') }}">{{ label }}</legend>
+  <div class="mt-2 space-y-2" role="radiogroup">
+    {% for choice in choices %}
+    <div class="flex items-start gap-2.5">
+      <input type="radio" id="radio-{{ name }}-{{ choice.value }}" name="{{ name }}" value="{{ choice.value }}"
+             {% if choice.value == selected %}checked{% endif %}
+             class="mt-0.5 {{ ui('radio') }}">
+      <span class="min-w-0">
+        <label for="radio-{{ name }}-{{ choice.value }}" class="{{ ui('label') }}">{{ choice.label }}</label>
+        {% if choice.get("help") %}<p class="{{ ui('field', 'description') }}">{{ choice.help }}</p>{% endif %}
+      </span>
+    </div>
+    {% endfor %}
+  </div>
+</fieldset>
+{% endmacro %}

polyadmin/templates/admin/components/ui/select.html

@@ -0,0 +1,165 @@
+{% from "admin/components/icons.html" import icon %}
+{# Select, ported from shadcn/ui -- a styled trigger and listbox for a
+   static choice list. A hidden input carries the posted value, so the
+   model layer never has to know it came from anything but a plain
+   <select>; Alpine owns only open/close and which option is shown as
+   the label.
+
+   Not used for manytomany, which keeps its native <select multiple>.
+
+   Args:
+     name         form field name
+     options      [(value, label), ...]
+     selected     the currently selected value, compared with `==`
+                  against each option's value
+     placeholder  shown when nothing is selected
+     disabled     bool #}
+{% macro select(name, options, selected=none, placeholder=_("Select…"), disabled=false, compact=false) %}
+{% set selected_label = namespace(value=none) %}
+{% for value, label in options %}
+{% if value == selected %}{% set selected_label.value = label %}{% endif %}
+{% endfor %}
+{# The initial label rides in as a data attribute and is read back with
+   $el.dataset, never interpolated into the x-data expression: tojson
+   emits a raw double quote, which closed this attribute early and left
+   Alpine parsing a truncated expression, so every select on the page
+   failed to initialise. #}
+{# Focus stays on the trigger and the arrow keys move a highlight it
+   reports through aria-activedescendant, rather than moving real focus
+   into the list. That means one focusable element instead of one per
+   option, so the options are tabindex="-1" and Tab leaves the control
+   rather than walking every choice. #}
+<div class="{{ ui('combobox') }}" data-label="{{ selected_label.value or placeholder }}"
+     x-data="adminSelect()" x-init="hydrate()" x-id="['select-option', 'select-listbox']"
+     @keydown.escape="closeToTrigger()" @click.outside="close()">
+  <input type="hidden" name="{{ name }}" x-ref="hiddenInput" value="{{ selected if selected is not none else '' }}">
+  <button type="button" x-ref="trigger" @click="toggle()"
+          :aria-expanded="open ? 'true' : 'false'" aria-haspopup="listbox"
+          :aria-controls="$id('select-listbox')"
+          :aria-activedescendant="open ? activeId : null"
+          @keydown.down.prevent="openAndMove(1)"
+          @keydown.up.prevent="openAndMove(-1)"
+          @keydown.enter.prevent="open ? chooseActive() : openAndMove(1)"
+          @keydown.space.prevent="open ? chooseActive() : openAndMove(1)"
+          @keydown.home.prevent="if (open) setActive(optionEls()[0])"
+          @keydown.end.prevent="if (open) setActive(optionEls().slice(-1)[0])"
+          {% if disabled %}disabled{% endif %}
+          class="{{ ui('select', 'cell') if compact else ui('select') }} justify-between gap-2">
+    <span x-text="label" class="truncate text-left"></span>
+    {{ icon("chevron-down", "w-3.5 h-3.5 shrink-0 text-muted-foreground") }}
+  </button>
+  {# Portalled to <body>, as Radix does -- see the relation combobox in
+     ui/field.html. A select in a table cell is the case that needs it:
+     the row clips anything taller than itself. #}
+  <template x-teleport="body">
+  <div x-show="open" x-cloak role="listbox" :id="$id('select-listbox')" x-ref="options"
+       x-anchor.bottom-start.offset.4="$refs.trigger"
+       x-effect="if (open && $refs.trigger) { $el.style.width = 'auto'; $el.style.minWidth = $refs.trigger.offsetWidth + 'px'; }"
+       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('combobox', 'content') }}">
+    {% for value, label in options %}
+    <div role="option" tabindex="-1" :id="$id('select-option', {{ loop.index0 }})"
+         data-value="{{ value }}" data-label="{{ label }}"
+         :aria-selected="value === $el.dataset.value ? 'true' : 'false'"
+         @click="choose($el)"
+         class="{{ ui('combobox', 'item') }}">{{ label }}</div>
+    {% endfor %}
+    {% if not options %}<div class="{{ ui('combobox', 'empty') }}">{{ _("No options.") }}</div>{% endif %}
+  </div>
+  </template>
+</div>
+{% endmacro %}
+
+{% macro select_script() %}
+<script>
+  // Idempotent global, same pattern as window.adminMultiSelect and
+  // window.adminCalendar -- a form may hold several selects, but only
+  // the first copy defines the factory.
+  window.adminSelect = window.adminSelect || function () {
+    // Single space-free class, added and removed with classList (see
+    // ui("combobox", "item-active")) rather than an x-bind, because the
+    // options are server-rendered in a Jinja loop, not an x-for.
+    var ACTIVE = "{{ ui('combobox', 'item-active') }}";
+    return {
+      open: false,
+      label: "",
+      // Mirrors the hidden input so aria-selected can be bound; the
+      // input stays the source of truth for what actually posts.
+      value: "",
+      activeEl: null,
+      activeId: "",
+
+      hydrate() {
+        this.label = this.$el.dataset.label;
+        this.value = this.$refs.hiddenInput.value;
+      },
+
+      optionEls() {
+        return Array.from(this.$refs.options.children).filter(function (el) {
+          return el.dataset.value !== undefined;
+        });
+      },
+
+      setActive(el) {
+        this.optionEls().forEach(function (o) { o.classList.remove(ACTIVE); });
+        this.activeEl = el || null;
+        this.activeId = el ? el.id : "";
+        if (el) {
+          el.classList.add(ACTIVE);
+          el.scrollIntoView({ block: "nearest" });
+        }
+      },
+
+      clearActive() { this.setActive(null); },
+
+      // Opening highlights whatever is already chosen, so the arrow
+      // keys continue from the current value rather than the top.
+      syncActive() {
+        var self = this;
+        var opts = this.optionEls();
+        this.setActive(opts.find(function (el) { return el.dataset.value === self.value; }) || opts[0]);
+      },
+
+      toggle() {
+        this.open = !this.open;
+        if (this.open) { this.syncActive(); } else { this.clearActive(); }
+      },
+
+      close() { this.open = false; this.clearActive(); },
+
+      // Escape and choosing both return focus to the trigger -- it is
+      // the only focusable part of the control, so without this the
+      // focus ring would be left on nothing.
+      closeToTrigger() { var wasOpen = this.open; this.close(); if (wasOpen) this.$refs.trigger.focus(); },
+
+      openAndMove(delta) {
+        if (!this.open) { this.open = true; this.syncActive(); return; }
+        this.move(delta);
+      },
+
+      move(delta) {
+        var opts = this.optionEls();
+        if (!opts.length) return;
+        var i = opts.indexOf(this.activeEl);
+        i = i < 0 ? (delta > 0 ? 0 : opts.length - 1) : (i + delta + opts.length) % opts.length;
+        this.setActive(opts[i]);
+      },
+
+      choose(el) {
+        this.label = el.dataset.label;
+        this.value = el.dataset.value;
+        this.$refs.hiddenInput.value = el.dataset.value;
+        this.$refs.hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
+        this.closeToTrigger();
+      },
+
+      chooseActive() { if (this.activeEl) this.choose(this.activeEl); },
+    };
+  };
+</script>
+{% endmacro %}

polyadmin/templates/admin/components/ui/sidebar.html

@@ -0,0 +1,175 @@
+{# Sidebar, ported from shadcn/ui's sidebar-07 block. Three regions, as
+   the block has them: the brand header, one group of menu items (a
+   category becomes a Collapsible with a sub-menu), and a footer showing
+   who is signed in. Plus the rail on the outer edge.
+
+   `collapsed` (the desktop icon rail) and `sidebarOpen` (the mobile
+   sheet) both come from base.html's provider, and are separate axes on
+   purpose: a phone gets the overlay, never the rail.
+
+   Collapsing hides labels rather than re-templating, so there is one
+   copy of the nav. Each label sits in an `x-show="!collapsed"` span
+   while the icon stays put -- nav-item's p-2 plus a size-4 icon is
+   exactly the 3rem collapsed width, so nothing slides sideways as the
+   width animates.
+
+   md:sticky, not md:static, undoes the sheet's `fixed`: the rail is
+   absolutely positioned against the aside, and a static aside handed it
+   to the page, parking it on the viewport's right edge.
+
+   Included, not a macro, so it shares base.html's ambient context.
+   `icon` rides in on that context; csrf_field does not, since base.html
+   has no form of its own, so the sign-out form imports it here. #}
+{% from "admin/components/csrf-field.html" import csrf_field %}
+
+{# The footer's identity block: avatar, name and role. Its own macro
+   because the footer renders it in two shapes -- as the trigger of the
+   user menu, and, with no session to sign out of, as a plain row with
+   nothing to open.
+
+   Principal names are never translated, except the framework's own
+   default (AllowAllAuthenticator's "Anonymous"). #}
+{% macro sidebar_user(principal) %}
+{% set display_name = principal.display_name or principal.id %}
+{% if display_name == "Anonymous" %}{% set display_name = _(display_name) %}{% endif %}
+<span class="{{ ui('avatar') }} size-8 rounded-lg">
+  <span class="{{ ui('avatar', 'fallback') }} rounded-lg">{{ display_name[:2] | upper }}</span>
+</span>
+<span x-show="!collapsed" class="grid flex-1 text-left leading-tight">
+  <span class="truncate font-medium text-foreground">{{ display_name }}</span>
+  <span class="truncate text-xs text-muted-foreground">
+    {{ _("Superuser") if principal.is_superuser else _("Signed in") }}
+  </span>
+</span>
+{% endmacro %}
+<aside x-cloak
+       :class="[
+         sidebarOpen ? 'translate-x-0' : '-translate-x-full',
+         collapsed ? '{{ ui('sidebar', 'collapsed') }}' : '{{ ui('sidebar', 'expanded') }}'
+       ]"
+       class="{{ ui('sheet', 'content') }} {{ ui('sheet', 'side-left') }} {{ ui('sidebar') }}
+              !w-72 md:!w-auto md:sticky md:top-0 md:h-screen md:!transform-none md:shadow-none">
+
+  {# -- SidebarHeader: the block's TeamSwitcher slot -- #}
+  <div class="{{ ui('sidebar', 'header') }}">
+    <a href="{{ base_path }}" class="{{ ui('nav-item') }} {{ ui('nav-item', 'inactive') }} {{ ui('nav-item', 'size-lg') }}">
+      <span class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+        {% if site_logo_url %}
+        <img src="{{ site_logo_url }}" alt="" class="size-5 rounded object-contain">
+        {% else %}
+        <span class="text-xs font-semibold">{{ site_title[:2] | upper }}</span>
+        {% endif %}
+      </span>
+      <span x-show="!collapsed" class="grid flex-1 text-left leading-tight">
+        <span class="truncate font-semibold text-foreground">{{ _(site_title) }}</span>
+        <span class="truncate text-xs text-muted-foreground">{{ _("Admin") }}</span>
+      </span>
+    </a>
+  </div>
+
+  {# -- SidebarContent: the block's NavMain -- #}
+  <div class="{{ ui('sidebar', 'content') }}">
+    <div class="{{ ui('sidebar', 'group') }}">
+      <div x-show="!collapsed" class="{{ ui('sidebar', 'group-label') }}">{{ _("Platform") }}</div>
+      <nav class="{{ ui('sidebar', 'menu') }}">
+        <a href="{{ base_path }}" :title='collapsed ? {{ _("Dashboard")|tojson }} : null'
+           class="{{ ui('nav-item') }} {{ ui('nav-item', 'active') if not model_admin else ui('nav-item', 'inactive') }}">
+          {{ icon("home", "size-4 shrink-0") }}
+          <span x-show="!collapsed" class="truncate">{{ _("Dashboard") }}</span>
+        </a>
+        {% for entry in nav_items %}
+          {% if entry.type == "link" %}
+          <a href="{{ entry.url }}" :title='collapsed ? {{ _(entry.label)|tojson }} : null'
+             class="{{ ui('nav-item') }} {{ ui('nav-item', 'active') if entry.active else ui('nav-item', 'inactive') }}">
+            {{ icon(entry.icon, "size-4 shrink-0") }}
+            <span x-show="!collapsed" class="truncate">{{ _(entry.label) }}</span>
+          </a>
+          {% else %}
+          {# Collapsed to the icon rail there is nowhere to put a
+             sub-menu, so the group behaves as a plain link to its first
+             child rather than expanding into nothing. #}
+          <div x-data="{ open: {{ entry.active | tojson }} }">
+            <a x-show="collapsed" href="{{ entry.links[0].url if entry.links else base_path }}"
+               :title='{{ _(entry.label)|tojson }}'
+               class="{{ ui('nav-item') }} {{ ui('nav-item', 'active') if entry.active else ui('nav-item', 'inactive') }}">
+              {{ icon(entry.icon, "size-4 shrink-0") }}
+            </a>
+            <button type="button" x-show="!collapsed" @click="open = !open"
+                    :aria-expanded="open ? 'true' : 'false'"
+                    class="{{ ui('nav-item') }} {{ ui('nav-item', 'inactive') }}">
+              {{ icon(entry.icon, "size-4 shrink-0") }}
+              <span class="flex-1 truncate">{{ _(entry.label) }}</span>
+              <span :class="open ? 'rotate-90' : ''" class="ml-auto transition-transform duration-200">
+                {{ icon("chevron-right", "size-4") }}
+              </span>
+            </button>
+            <div x-show="open && !collapsed" x-collapse class="{{ ui('sidebar', 'menu-sub') }}">
+              {% for link in entry.links %}
+              <a href="{{ link.url }}"
+                 class="{{ ui('nav-item') }} {{ ui('nav-item', 'active') if link.active else ui('nav-item', 'inactive') }}">
+                <span class="truncate">{{ _(link.label) }}</span>
+              </a>
+              {% endfor %}
+            </div>
+          </div>
+          {% endif %}
+        {% endfor %}
+      </nav>
+    </div>
+  </div>
+
+  {# -- SidebarFooter: the block's NavUser -- #}
+  {% if principal %}
+  <div class="{{ ui('sidebar', 'footer') }}">
+    {% if can_sign_out %}
+    <div class="relative" x-data="{ open: false }" @keydown.escape="open = false" @click.outside="open = false">
+      <button type="button" x-ref="userTrigger" @click="open = !open"
+              :aria-expanded="open ? 'true' : 'false'" aria-haspopup="menu"
+              :class="open ? 'bg-accent text-accent-foreground' : ''"
+              class="{{ ui('nav-item') }} {{ ui('nav-item', 'inactive') }} {{ ui('nav-item', 'size-lg') }}">
+        {{ sidebar_user(principal) }}
+        <span x-show="!collapsed">{{ icon("chevrons-up-down", "ml-auto size-4") }}</span>
+      </button>
+      {# side="right" like the block's desktop placement -- the footer is
+         at the very bottom, so a downward menu would open offscreen.
+
+         The menu holds actions only. The trigger it opens from sits
+         directly beside it and already shows who you are, so repeating
+         the name and role in here was a header that told the reader
+         nothing they could not already see. #}
+      <div x-show="open" x-cloak role="menu"
+           x-anchor.right-end.offset.8="$refs.userTrigger"
+           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-56">
+        {# No Dashboard entry here: the nav above already opens with
+           one, and a second link to the same place inside the user menu
+           is just noise. #}
+        {# A form, not a link: a logout reachable by GET is one any
+           <img src> on the internet can fire at a signed-in admin, so
+           it posts and carries the CSRF token. #}
+        <form method="post" action="{{ base_path }}/logout">
+          {{ csrf_field(csrf_token) }}
+          <button type="submit" role="menuitem" class="{{ ui('dropdown', 'item') }} w-full">
+            {{ icon("logout", "size-4") }}
+            <span>{{ _("Sign out") }}</span>
+          </button>
+        </form>
+      </div>
+    </div>
+    {% else %}
+    {# No login backend, so there is no session to end and nothing else
+       the menu would hold: the footer is just who you are, and opening
+       an empty menu would be a dead end. #}
+    <div class="{{ ui('nav-item') }} {{ ui('nav-item', 'inactive') }} {{ ui('nav-item', 'size-lg') }}">
+      {{ sidebar_user(principal) }}
+    </div>
+    {% endif %}
+  </div>
+  {% endif %}
+
+  {# -- SidebarRail -- #}
+  <button type="button" @click="toggle()" tabindex="-1" aria-label="{{ _('Toggle sidebar') }}"
+          class="{{ ui('sidebar', 'rail') }}"></button>
+</aside>

polyadmin/templates/admin/components/ui/slider.html

@@ -0,0 +1,22 @@
+{# Slider, ported from shadcn/ui.
+
+   Radix builds the track and thumb from divs driven by pointer events;
+   a native <input type="range"> already does that, including keyboard
+   arrows and posting with a plain form submit. So this keeps the native
+   control, tints it with `accent-primary`, and uses Alpine only for the
+   value readout beside it. #}
+{% macro slider(name, label, min=0, max=100, step=1, value=0, suffix=none) %}
+<div class="mb-4" x-data="{ value: {{ value }} }">
+  <div class="flex items-baseline justify-between gap-2">
+    <label for="slider-{{ name }}" class="{{ ui('label') }}">{{ label }}</label>
+    <output for="slider-{{ name }}" class="{{ ui('slider', 'output') }}">
+      <span x-text="value">{{ value }}</span>{% if suffix %}{{ suffix }}{% endif %}
+    </output>
+  </div>
+  <div class="mt-2 {{ ui('slider') }}">
+    <input type="range" id="slider-{{ name }}" name="{{ name }}"
+           min="{{ min }}" max="{{ max }}" step="{{ step }}" value="{{ value }}"
+           x-model="value" class="{{ ui('slider', 'track') }}">
+  </div>
+</div>
+{% endmacro %}

polyadmin/templates/admin/components/ui/switch.html

@@ -0,0 +1,36 @@
+{# Switch, ported from shadcn/ui.
+
+   Radix renders a <button role="switch"> with a hidden input kept in
+   sync. This is a native checkbox instead, visually identical: the
+   input is sr-only and the track and thumb are its siblings, driven
+   entirely by peer-checked:, so the switch toggles with no JavaScript
+   at all.
+
+   It posts exactly like a checkbox -- the field's name with value
+   "true" when on, nothing when off -- and is read as `== "true"`, so
+   absent reads as false.
+
+   The generated boolean field renders this control inline with its
+   label; this wrapper is for custom pages, which want the label and
+   help text laid out for them. #}
+{% macro switch_control(name, id, checked=false, disabled=false) %}
+<label class="{{ ui('switch') }}">
+  <input type="checkbox" id="{{ id }}" name="{{ name }}" value="true" autocomplete="off"
+         role="switch"
+         {% if checked %}checked{% endif %}
+         {% if disabled %}disabled{% endif %}
+         class="{{ ui('switch', 'input') }}">
+  <span class="{{ ui('switch', 'track') }}"></span>
+  <span class="{{ ui('switch', 'thumb') }}"></span>
+</label>
+{% endmacro %}
+
+{% macro switch(name, label, checked=false, help=none) %}
+<div class="mb-4 {{ ui('field', 'row') }}">
+  {{ switch_control(name, "switch-" ~ name, checked) }}
+  <span class="{{ ui('field', 'row-text') }}">
+    <label for="switch-{{ name }}" class="{{ ui('label') }}">{{ label }}</label>
+    {% if help %}<p class="{{ ui('field', 'description') }}">{{ help }}</p>{% endif %}
+  </span>
+</div>
+{% endmacro %}

polyadmin/templates/admin/components/ui/table.html

@@ -0,0 +1,221 @@
+{% 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>