{% extends 'base.html' %}

{% block title %}Verification Email Sent - {{ site_name }}{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full">
        <div class="bg-white rounded-2xl card-shadow p-8 text-center">
            <!-- Success Icon -->
            <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-6">
                <i class="fas fa-envelope text-green-600 text-2xl"></i>
            </div>

            <!-- Content -->
            <h2 class="text-2xl font-bold text-gray-900 mb-4">Check Your Email</h2>
            
            <p class="text-gray-600 mb-6">
                We've sent a verification link to your email address. 
                Please click the link in the email to verify your account and complete your registration.
            </p>

            <!-- Additional Info -->
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-blue-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-blue-700">
                            <strong>Didn't receive the email?</strong><br>
                            Check your spam folder or 
                            <a href="{% url 'auth-resend-verification' %}" class="font-medium text-blue-600 hover:text-blue-500 underline">
                                click here to resend
                            </a> the verification email.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-3 justify-center">
                <a href="{% url 'auth-user-login' %}" 
                   class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 transition-colors">
                    <i class="fas fa-sign-in-alt mr-2"></i>
                    Return to Login
                </a>
                
                <a href="{% url 'auth-home' %}" 
                   class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                    <i class="fas fa-home mr-2"></i>
                    Go Home
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}