{{--
   Inputs (from x-dash-data-table):
     $rows       Paginator
     $columns    list of ['key'=>..., 'label'=>..., 'sortable'=>bool]
     $sort       current sort key   (component listens to a parent property)
     $direction  'asc' | 'desc'
     $selectable bool                (renders the row-selection checkboxes)

   Slots:
     filters   row above the toolbar (search + chips)
     actions   right side of toolbar (e.g. "New")
     bulk      bulk-actions bar (always rendered; you decide when to show it)
     row       per-row content (receives $row via @scope)
     empty     shown when paginator is empty
--}}
<div class="dash-card p-0 overflow-hidden">
    @if (isset($filters) || isset($actions))
        <div class="dash-toolbar">
            <div class="flex flex-1 flex-wrap items-center gap-2">
                {{ $filters ?? '' }}
            </div>
            <div class="flex items-center gap-2">
                {{ $actions ?? '' }}
            </div>
        </div>
    @endif

    @if (isset($bulk))
        <div>{{ $bulk }}</div>
    @endif

    <div class="overflow-x-auto">
        <table class="dash-table">
            <thead>
            <tr>
                @if ($selectable)
                    <th class="w-10 px-4 py-3">
                        <input type="checkbox"
                               class="dash-auth-checkbox"
                               x-on:change="$dispatch('table-select-all', { checked: $event.target.checked })">
                    </th>
                @endif

                @foreach ($columns as $col)
                    <th>
                        @if (! empty($col['sortable']))
                            <button type="button"
                                    wire:click="sortBy('{{ $col['key'] }}')"
                                    class="inline-flex items-center gap-1 transition-colors hover:text-[var(--accent)]">
                                {{ $col['label'] }}
                                @if ($sort === $col['key'])
                                    <flux:icon :icon="$direction === 'asc' ? 'arrow-up' : 'arrow-down'" class="size-3"/>
                                @endif
                            </button>
                        @else
                            {{ $col['label'] }}
                        @endif
                    </th>
                @endforeach

                <th class="w-px text-end">{{ __('dashboard::dashboard.fields.actions') }}</th>
            </tr>
            </thead>

            <tbody>
            @forelse ($rows as $row)
                {{ $slot->withAttributes(['row' => $row]) }}
            @empty
                <tr>
                    <td colspan="{{ count($columns) + ($selectable ? 2 : 1) }}"
                        class="px-4 py-16 text-center text-sm dash-muted">
                        {{ $empty ?? __('dashboard::dashboard.notifications.empty') }}
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <div class="dash-pagination">
        {{ $rows->links() }}
    </div>
</div>