{#
 # Verify Email Page
 #}
{% extends 'auth/base-auth.twig' %}

{% set title = 'Verify Email' %}

{% block content %}
{% if verified|default(false) %}
    {# Success State #}
    <div class="text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full mb-4">
            <i class="fas fa-check-circle text-green-600 dark:text-green-400 text-3xl"></i>
        </div>
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-2">Email Verified!</h1>
        <p class="text-gray-600 dark:text-gray-400 mb-6">Your email address has been successfully verified.</p>
        
        <a href="/login" class="inline-flex items-center px-6 py-2.5 bg-primary hover:bg-primary-dark text-white text-sm rounded-lg transition-colors font-medium">
            <i class="fas fa-sign-in-alt mr-2"></i>
            Sign In to Your Account
        </a>
    </div>
{% elseif error|default(false) %}
    {# Error State #}
    <div class="text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full mb-4">
            <i class="fas fa-times-circle text-red-600 dark:text-red-400 text-3xl"></i>
        </div>
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-2">Verification Failed</h1>
        <p class="text-gray-600 dark:text-gray-400 mb-6">{{ errorMessage|default('Invalid or expired verification link.') }}</p>
        
        <div class="space-y-2">
            <a href="/login" class="block text-center px-6 py-2.5 bg-primary hover:bg-primary-dark text-white text-sm rounded-lg transition-colors font-medium">
                <i class="fas fa-sign-in-alt mr-2"></i>
                Go to Login
            </a>
            <a href="/resend-verification" class="block text-center px-6 py-2.5 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 text-sm rounded-lg transition-colors font-medium">
                <i class="fas fa-redo mr-2"></i>
                Resend Verification Email
            </a>
        </div>
    </div>
{% else %}
    {# Pending State #}
    <div class="text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full mb-4">
            <i class="fas fa-envelope text-blue-600 dark:text-blue-400 text-3xl"></i>
        </div>
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-2">Check Your Email</h1>
        <p class="text-gray-600 dark:text-gray-400 mb-6">
            We've sent a verification link to <strong>{{ email|default('your email') }}</strong>. 
            Please check your inbox and click the link to verify your account.
        </p>
        
        <div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6 text-left">
            <p class="text-sm text-blue-800 dark:text-blue-300 mb-2">
                <i class="fas fa-info-circle mr-1"></i>
                <strong>Didn't receive the email?</strong>
            </p>
            <ul class="text-xs text-blue-700 dark:text-blue-400 space-y-1 ml-5 list-disc">
                <li>Check your spam or junk folder</li>
                <li>Make sure you entered the correct email address</li>
                <li>Wait a few minutes for the email to arrive</li>
            </ul>
        </div>
        
        <div class="space-y-2">
            <a href="/resend-verification" class="block text-center px-6 py-2.5 bg-primary hover:bg-primary-dark text-white text-sm rounded-lg transition-colors font-medium">
                <i class="fas fa-redo mr-2"></i>
                Resend Verification Email
            </a>
            <a href="/login" class="block text-center text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
                Back to Login
            </a>
        </div>
    </div>
{% endif %}
{% endblock %}