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

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

{% block content %}
<div class="container my-5">
    
    <div class="row mb-4">
        <div class="col">
            <h3 class="fw-bold">{% translate "Account Verification" %}</h3>
            <p class="text-muted">{% translate "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-sm border-0 rounded-4">
                <div class="card-body p-5 text-center">

                    {% with emailaddress.email as email %}

                        {% if confirmation %}
                            
                            {# ------------------- CONFIRMATION REQUEST (GET) ------------------- #}
                            {% user_display confirmation.email_address.user as user_display %}
                            
                            <i class="fas fa-envelope-open-text mb-4" style="font-size: 3rem; color: #008080;"></i>
                            <h4 class="fw-bold mb-3">{% translate "Confirm Your Email Address" %}</h4>

                            <p class="lead text-muted">
                                {% blocktrans with email as email %}Please confirm that **{{ email }}** is an email address for user **{{ user_display }}**.{% endblocktrans %}
                            </p>

                            {# Confirmation Form #}
                            <form method="post" action="{% url 'account_confirm_email' confirmation.key %}">
                                {% csrf_token %}
                                
                                {# Teal/Dark Green button consistent with the UI theme #}
                                <button class="btn btn-lg mt-4 px-5" type="submit" style="background-color: #008080; border-color: #008080; color: white;">
                                    {% translate "Confirm" %}
                                </button>
                            </form>
                            
                        {% else %}
                            
                            {# ------------------- CONFIRMATION FAILED (Error) ------------------- #}
                            <i class="fas fa-exclamation-triangle text-danger mb-4" style="font-size: 3rem;"></i>
                            <h4 class="fw-bold mb-3 text-danger">{% translate "Invalid Link" %}</h4>
                            
                            <p class="lead">
                                {% translate "The email confirmation link has expired or is invalid." %}
                            </p>
                            <p class="text-muted">
                                {% translate "Please request a new verification email from your account settings page." %}
                            </p>
                            
                            <a href="{% url 'account_email' %}" class="btn btn-outline-secondary mt-3 px-5">
                                {% translate "Go to Settings" %}
                            </a>

                        {% endif %}

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