{{#
	@name Table
	@desc The table component for sizeable content tables.
    @set page.article.table
#}}

<!-- /components/_table.antlers.html -->
<div class="size-{{ size }} my-4 overflow-auto">
    <table class="w-full bg-light border-collapse">
        {{ table }}
            {{ if first && first_row_headers }}
                <thead>
                    <tr>
                        {{ cells }}
                            <th class="px-3 xl:px-6 py-3 border-b border-neutral bg-neutral text-left text-xs font-bold text-white uppercase tracking-wider">{{ value }}</th>
                        {{ /cells }}
                    </tr>
                </thead>
                <tbody>
            {{ /if }}

            {{ if !first && first_row_headers || !first_row_headers }}
                {{ if first }}
                    <tbody>
                {{ /if }}

                <tr>
                    {{ cells }}
                        {{ if first && first_column_headers }}
                            <th class="px-3 xl:px-6 py-3 border-b border-neutral bg-neutral text-left text-xs font-bold text-white uppercase tracking-wider">{{ value }}</th>
                        {{ else }}
                            <td class="px-3 xl:px-6 py-3 whitespace-nowrap border-b border-neutral text-sm leading-3 text-neutral">{{ value }}</td>
                        {{ /if }}
                    {{ /cells }}
                </tr>

                {{ if last }}
                    </tbody>
                {{ /if }}
            {{ /if }}
        {{ /table }}
    </table>

    {{ partial:typography/caption }}
</div>
<!-- End: /components/_table.antlers.html -->