{% extends "account/base_entrance.html" %}
{% load i18n %}
{% load account %}
{% load allauth %}

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

{% block content %}
    <div class="h-screen bg-gray-50 flex flex-col justify-center items-center">

    <div class="bg-white border border-gray-300 w-80 md:w-96 py-8 px-4 flex items-center flex-col mb-3">
    <h1 class="text-2xl font-semibold text-gray-800 mb-4">
        {% trans "Confirm Email Address" %}
    </h1>

    {% if confirmation %}
        {% user_display confirmation.email_address.user as user_display %}
        {% if can_confirm %}
            <p class="text-gray-700 text-center text-sm mb-4">
                Please confirm that <a href="mailto:{{ confirmation.email_address.email }}" class="text-blue-600 underline">
                {{ confirmation.email_address.email }}</a> is an email address for the user:<strong> {{ user_display }} </strong>.
            </p>

            <form method="post" action="{% url 'account_confirm_email' confirmation.key %}">
                {% csrf_token %}
                {{ redirect_field }}
                <button type="submit" class="mt-4 w-full bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">
                    {% trans "Confirm" %}
                </button>
            </form>

        {% else %}
            <p class="text-red-600 text-sm">
                Unable to confirm {{ confirmation.email_address.email }} because it is already confirmed by a different account.
            </p>
        {% endif %}
    {% else %}
        <p class="text-gray-600 text-center text-sm">
            This email confirmation link expired or is invalid.<br>
            Please <a href="{% url 'account_email' %}" class="text-blue-600 underline">issue a new confirmation request</a>.
        </p>
    {% endif %}

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