{# ── Full table body (thead + tbody + empty state + pagination)
   Rendered by both list.html (initial page load) and list_rows.html
   (HTMX fragment swap on search / sort / page).
   The outer div "#pv-table-container" lives in list.html and is the
   htmx.ajax() swap target (swap: 'innerHTML'). #}

<div class="bg-neutral-primary border border-default rounded-xl overflow-hidden">
    <table class="w-full text-sm" data-pv-list-table>
        <thead class="bg-neutral-tertiary border-b border-default">
            {# Header row — checkbox gutter + column titles + sort + actions. #}
            <tr data-pv-header-row>
                {# Leftmost checkbox column — placeholder for future bulk selection. #}
                <th class="w-9 px-3 py-3" aria-label="Row select">
                    <span class="block w-3.5 h-3.5 rounded border border-default bg-neutral-primary/60"></span>
                </th>
                {% if sequence_field %}
                {# Drag-handle column: no title, narrow gutter. #}
                <th class="w-6 px-2 py-3"></th>
                {% endif %}
                {% for h in headers %}
                {# Drag icon removed from column headers per Nuru spec;
                   draggable attribute kept so JS column-reorder still works. #}
                <th data-field="{{ h.name }}"
                    draggable="true"
                    x-show="isColumnVisible('{{ h.name }}')"
                    x-cloak
                    class="group/th text-left px-4 py-3 text-xs font-semibold uppercase tracking-wider
                            text-body-subtle select-none whitespace-nowrap cursor-grab
                            data-[pv-drag-over=true]:bg-brand-soft/40">
                    <button class="inline-flex items-center gap-1 group/sort
                                   hover:text-heading transition-colors text-left"
                            @click="toggleSort('{{ h.name }}')"
                            type="button">
                        {{ h.label }}
                        <span class="transition-opacity"
                              :class="order.startsWith('{{ h.name }}')
                                      ? 'opacity-100 text-fg-brand'
                                      : 'opacity-0 group-hover/sort:opacity-50'">
                            <svg class="w-3 h-3 transition-transform" fill="none" stroke="currentColor"
                                 viewBox="0 0 24 24" stroke-width="2.5"
                                 :class="{ 'rotate-180': order === '{{ h.name }} DESC' }">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"/>
                            </svg>
                        </span>
                    </button>
                </th>
                {% endfor %}
                <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-body-subtle">
                    Actions
                </th>
            </tr>
        </thead>

        {# Grouped path — pair of <tbody>s per group:
             1. A header tbody with the clickable group title + count.
             2. A body tbody holding the actual rows, toggled by `open`.
           Splitting them lets us use a single Alpine scope for both
           while keeping the header always visible.
           Flat path falls through below when `groups` is None. #}
        {% if groups is not none %}
            {% for grp in groups %}
            {# One <tbody> per group. The Alpine `open` scope wraps the
               header + body rows so they all see the same toggle. #}
            <tbody class="divide-y divide-default" x-data="{ open: true }">
                <tr class="bg-neutral-tertiary/60 cursor-pointer select-none hover:bg-neutral-tertiary"
                    @click="open = !open">
                    <td class="px-4 py-3 text-xs font-semibold text-heading"
                        :colspan="gutterColumnCount() + visibleColumnCount() + 1">
                        <span class="inline-flex items-center gap-2">
                            <svg class="w-3 h-3 text-body-subtle transition-transform"
                                 :class="{ 'rotate-90': open }"
                                 fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
                            </svg>
                            <span>{{ grp.label }}</span>
                            <span class="text-2xs font-medium text-body-subtle">({{ grp.count }})</span>
                        </span>
                    </td>
                </tr>
                {% for row in grp.rows %}
                {% with row_extra='x-show="open"' %}
                {% include "list_row.html" %}
                {% endwith %}
                {% endfor %}
            </tbody>
            {% endfor %}
        {% else %}
        <tbody class="divide-y divide-default">
            {% for row in rows %}
            {% include "list_row.html" %}
            {% endfor %}
        </tbody>
        {% endif %}
    </table>

    {# Empty state #}
    {% if groups is not none %}
        {% set _is_empty = not groups %}
    {% else %}
        {% set _is_empty = not rows %}
    {% endif %}
    {% if _is_empty %}
    <div class="py-16 text-center">
        <svg class="mx-auto w-10 h-10 text-body-subtle/40 mb-3" fill="none" stroke="currentColor"
             viewBox="0 0 24 24" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75.125v-.875A1.125 1.125 0 013.375 16.5h17.25A1.125 1.125 0 0121.75 17.625V18.5M6 18.375V5.625m0 0A1.125 1.125 0 017.125 4.5h9.75A1.125 1.125 0 0118 5.625m-12 0h12"/>
        </svg>
        <p class="text-sm text-body-subtle">No records found</p>
    </div>
    {% endif %}
</div>

{# Pagination #}
<div id="pv-pagination" class="flex items-center justify-between text-xs text-body-subtle pt-3">
    {% include "list_pagination.html" %}
</div>