{% import "_macros.html" as m with context %}
{% macro select_all(which, root, scope) -%}
<input type="checkbox" aria-label="Select all" data-select-all="{{ which }}" data-select-scope="{{ scope }}" x-effect="$el.indeterminate = count > 0 && count < total; $el.checked = total > 0 && count === total" @change="$el.closest('{{ root }}').querySelectorAll($el.dataset.selectScope).forEach((c) => { c.checked = $el.checked; c.dispatchEvent(new Event('change', {bubbles: true})); })">
{%- endmacro %}
{% set params = result.params %}
{% set hx = 'hx-target="closest .hx-list"' ~ (' hx-push-url="true"' if push_url else '') %}
{% set selectable = push_url and (view.permitted_actions(request, bulk=True) or view.export_formats) %}
{% set row_actions = view.permitted_actions(request, bulk=False) if push_url else () %}
{% set actions = view.can_edit or view.can_delete or row_actions %}
{% if filters is defined and htmx %}
{% for filter in filters %}{{ m.filter_summary_span(filter, params.filter_value(filter.name), filter_options.get(filter.name, []), oob=True) }}{% endfor %}
{{ m.filter_reset(params.filters, oob=True) }}
{{ m.list_count(result.total, oob=True) }}
{{ m.export_menu_items(view, base_url, params, oob=True) }}
{% endif %}
{% if push_url %}
<div id="list-state">
  <input type="hidden" name="sort" value="{{ params.sort or '' }}">
  <input type="hidden" name="dir" value="{{ params.dir }}">
  <input type="hidden" name="size" value="{{ params.size }}">
</div>
{% endif %}
{% if result.total == 0 %}
{% set filtered = params.q or params.filters %}
{% if filtered %}
{{ m.empty_state('inbox', 'No ' ~ view.name_plural|lower ~ ' match these filters', action=m.button('Reset filters', 'secondary', href=base_url, attrs={'@click': '$event.preventDefault(); hxadminResetList()'}) if push_url else none, class='bg-surface') }}
{% else %}
{{ m.empty_state('inbox', 'No ' ~ view.name_plural|lower ~ ' yet', action=m.button('New ' ~ view.name|lower, 'primary', icon='plus', href=admin.url(request, '/' ~ view.identity ~ '/new')) if push_url and view.can_create else none, class='bg-surface') }}
{% endif %}
{% else %}
<div class="space-y-2 sm:hidden">
  {% if selectable %}
  <label class="flex items-center gap-3 px-3 text-sm text-fg-muted">
    {{ select_all('mobile', '.hx-list', 'input[id^=pk-mobile-]:not(:disabled)') }}
    Select all
  </label>
  {% endif %}
  {% for obj in result.rows %}
  <div class="rounded-lg border border-border bg-surface p-3 has-checked:border-accent/50 has-checked:bg-accent-soft/40">
    <div class="flex items-start gap-3">
      {% if selectable %}
      <input type="checkbox" id="pk-mobile-{{ view.pk_of(obj) }}" name="pks" value="{{ view.pk_of(obj) }}" form="bulk" :disabled="wide" aria-label="Select {{ view.display(obj) }}" class="mt-1">
      {% endif %}
      <div class="min-w-0 flex-1">
        <div class="flex items-center justify-between gap-2">
          {% set primary = view.list_fields|selectattr('name', 'equalto', view.link_name)|first %}
          {% if view.can_view %}
          <a href="{{ admin.url(request, '/' ~ view.identity ~ '/' ~ view.pk_of(obj)) }}" class="truncate font-medium text-accent hover:underline">{{ m.cell(view, primary, view.cell(obj, primary.name), link=False) }}</a>
          {% else %}
          <span class="truncate font-medium">{{ m.cell(view, primary, view.cell(obj, primary.name), link=False) }}</span>
          {% endif %}
          {% if actions %}{{ m.row_menu(view, obj, row_actions, id_prefix='card-') }}{% endif %}
        </div>
        {% set details = view.list_fields|rejectattr('name', 'equalto', view.link_name)|list %}
        {% if details %}
        <dl class="mt-1.5 space-y-1 text-sm">
          {% for field in details[:3] %}
          <div class="flex items-center gap-1.5"><dt class="text-fg-subtle">{{ field.label }}:</dt><dd class="text-fg-muted">{{ m.cell(view, field, view.cell(obj, field.name), link=False) }}</dd></div>
          {% endfor %}
        </dl>
        {% endif %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% call m.card(padded=False, class='hidden max-h-[calc(100dvh-16rem)] overflow-auto sm:block') %}
  <table class="w-full text-sm">
    <thead class="sticky top-0 z-10 bg-surface-2 text-left text-xs uppercase tracking-wide text-fg-muted">
      <tr>
        {% if selectable %}<th class="w-8 px-3 py-2">{{ select_all('desktop', 'table', 'input[name=pks]:not(:disabled)') }}</th>{% endif %}
        {% for field in view.list_fields %}
        <th class="px-3 py-2 font-medium{{ '' if field.name == view.stretch_name else ' w-px whitespace-nowrap' }}{{ ' text-right' if field.kind in ('int', 'float', 'decimal') else '' }}">
          {% if field.name in view.sort_names %}
            {% set active = params.sort == field.name %}
            {% set next_dir = 'desc' if active and params.dir == 'asc' else 'asc' %}
            <a href="{{ base_url }}?{{ params.qs(sort=field.name, dir=next_dir, page=1) }}"
               hx-get="{{ base_url }}?{{ params.qs(sort=field.name, dir=next_dir, page=1) }}" {{ hx|safe }}
               class="inline-flex items-center gap-1 hover:text-fg{{ ' justify-end' if field.kind in ('int', 'float', 'decimal') else '' }}">
              {{ field.label }}
              {% if active %}{{ m.icon('arrow-up' if params.dir == 'asc' else 'arrow-down', 'size-3') }}{% endif %}
            </a>
          {% else %}
            {{ field.label }}
          {% endif %}
        </th>
        {% endfor %}
        {% if view.stretch_name is none %}<th aria-hidden="true" class="p-0"></th>{% endif %}
        {% if actions %}<th class="w-0 px-3 py-2"></th>{% endif %}
      </tr>
    </thead>
    <tbody class="divide-y divide-border">
      {% for obj in result.rows %}
      <tr class="hover:bg-surface-2 has-checked:bg-accent-soft/40">
        {% if selectable %}<td class="px-3 py-2"><input type="checkbox" id="pk-desktop-{{ view.pk_of(obj) }}" name="pks" value="{{ view.pk_of(obj) }}" form="bulk" :disabled="!wide" aria-label="Select {{ view.display(obj) }}"></td>{% endif %}
        {% for field in view.list_fields %}
        <td class="px-3 py-2{{ '' if field.name == view.stretch_name else ' whitespace-nowrap' }}{{ ' text-right tabular-nums' if field.kind in ('int', 'float', 'decimal') else '' }}">{% if field.name == view.link_name and view.can_view %}<a href="{{ admin.url(request, '/' ~ view.identity ~ '/' ~ view.pk_of(obj)) }}" class="font-medium text-accent hover:underline">{{ m.cell(view, field, view.cell(obj, field.name), link=False) }}</a>{% else %}{{ m.cell(view, field, view.cell(obj, field.name), link=False) }}{% endif %}</td>
        {% endfor %}
        {% if view.stretch_name is none %}<td aria-hidden="true" class="p-0"></td>{% endif %}
        {% if actions %}
        <td class="px-3 py-2 text-right">{{ m.row_menu(view, obj, row_actions) }}</td>
        {% endif %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
{% endcall %}
{% include "list/_pagination.html" %}
{% if selectable %}{{ m.bulk_bar(view) }}{% endif %}
{% endif %}