{{--
    Table Component - AdminLTE 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,
    'bordered' => false,
])

<style>
    .table-lte-wrapper {
        position: relative;
        width: 100%;
        overflow-x: auto;
        border-radius: var(--lte-border-radius, 0.375rem);
        border: 1px solid var(--lte-border-color, #dee2e6);
        background-color: #fff;
    }
    .table-lte {
        width: 100%;
        margin-bottom: 0;
        color: #212529;
        vertical-align: top;
        border-collapse: collapse;
        font-size: 0.875rem;
    }
    .table-lte thead {
        background-color: #f8f9fa;
        border-bottom: 2px solid var(--lte-border-color, #dee2e6);
    }
    .table-lte tbody {
        background-color: #fff;
    }
    .table-lte tfoot {
        background-color: #f8f9fa;
        border-top: 2px solid var(--lte-border-color, #dee2e6);
        font-weight: 500;
    }
    .table-lte-striped tbody tr:nth-of-type(even) {
        background-color: rgba(0, 0, 0, 0.02);
    }
    .table-lte-hoverable tbody tr {
        transition: background-color var(--lte-transition-speed, 0.3s) ease;
    }
    .table-lte-hoverable tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.04);
    }
    .table-lte-bordered {
        border: 1px solid var(--lte-border-color, #dee2e6);
    }
    .table-lte-bordered th,
    .table-lte-bordered td {
        border: 1px solid var(--lte-border-color, #dee2e6);
    }
    .table-lte-compact th,
    .table-lte-compact td {
        padding: 0.375rem 0.75rem;
    }
    /* Dark mode */
    .dark .table-lte-wrapper {
        background-color: #1f2937;
        border-color: #374151;
    }
    .dark .table-lte {
        color: #e5e7eb;
    }
    .dark .table-lte thead {
        background-color: rgba(55, 65, 81, 0.5);
        border-bottom-color: #374151;
    }
    .dark .table-lte tbody {
        background-color: transparent;
    }
    .dark .table-lte tfoot {
        background-color: rgba(55, 65, 81, 0.5);
        border-top-color: #374151;
    }
    .dark .table-lte-striped tbody tr:nth-of-type(even) {
        background-color: rgba(255, 255, 255, 0.02);
    }
    .dark .table-lte-hoverable tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.04);
    }
    .dark .table-lte-bordered th,
    .dark .table-lte-bordered td {
        border-color: #374151;
    }
</style>

<div @class(['table-lte-wrapper' => $responsive])>
    <table 
        {{ $attributes->class([
            'table-lte',
            'table-lte-striped' => $striped,
            'table-lte-hoverable' => $hoverable,
            'table-lte-bordered' => $bordered,
            'table-lte-compact' => $compact,
        ]) }}
        data-hoverable="{{ $hoverable ? 'true' : 'false' }}"
        data-compact="{{ $compact ? 'true' : 'false' }}"
    >
        @if(isset($head))
            <thead>
                <tr>
                    {{ $head }}
                </tr>
            </thead>
        @endif
        <tbody>
            {{ $slot }}
        </tbody>
        @if(isset($foot))
            <tfoot>
                {{ $foot }}
            </tfoot>
        @endif
    </table>
</div>