@extends('layouts.admin', [
    'title' => 'Pages / Content | Admin | LottoData',
    'heading' => 'Pages / Content',
])

@section('content')
    <section class="rounded-[2rem] border border-white/10 bg-white/[0.04] p-6 lg:p-8">
        <div class="flex flex-col gap-3">
            <p class="text-sm font-semibold uppercase tracking-[0.35em] text-slate-400">Managed pages</p>
            <h2 class="text-3xl font-semibold text-white">Core V1 page content for About and Contact.</h2>
            <p class="max-w-3xl text-sm leading-8 text-slate-300">
                This keeps V1 content management simple: editable page records for page-level copy, and global settings for the homepage hero and footer/disclaimer text.
            </p>
        </div>

        @if (session('status'))
            <div class="mt-6 rounded-2xl border border-emerald-300/20 bg-emerald-300/10 px-4 py-3 text-sm text-emerald-100">
                {{ session('status') }}
            </div>
        @endif

        <div class="mt-8 grid gap-5 md:grid-cols-2">
            @forelse ($pages as $page)
                <article class="rounded-[1.75rem] border border-white/10 bg-slate-950/50 p-6">
                    <p class="text-xs uppercase tracking-[0.25em] text-slate-500">{{ $page->slug }}</p>
                    <h3 class="mt-3 text-2xl font-semibold text-white">{{ $page->title }}</h3>
                    <p class="mt-3 text-sm leading-7 text-slate-300">{{ $page->excerpt }}</p>
                    <a href="{{ route('admin.content.pages.edit', $page) }}" class="mt-5 inline-flex rounded-full border border-cyan-300/35 px-4 py-2 text-sm font-medium text-cyan-200 transition hover:border-cyan-200 hover:bg-cyan-300/10 hover:text-white">
                        Edit page
                    </a>
                </article>
            @empty
                <p class="text-slate-400">No managed pages found yet.</p>
            @endforelse
        </div>
    </section>
@endsection