@extends('layouts.guest')

@section('content')
    <div class="flex min-h-full flex-col justify-center px-6 py-24 md:py-32 lg:px-8">
        <div class="sm:mx-auto sm:w-full sm:max-w-sm shadow-md rounded-md bg-white dark:bg-gray-800">
            <div class="p-4 bg-gray-200 dark:bg-gray-800">
                <h2 class="text-center text-xl font-bold tracking-tight text-gray-900 dark:text-white">Verificación de Correo Electrónico</h2>
            </div>

            <div class="mb-4 text-sm text-gray-600 p-4 text-center dark:text-white">
                {{ __('¡Gracias por registrarte! Antes de comenzar, ¿podrías verificar tu dirección de correo electrónico haciendo clic en el enlace que acabamos de enviarte? Si no recibiste el correo electrónico, con gusto te enviaremos otro.') }}
            </div>

            @if (session('status') == 'verification-link-sent')
                <div class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
                    {{ __('Se ha enviado un nuevo enlace de verificación a la dirección de correo electrónico que proporcionaste durante el registro.') }}
                </div>
            @endif

            <div class="mt-4 flex items-center justify-between p-8">
                <form method="POST" action="{{ route('verification.send') }}">
                    @csrf
                    <div>
                        <button type="submit"
                            class="flex w-full justify-center rounded-md bg-secondary-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-secondary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary-500">
                            {{ __('Reenviar correo electrónico de verificación') }}
                        </button>
                    </div>
                </form>

                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        {{ __('Cerrar sesión') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection