{% extends "base/base.html" %}
{% load i18n static %}

{% block title %}{% trans "Email Verification Required" %}{% endblock %}

{% block extra_css %}
<style>
    .verification-container {
        max-width: 500px;
        margin: 4rem auto;
        padding: 2rem;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        text-align: center;
    }
    
    .verification-icon {
        font-size: 4rem;
        color: #6c757d;
        margin-bottom: 1.5rem;
    }
    
    .verification-title {
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: #212529;
    }
    
    .verification-text {
        color: #6c757d;
        margin-bottom: 2rem;
        line-height: 1.6;
    }
    
    .btn-verify {
        padding: 0.8rem 2rem;
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 8px;
        margin: 0.5rem;
        transition: all 0.3s ease;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="verification-container">
                <div class="verification-icon">
                    <i class="fas fa-envelope"></i>
                </div>
                
                <h1 class="verification-title">
                    {% trans "Email Verification Required" %}
                </h1>

                <p class="verification-text">
                    {% blocktrans %}
                        We've sent a verification link to your email address. Please check your inbox and click on the link to verify your email.
                    {% endblocktrans %}
                </p>

                <p class="verification-text">
                    {% blocktrans %}
                        If you didn't receive an email, please check your spam folder or request a new verification email below.
                    {% endblocktrans %}
                </p>

                <div class="mt-4">
                    <a href="{% url 'account_email' %}" class="btn btn-primary btn-verify">
                        <i class="fas fa-envelope me-2"></i>{% trans 'Resend Verification Email' %}
                    </a>
                    <a href="{% url 'home' %}" class="btn btn-outline-secondary btn-verify">
                        <i class="fas fa-home me-2"></i>{% trans 'Go to Homepage' %}
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}