{{--
    Table Component - TailServer Theme
    
    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,
])

@php
    $wrapperClasses = $responsive ? 'min-w-full overflow-x-auto rounded-xl border border-neutral/10' : '';
@endphp

<div class="{{ $wrapperClasses }}">
    <table 
        {{ $attributes->class([
            'min-w-full align-middle text-sm',
            '[&_tbody_tr:nth-child(even)]:bg-neutral/3' => $striped,
        ]) }}
        data-hoverable="{{ $hoverable ? 'true' : 'false' }}"
        data-compact="{{ $compact ? 'true' : 'false' }}"
    >
        @if(isset($head))
            <thead class="bg-gradient-to-b from-neutral/5 to-transparent">
                <tr class="border-b border-neutral/15">
                    {{ $head }}
                </tr>
            </thead>
        @endif
        <tbody>
            {{ $slot }}
        </tbody>
        @if(isset($foot))
            <tfoot>
                {{ $foot }}
            </tfoot>
        @endif
    </table>
</div>