{% extends "base.html" %}
{% load i18n %}
{% load account %}

{% block title %}{% trans "Confirm Email Address" %}{% endblock %}

{% block content %}
<div class="container my-5">
    
    {# Centering the main header content #}
    <div class="row mb-5 justify-content-center text-center">
        <div class="col-md-8 col-lg-6">
            <h3 class="fw-bolder" style="color: #00636e;">{% trans "Account Verification" %}</h3>
            <p class="lead text-muted">{% trans "Verify your email to secure your account and unlock full features." %}</p>
        </div>
    </div>
    
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card shadow-lg border-0 rounded-4"> 
                <div class="card-body p-5 text-center">

                    {% with email as email %}

                        {% if confirmation %}
                            
                            {# ------------------- CONFIRMATION REQUEST (GET) - Success Theme ------------------- #}
                            {% user_display confirmation.email_address.user as user_display %}
                            
                            <i class="fas fa-check-circle mb-4" style="font-size: 4rem; color: #008080;"></i> {# Changed icon to a checkmark for clarity #}
                            
                            <h4 class="fw-bold mb-3">{% translate "Confirm Your Email Address" %}</h4>

                            <p class="lead" style="color: #343a40;">
                                {% blocktrans with email as email %}Please confirm that **{{ email }}** is the correct email address for your account.{% endblocktrans %}
                            </p>

                            {# Confirmation Form #}
                            <form method="post" action="{% url 'account_confirm_email' confirmation.key %}">
                                {% csrf_token %}
                                
                                <button class="btn btn-lg mt-4 px-5 fw-semibold text-white" type="submit" 
                                        style="background-color: #008080; border-color: #008080; box-shadow: 0 4px 8px rgba(0, 128, 128, 0.3);">
                                    {% translate "Confirm & Activate" %}
                                </button>
                            </form>
                            
                        {% else %}
                            
                            {# ------------------- CONFIRMATION FAILED (Error) - Danger Theme ------------------- #}
                            <i class="fas fa-unlink text-danger mb-4" style="font-size: 4rem;"></i> {# Changed icon to be more specific #}
                            
                            <h4 class="fw-bold mb-3 text-danger">{% translate "Verification Failed" %}</h4>
                            
                            <p class="lead text-danger">
                                {% translate "The email confirmation link is expired or invalid." %}
                            </p>
                            <p class="text-muted small">
                                {% translate "If you recently requested a link, please ensure you use the newest one. You can request a new verification email from your account settings." %}
                            </p>
                            
                            <a href="{% url 'account_email' %}" class="btn btn-outline-secondary mt-4 px-5 fw-semibold">
                                <i class="fas fa-cog me-2"></i> {% translate "Go to Settings" %}
                            </a>

                        {% endif %}

                    {% endwith %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}