<?php

use App\Models\Page;
use Livewire\Volt\Component;

new class extends Component
{
    public function with(): array
    {
        return [
            'pages' => Page::query()
                ->whereIn('slug', ['terms', 'privacy'])
                ->orderBy('slug')
                ->get(),
        ];
    }
}; ?>

<div class="mx-auto max-w-7xl">
    <div class="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
        <div>
            <flux:heading size="xl">{{ __('pages.legal_pages') }}</flux:heading>
            <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ __('pages.legal_pages_description') }}</p>
        </div>
    </div>

    @if (session('success'))
        <flux:callout variant="success" class="mb-6">
            {{ session('success') }}
        </flux:callout>
    @endif

    <div class="space-y-0">
        @forelse ($pages as $page)
            <div
                wire:key="page-{{ $page->id }}"
                class="{{ $loop->first ? 'rounded-t-lg' : '' }} {{ $loop->last ? 'rounded-b-lg' : '' }} {{ ! $loop->first ? 'border-t-0' : '' }} border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-800"
            >
                <div class="flex flex-col gap-4 lg:flex-row lg:items-center">
                    <div class="flex-1">
                        <div class="flex items-center gap-3">
                            <flux:icon name="document-text" class="h-5 w-5 text-zinc-400" />
                            <div>
                                <h3 class="font-semibold text-zinc-900 dark:text-zinc-100">
                                    {{ $page->title_en }}
                                </h3>
                                <p class="text-sm text-zinc-500 dark:text-zinc-400" dir="rtl">
                                    {{ $page->title_ar }}
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="lg:w-32">
                        <flux:badge color="{{ $page->content_en || $page->content_ar ? 'green' : 'amber' }}" size="sm">
                            {{ $page->content_en || $page->content_ar ? __('pages.has_content') : __('pages.no_content') }}
                        </flux:badge>
                    </div>

                    <div class="lg:w-40">
                        <div class="text-sm text-zinc-500 dark:text-zinc-400">
                            {{ __('pages.last_updated') }}: {{ $page->updated_at->diffForHumans() }}
                        </div>
                    </div>

                    <div class="lg:w-32">
                        <flux:button
                            href="{{ route('admin.pages.edit', $page->slug) }}"
                            variant="primary"
                            size="sm"
                            wire:navigate
                        >
                            {{ __('common.edit') }}
                        </flux:button>
                    </div>
                </div>
            </div>
        @empty
            <div class="rounded-lg border border-zinc-200 bg-white py-12 text-center text-zinc-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400">
                <flux:icon name="document-text" class="mx-auto mb-4 h-12 w-12" />
                <p>{{ __('pages.no_pages') }}</p>
            </div>
        @endforelse
    </div>
</div>
