@extends('layouts.admin.app')

@section('title', __('pages/admin/components.nav.paginated_table'))

@section('content')
<x-layouts.admin.component-demo
    :title="__('pages/admin/components.nav.paginated_table')"
    :section="__('pages/admin/components.section.tables')"
    :subtitle="__('pages/admin/components.tables.paginated.subtitle')"
    :fullWidth="true"
>
    <div
        data-paginated-table-demo
        data-index-url="{{ route('admin.components.tables.paginated') }}"
    >
        <div class="mb-4 flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
            <div class="flex min-w-0 flex-wrap items-center gap-2">
                <div class="w-52 flex-shrink-0">
                    <x-forms.input
                        type="text"
                        name="search"
                        data-cb-search
                        icon="heroicon-o-magnifying-glass"
                        :placeholder="__('pages/admin/components.tables.paginated.search_placeholder')"
                        :value="request('search')"
                    />
                </div>

                <x-common.table-filter>
                    <div>
                        <x-forms.label class="mb-1.5 block text-xs font-medium text-foreground">
                            {{ __('pages/common.status.label') }}
                        </x-forms.label>
                        <x-forms.select
                            name="status"
                            data-cb-filter="status"
                            :options="[
                                '' => __('pages/admin/components.tables.paginated.filters.all_statuses'),
                                'active' => __('pages/common.status.active'),
                                'inactive' => __('pages/common.status.inactive'),
                            ]"
                            :selected="request('status')"
                        />
                    </div>

                    <div>
                        <x-forms.label class="mb-1.5 block text-xs font-medium text-foreground">
                            {{ __('form.label.role') }}
                        </x-forms.label>
                        <x-forms.select
                            name="role"
                            data-cb-filter="role"
                            :options="[
                                '' => __('pages/admin/components.tables.paginated.filters.all_roles'),
                                'Admin' => __('pages/admin/components.tables.roles.admin'),
                                'Editor' => __('pages/admin/components.tables.roles.editor'),
                                'Viewer' => __('pages/admin/components.tables.roles.viewer'),
                            ]"
                            :selected="request('role')"
                        />
                    </div>
                </x-common.table-filter>
            </div>
        </div>

        <div class="hidden" data-cb-skeleton-template>
            <div class="overflow-hidden rounded-xl border border-border bg-card">
                <div class="overflow-x-auto p-4">
                    <div class="space-y-3">
                        @for ($i = 0; $i < 5; $i++)
                            <x-skeleton.horizontal class="h-10 w-full rounded-lg" />
                        @endfor
                    </div>
                </div>
            </div>
        </div>

        <div class="hidden" data-cb-empty-template>
            <x-tables.empty-state :message="__('pages/admin/components.tables.paginated.empty_message')" />
        </div>

        <div id="table-container"></div>
    </div>
</x-layouts.admin.component-demo>
@endsection

@push('before-app-js')
@vite(['resources/js/admin/components/paginated-table.js'])
@endpush