@extends('theme::layouts.app', ['title' => __('auth.Verify Email')])

@section('content')
    <div class="flex-grow flex items-center justify-center px-6 pb-16 pt-10">
        <div class="w-full max-w-md">
            <div
                class="bg-white dark:bg-surface-dark rounded-2xl border border-gray-100 dark:border-gray-800 shadow-lg p-8 md:p-10">
                <div class="text-center mb-8">
                    <h2 class="text-2xl font-bold text-text-main dark:text-white mb-2">@lang('auth.heading|Verify Your Email Address')</h2>
                    <p class="text-text-muted dark:text-gray-400 text-sm">@lang('auth.Before proceeding, please check your email for a verification link.')</p>
                </div>

                @if (session('resent'))
                    <div class="mb-6 bg-green-50 border-l-4 border-green-400 p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm text-green-700">
                                    @lang('auth.A new verification link has been sent to your email address.')
                                </p>
                            </div>
                        </div>
                    </div>
                @endif
                
                <div class="text-center">
                    <p class="text-text-main dark:text-gray-300 text-base mb-6">@lang('auth.If you did not receive the email')</p>

                    <form class="d-inline" method="POST" action="{{ route('verification.resend') }}">
                        @csrf
                        <button
                            class="w-full py-3 px-4 bg-primary hover:bg-primary-dark text-white rounded-lg font-semibold transition-all shadow-lg shadow-primary/20 flex items-center justify-center gap-2"
                            type="submit">
                            @lang('auth.button|Click here to request new link.')
                        </button>
                    </form>
                    
                    <div class="mt-6">
                         <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="text-sm text-text-muted hover:text-primary transition-colors">
                            @lang('auth.Logout')
                        </a>
                         <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
                            @csrf
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection