{% comment %}
Component: Data Table (c-table)
Semantic table with scope="col", accessible caption, density, sticky header, and selectable options.
{% endcomment %}
<div class="overflow-x-auto border border-border rounded-lg bg-surface"
     {% if selectable %}
     x-data="{
        allSelected: false,
        indeterminate: false,
        selectedRows: [],
        toggleAll(e) {
            const checked = e.target.checked;
            this.allSelected = checked;
            this.indeterminate = false;
            const boxes = $el.querySelectorAll('tbody input[type=checkbox]');
            boxes.forEach(b => { b.checked = checked; });
            this.selectedRows = checked ? Array.from(boxes).map(b => b.value) : [];
        },
        updateRow() {
            const boxes = Array.from($el.querySelectorAll('tbody input[type=checkbox]'));
            const checked = boxes.filter(b => b.checked);
            this.allSelected = checked.length === boxes.length && boxes.length > 0;
            this.indeterminate = checked.length > 0 && checked.length < boxes.length;
            const h = $el.querySelector('thead input[type=checkbox]');
            if (h) {
                h.checked = this.allSelected;
                h.indeterminate = this.indeterminate;
            }
            this.selectedRows = checked.map(b => b.value);
        }
     }"
     {% endif %}>
    <table class="w-full text-left text-sm border-collapse">
        <caption class="sr-only">{{ caption|default:'Tabela de dados' }}</caption>
        <thead class="bg-surface-sunken border-b border-border text-xs text-muted font-medium{% if sticky_header %} sticky top-0 z-10 backdrop-blur{% endif %}">
            <tr>
                {% if selectable %}
                <th scope="col" class="{% if density == 'compact' %}py-1.5 px-3{% else %}py-2.5 px-4{% endif %} w-10">
                    <input type="checkbox"
                           aria-label="Selecionar todas as linhas"
                           @change="toggleAll($event)"
                           onchange="const c=this.checked; this.closest('table').querySelectorAll('tbody input[type=checkbox]').forEach(b=>{b.checked=c;});"
                           class="rounded border-control text-accent focus:ring-focus">
                </th>
                {% endif %}
                {% for col in columns %}
                <th scope="col" class="{% if density == 'compact' %}py-1.5 px-3{% else %}py-2.5 px-4{% endif %} font-semibold text-text whitespace-nowrap{% if col.align == 'right' %} text-right{% endif %}">
                    {{ col.label }}
                </th>
                {% endfor %}
            </tr>
        </thead>
        <tbody class="divide-y divide-border text-text">
            {% for row in rows %}
            <tr class="hover:bg-surface-sunken transition-colors">
                {% if selectable %}
                <td class="{% if density == 'compact' %}py-1.5 px-3{% else %}py-2.5 px-4{% endif %} w-10">
                    <input type="checkbox"
                           value="{% if row.id %}{{ row.id }}{% else %}{{ forloop.counter0 }}{% endif %}"
                           aria-label="Selecionar linha {{ forloop.counter }}"
                           @change="updateRow()"
                           onchange="const t=this.closest('table'); const bs=Array.from(t.querySelectorAll('tbody input[type=checkbox]')); const ck=bs.filter(b=>b.checked); const h=t.querySelector('thead input[type=checkbox]'); if(h){h.checked=(ck.length===bs.length&&bs.length>0); h.indeterminate=(ck.length>0&&ck.length<bs.length);}"
                           class="rounded border-control text-accent focus:ring-focus">
                </td>
                {% endif %}
                {% for cell in row %}
                <td class="{% if density == 'compact' %}py-1.5 px-3{% else %}py-2.5 px-4{% endif %} whitespace-nowrap">
                    {{ cell }}
                </td>
                {% endfor %}
            </tr>
            {% empty %}
            <tr>
                <td colspan="{% if selectable %}{{ columns|length|add:1 }}{% else %}{{ columns|length }}{% endif %}" class="py-8 text-center text-muted">
                    Nenhum registro encontrado.
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>