<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-primary-600 dark:text-primary-300">{{ $pagina['subtitulo'] }}</p>
                <h1 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">{{ $pagina['titulo'] }}</h1>
                <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-600 dark:text-slate-400">{{ $pagina['descricao'] }}</p>
            </div>
        </div>
    </x-slot>

    <div class="flex min-h-[calc(100vh-13rem)] items-center justify-center">
        <section class="w-full max-w-2xl rounded-lg border border-slate-200 bg-white p-8 text-center shadow-soft dark:border-slate-800 dark:bg-slate-900">
            <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-lg bg-accent-50 text-accent-700 dark:bg-slate-800 dark:text-accent-300">
                <x-heroicon :name="$pagina['icone']" class="h-10 w-10" />
            </div>

            <h2 class="mt-6 text-2xl font-bold text-slate-950 dark:text-white">{{ $pagina['titulo'] }}</h2>
            <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">{{ $pagina['descricao'] }}</p>

            <div class="mt-8 rounded-lg border border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-sm font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-300">
                Funcionalidade administrativa em desenvolvimento.
            </div>
        </section>
    </div>
</x-app-layout>
