@props(['title' => null, 'wide' => false])
<x-layouts.html :title="$title">
    <div class="flex min-h-full flex-col px-4 py-10 sm:px-6">
        <header class="mx-auto mb-8 flex w-full {{ $wide ? 'max-w-3xl' : 'max-w-md' }} justify-center">
            <a href="{{ route('home') }}" class="rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500">
                <x-logo size="lg" />
            </a>
        </header>

        <main id="contenido" class="mx-auto w-full {{ $wide ? 'max-w-3xl' : 'max-w-md' }}">
            <x-flash />
            <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
                {{ $slot }}
            </div>
            @isset($below)
                <div class="mt-6 text-center text-sm text-slate-600">{{ $below }}</div>
            @endisset
        </main>

        <footer class="mx-auto mt-auto w-full max-w-md pt-10 text-center text-xs text-slate-400">
            <a href="{{ route('legal.terms') }}" class="hover:text-slate-600">{{ __('Condiciones de uso') }}</a>
            <span aria-hidden="true">·</span>
            <a href="{{ route('legal.privacy') }}" class="hover:text-slate-600">{{ __('Privacidad') }}</a>
            <span aria-hidden="true">·</span>
            &copy; {{ now()->year }} {{ config('microapps.name') }}
        </footer>
    </div>
</x-layouts.html>