{{--
    Table Component - shadcn-style
    
    Usage:
    <x-proxmox::ui.table>
        <x-slot:head>
            <x-proxmox::ui.table-th>Name</x-proxmox::ui.table-th>
            <x-proxmox::ui.table-th>Status</x-proxmox::ui.table-th>
        </x-slot:head>
        <x-proxmox::ui.table-row>
            <x-proxmox::ui.table-td>Server 1</x-proxmox::ui.table-td>
            <x-proxmox::ui.table-td>Running</x-proxmox::ui.table-td>
        </x-proxmox::ui.table-row>
    </x-proxmox::ui.table>
--}}

@props([
    'striped' => false,
    'hoverable' => true,
    'responsive' => true,
    'compact' => false,
])

<div @class(['relative w-full overflow-auto' => $responsive])>
    <table 
        {{ $attributes->class([
            'w-full caption-bottom text-sm',
            '[&_tbody_tr:nth-child(even)]:bg-muted/50' => $striped,
        ]) }}
        data-hoverable="{{ $hoverable ? 'true' : 'false' }}"
        data-compact="{{ $compact ? 'true' : 'false' }}"
    >
        @if(isset($head))
            <thead class="[&_tr]:border-b">
                <tr class="border-b transition-colors">
                    {{ $head }}
                </tr>
            </thead>
        @endif
        <tbody class="[&_tr:last-child]:border-0">
            {{ $slot }}
        </tbody>
        @if(isset($foot))
            <tfoot class="border-t bg-muted/50 font-medium [&>tr]:last:border-b-0">
                {{ $foot }}
            </tfoot>
        @endif
    </table>
</div>