<div class="p-6 space-y-6">
    <div class="flex flex-wrap items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold">{{ __('صفحات الموقع') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('أنشئ أي عدد من الصفحات وصمّمها بالكامل من المنشئ') }}</p>
        </div>
        @can('settings.manage')
            <button type="button" wire:click="create"
                    class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2.5 text-white font-medium hover:bg-primary-700">
                <x-ui.icon name="plus" class="w-5 h-5" />
                {{ __('صفحة جديدة') }}
            </button>
        @endcan
    </div>

    @if (session('success'))
        <div class="rounded-lg bg-green-50 border border-green-200 text-green-800 px-4 py-3">{{ session('success') }}</div>
    @endif
    @if (session('error'))
        <div class="rounded-lg bg-red-50 border border-red-200 text-red-800 px-4 py-3">{{ session('error') }}</div>
    @endif

    {{-- Create / edit panel --}}
    @if ($showForm)
        <div class="rounded-xl border bg-white p-6 space-y-4">
            <h2 class="font-semibold text-lg">{{ $editingId ? __('تعديل الصفحة') : __('صفحة جديدة') }}</h2>

            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label for="pm-title" class="block text-sm font-medium mb-1.5">{{ __('اسم الصفحة (عربي)') }} *</label>
                    <input id="pm-title" type="text" wire:model="title" class="w-full rounded-lg border px-3 py-2">
                    @error('title') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label for="pm-title-en" class="block text-sm font-medium mb-1.5">{{ __('اسم الصفحة (إنجليزي)') }}</label>
                    <input id="pm-title-en" type="text" wire:model="title_en" dir="ltr" class="w-full rounded-lg border px-3 py-2">
                    @error('title_en') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label for="pm-slug" class="block text-sm font-medium mb-1.5">{{ __('الرابط') }}</label>
                    <input id="pm-slug" type="text" wire:model="slug" dir="ltr" placeholder="about-us"
                           class="w-full rounded-lg border px-3 py-2 font-mono text-sm">
                    <p class="text-xs text-gray-500 mt-1">{{ __('اتركه فارغًا ليُنشأ تلقائيًا') }}</p>
                    @error('slug') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label for="pm-layout" class="block text-sm font-medium mb-1.5">{{ __('التخطيط') }}</label>
                    <select id="pm-layout" wire:model="layout" class="w-full rounded-lg border px-3 py-2">
                        <option value="default">{{ __('افتراضي') }}</option>
                        <option value="full_width">{{ __('عرض كامل') }}</option>
                        <option value="narrow">{{ __('ضيق') }}</option>
                        <option value="landing">{{ __('صفحة هبوط') }}</option>
                        <option value="blank">{{ __('فارغ (بدون رأس أو تذييل)') }}</option>
                    </select>
                    @error('layout') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="md:col-span-2">
                    <label for="pm-meta" class="block text-sm font-medium mb-1.5">{{ __('وصف الصفحة لمحركات البحث') }}</label>
                    <textarea id="pm-meta" wire:model="meta_description" rows="2" class="w-full rounded-lg border px-3 py-2"></textarea>
                    @error('meta_description') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="flex flex-wrap gap-6">
                <label class="inline-flex items-center gap-2">
                    <input type="checkbox" wire:model="is_published" class="rounded"> <span>{{ __('منشورة') }}</span>
                </label>
                <label class="inline-flex items-center gap-2">
                    <input type="checkbox" wire:model="is_homepage" class="rounded"> <span>{{ __('الصفحة الرئيسية') }}</span>
                </label>
            </div>

            <div class="flex gap-3 pt-2">
                <button type="button" wire:click="save" wire:loading.attr="disabled" wire:target="save"
                        class="rounded-lg bg-primary-600 px-5 py-2.5 text-white font-medium">
                    <span wire:loading.remove wire:target="save">{{ __('حفظ') }}</span>
                    <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
                </button>
                <button type="button" wire:click="$set('showForm', false)" class="rounded-lg border px-5 py-2.5">{{ __('إلغاء') }}</button>
            </div>
        </div>
    @endif

    {{-- Filters --}}
    <div class="flex flex-wrap gap-3">
        <input type="search" wire:model.live.debounce.300ms="search" placeholder="{{ __('ابحث عن صفحة') }}"
               class="rounded-lg border px-3 py-2 flex-1 min-w-56" aria-label="{{ __('بحث') }}">
        <select wire:model.live="status" class="rounded-lg border px-3 py-2" aria-label="{{ __('الحالة') }}">
            <option value="">{{ __('كل الحالات') }}</option>
            <option value="published">{{ __('منشورة') }}</option>
            <option value="draft">{{ __('مسودة') }}</option>
        </select>
    </div>

    {{-- Table --}}
    <div class="rounded-xl border bg-white overflow-hidden" wire:loading.class="opacity-50 pointer-events-none">
        @if ($pages->isEmpty())
            <div class="p-12 text-center text-gray-500 space-y-3">
                <x-ui.icon name="document-text" class="w-10 h-10 mx-auto opacity-40" />
                <p>{{ __('لا توجد صفحات بعد') }}</p>
                @can('settings.manage')
                    <button type="button" wire:click="create" class="text-primary-600 font-medium">{{ __('أنشئ أول صفحة') }}</button>
                @endcan
            </div>
        @else
            <table class="w-full text-sm">
                <thead class="bg-gray-50 text-gray-600">
                    <tr>
                        <th scope="col" class="text-start px-4 py-3">
                            <button type="button" wire:click="sort('title')" class="font-semibold">{{ __('الصفحة') }}</button>
                        </th>
                        <th scope="col" class="text-start px-4 py-3">{{ __('الرابط') }}</th>
                        <th scope="col" class="text-start px-4 py-3">{{ __('العناصر') }}</th>
                        <th scope="col" class="text-start px-4 py-3">{{ __('الحالة') }}</th>
                        <th scope="col" class="text-start px-4 py-3">{{ __('إجراءات') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @foreach ($pages as $page)
                        <tr wire:key="page-{{ $page->id }}">
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2">
                                    <span class="font-medium">{{ $page->title ?: $page->title_en ?: $page->slug }}</span>
                                    @if ($page->is_homepage)
                                        <span class="text-xs bg-amber-100 text-amber-800 px-2 py-0.5 rounded-full">{{ __('الرئيسية') }}</span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-4 py-3 font-mono text-xs text-gray-500" dir="ltr">/{{ $page->slug }}</td>
                            <td class="px-4 py-3 text-gray-600">{{ $page->all_blocks_count }}</td>
                            <td class="px-4 py-3">
                                <span class="text-xs px-2 py-1 rounded-full {{ $page->is_published ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">
                                    {{ $page->is_published ? __('منشورة') : __('مسودة') }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex flex-wrap items-center gap-3">
                                    @can('settings.manage')
                                        <a href="{{ route('website.manage.builder', $page->id) }}" wire:navigate
                                           class="text-primary-600 font-medium">{{ __('تصميم') }}</a>
                                        <button type="button" wire:click="edit({{ $page->id }})" class="text-gray-600">{{ __('تعديل') }}</button>
                                        <button type="button" wire:click="togglePublish({{ $page->id }})" class="text-gray-600">
                                            {{ $page->is_published ? __('إلغاء النشر') : __('نشر') }}
                                        </button>
                                        <button type="button" wire:click="duplicate({{ $page->id }})" class="text-gray-600">{{ __('نسخ') }}</button>
                                        @unless ($page->is_homepage)
                                            <button type="button" wire:click="makeHomepage({{ $page->id }})" class="text-gray-600">{{ __('تعيين كرئيسية') }}</button>
                                            <button type="button" wire:click="delete({{ $page->id }})"
                                                    wire:confirm="{{ __('هل أنت متأكد من حذف هذه الصفحة؟') }}"
                                                    class="text-red-600">{{ __('حذف') }}</button>
                                        @endunless
                                    @endcan
                                    <a href="{{ $page->url() }}" target="_blank" rel="noopener" class="text-gray-500">{{ __('عرض') }}</a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>

    {{ $pages->links() }}
</div>
