{{--
    Tabel reusable: bungkus card + scroll-x + <table>. Isi <thead> lewat slot :head,
    body lewat default slot (pakai <x-ui.table.row>/<x-ui.table.cell>), dan pagination
    lewat slot :footer.
--}}
<div {{ $attributes->merge(['class' => 'bg-white dark:bg-card rounded-xl border border-gray-200 dark:border-border overflow-hidden']) }}>
    <div class="overflow-x-auto">
        <table class="w-full">
            @isset($head)
                <thead>
                    <tr class="border-b border-gray-100 dark:border-border">
                        {{ $head }}
                    </tr>
                </thead>
            @endisset
            <tbody class="divide-y divide-gray-100 dark:divide-border">
                {{ $slot }}
            </tbody>
        </table>
    </div>
    @isset($footer)
        <div class="px-6 py-4 border-t border-gray-100 dark:border-border">{{ $footer }}</div>
    @endisset
</div>