@php
    $resolvedId = $id ?: 'cb-table-'.uniqid();

    $resolvedAjax = $ajax ?: request()->url();

    $resolvedOptions = array_merge([
        'defaultSort' => [
            'column' => 'created_at',
            'dir' => 'desc',
        ],
        'perPage' => 15,
    ], $options ?? []);

    $resolvedColumns = $columns ?? [];

    $showControls = (bool) ($resolvedOptions['showControls'] ?? true);
    $useHeadSlot = isset($head) && $head instanceof \Illuminate\View\ComponentSlot && $head->isNotEmpty();
    $useColgroupSlot = isset($colgroup) && $colgroup instanceof \Illuminate\View\ComponentSlot && $colgroup->isNotEmpty();
    $useLoadingSlot = isset($loading) && $loading instanceof \Illuminate\View\ComponentSlot && $loading->isNotEmpty();
    $useEmptySlot = isset($empty) && $empty instanceof \Illuminate\View\ComponentSlot && $empty->isNotEmpty();

    // Match legacy admin tables: avoid extra vertical gap between card + pagination (pagination uses mt-4).
    $rootClass = trim((string) ($resolvedOptions['rootClass'] ?? ($showControls ? 'space-y-3' : '')));

    $tableCellpadding = (int) ($resolvedOptions['cellpadding'] ?? 16);
@endphp

<div class="{{ $rootClass }}" data-cb-root data-ajax-url="{{ $resolvedAjax }}">

    {{-- Default controls (optional; can be hidden later via options) --}}
    @if($showControls)
        <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
            <div class="relative w-56 flex-shrink-0">
                <input
                    data-cb-search
                    type="text"
                    placeholder="{{ __('pages/common.search', ['resource' => __('pages/common.records')]) }}"
                    class="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring" />
            </div>

            <select
                data-cb-length
                class="rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring">
                @foreach([10, 15, 25, 50] as $n)
                    <option value="{{ $n }}" @selected(($resolvedOptions['perPage'] ?? 15) == $n)>{{ $n }}</option>
                @endforeach
            </select>
        </div>
    @endif

    @isset($filters)
        @if($filters instanceof \Illuminate\View\ComponentSlot)
            {{ $filters }}
        @endif
    @endisset

    <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 overflow-hidden" data-cb-table-shell>
        <div class="overflow-x-auto overflow-y-clip" id="table-container">
            <table
                id="{{ $resolvedId }}"
                @if($tableCellpadding > 0) cellpadding="{{ $tableCellpadding }}" @endif
                class="w-full table-fixed text-left text-sm text-muted-foreground"
                data-cb-table
                data-cb-ajax-url="{{ $resolvedAjax }}"
                data-cb-per-page="{{ (int) ($resolvedOptions['perPage'] ?? 15) }}"
                @if($actionsBase) data-cb-actions-base="{{ $actionsBase }}" @endif
                @if(!empty($resolvedOptions['defaultSort']['column'])) data-cb-default-sort="{{ $resolvedOptions['defaultSort']['column'] }}" @endif
                @if(!empty($resolvedOptions['defaultSort']['dir'])) data-cb-default-sort-dir="{{ $resolvedOptions['defaultSort']['dir'] }}" @endif
            >
                @if($useColgroupSlot)
                    {{ $colgroup }}
                @endif
                <thead class="bg-brand text-xs font-semibold uppercase tracking-wider text-brand-foreground">
                    <tr>
                        @if($useHeadSlot)
                            {{ $head }}
                        @elseif(!empty($resolvedColumns))
                            @foreach($resolvedColumns as $col)
                                @php
                                    $data = $col['data'] ?? '';
                                    $label = $col['label'] ?? $data;
                                    $type = $col['type'] ?? null;
                                    $sortable = $col['sortable'] ?? $col['orderable'] ?? true;
                                    $searchable = $col['searchable'] ?? true;
                                    $align = $col['align'] ?? ($data === '_actions' ? 'right' : 'left');
                                @endphp
                                <th
                                    data-column="{{ $data }}"
                                    @if($type) data-cb-type="{{ $type }}" @endif
                                    @if($sortable === false) data-orderable="false" @endif
                                    @if($searchable === false) data-searchable="false" @endif
                                    class="{{ $align === 'right' ? 'text-right' : '' }} select-none"
                                >
                                    <div class="inline-flex items-center gap-1.5">
                                        {{ $label }}
                                        <span class="inline-flex flex-col gap-0.5 ml-0.5 opacity-60">
                                            <svg class="w-2.5 h-2.5 transition-colors text-white/40" viewBox="0 0 10 6" fill="currentColor">
                                                <path d="M0 6l5-6 5 6z" />
                                            </svg>
                                            <svg class="w-2.5 h-2.5 transition-colors text-white/40" viewBox="0 0 10 6" fill="currentColor">
                                                <path d="M0 0l5 6 5-6z" />
                                            </svg>
                                        </span>
                                    </div>
                                </th>
                            @endforeach
                        @else
                            {{-- If no columns passed, developer may provide headers via the `head` slot with <th data-column=\"...\"> --}}
                            {{ $head ?? '' }}
                        @endif
                    </tr>
                </thead>

                <tbody id="table-loading-body" data-cb-loading-tbody>
                    @if($useLoadingSlot)
                        {{ $loading }}
                    @else
                        <tr class="border-t border-border bg-card">
                            <td class="align-middle" colspan="{{ max(1, count($resolvedColumns)) }}">
                                <div class="h-4 w-full animate-pulse rounded bg-surface-100 dark:bg-surface-700"></div>
                            </td>
                        </tr>
                    @endif
                </tbody>

                <tbody data-cb-tbody></tbody>
            </table>
        </div>
    </div>

    <div data-cb-pagination></div>

    <div data-cb-empty class="hidden">
        @if($useEmptySlot)
            {{ $empty }}
        @else
            <div class="flex flex-1 min-h-[220px] items-center justify-center py-10">
                <div class="w-full max-w-md rounded-2xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 px-8 py-10 text-center shadow-sm">
                    <h2 class="text-lg font-semibold text-surface-900 dark:text-white tracking-tight">
                        No records found.
                    </h2>
                    <p class="mt-2 text-sm text-surface-500 dark:text-surface-400 leading-relaxed">
                        Try adjusting your search or filters.
                    </p>
                </div>
            </div>
        @endif
    </div>

    {{-- Safe JSON config for the JS engine (no inline JS). --}}
    <script type="application/json" data-cb-config-for="{{ $resolvedId }}">
        {!! json_encode([
            'tableId' => $resolvedId,
            'ajaxUrl' => $resolvedAjax,
            'columns' => $resolvedColumns,
            'filters' => $filters ?? [],
            'options' => $resolvedOptions,
        ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
    </script>
</div>