@extends('layouts.pasi_public')

@section('content')
<div class="flex flex-col items-center justify-center min-h-[60vh]">
    <div class="w-full max-w-md bg-white dark:bg-slate-800 p-8 rounded-2xl shadow-xl border border-gray-100 dark:border-slate-700">
        
        <div class="text-center mb-6">
            <div class="mx-auto w-14 h-14 bg-green-50 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-4 border border-green-100 dark:border-green-800">
                <svg class="w-7 h-7 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
            </div>
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Verifikasi Email</h2>
        </div>

        <div class="mb-6 text-sm text-gray-600 dark:text-gray-400 text-center leading-relaxed">
            {{ __('Terima kasih telah mendaftar! Sebelum memulai, bisakah Anda memverifikasi alamat email Anda dengan mengeklik tautan yang baru saja kami kirimkan ke email Anda?') }}
        </div>

        @if (session('status') == 'verification-link-sent')
            <div class="mb-6 font-medium text-sm text-green-600 text-center bg-green-50 dark:bg-green-900/30 dark:text-green-300 p-3 rounded-lg border border-green-200 dark:border-green-800">
                {{ __('Tautan verifikasi baru telah dikirim ke alamat email yang Anda berikan saat pendaftaran.') }}
            </div>
        @endif

        <div class="mt-6 flex flex-col gap-3">
            <form method="POST" action="{{ route('verification.send') }}">
                @csrf
                <div>
                    <x-primary-button class="w-full justify-center py-3 bg-blue-600 hover:bg-blue-700 shadow-md transition rounded-lg">
                        {{ __('Kirim Ulang Email Verifikasi') }}
                    </x-primary-button>
                </div>
            </form>

            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="w-full text-sm text-gray-500 hover:text-gray-900 underline decoration-gray-300 hover:decoration-gray-500 dark:hover:text-gray-300 transition-all mt-2">
                    {{ __('Keluar (Log Out)') }}
                </button>
            </form>
        </div>
    </div>
</div>
@endsection