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

{% block title %}Confirm Email - Redea Social{% endblock %}

{% block auth_content %}
<div class="w-full max-w-md px-4">
    <!-- Logo & Header -->
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl mb-4" style="background: var(--primary-soft);">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                <polyline points="22,6 12,13 2,6"/>
            </svg>
        </div>
        <h1 class="text-2xl font-bold tracking-tight" style="color: var(--text-primary);">
            Confirm email address
        </h1>
    </div>

    <!-- Card -->
    <div class="auth-card">
        {% if confirmation %}
            {% user_display confirmation.email_address.user as user_display %}
            {% if can_confirm %}
                <p class="text-sm mb-6 leading-relaxed" style="color: var(--text-secondary);">
                    Please confirm that
                    <strong style="color: var(--text-primary);">{{ confirmation.email_address.email }}</strong>
                    is your email address.
                </p>
                {% url 'account_confirm_email' confirmation.key as action_url %}
                <form method="post" action="{{ action_url }}">
                    {% csrf_token %}
                    {{ redirect_field }}
                    <button type="submit" class="btn-brand">
                        Confirm Email
                    </button>
                </form>
            {% else %}
                <div class="alert-error">
                    This email address has already been confirmed by a different account.
                </div>
            {% endif %}
        {% else %}
            <div class="alert-error mb-4">
                This confirmation link has expired or is invalid.
            </div>
            <a href="{% url 'account_login' %}" class="btn-brand">
                Sign In
            </a>
        {% endif %}
    </div>

    <!-- Footer link -->
    <p class="text-center text-sm mt-6" style="color: var(--text-secondary);">
        <a href="{% url 'account_login' %}" class="font-semibold hover:underline" style="color: var(--primary);">Back to sign in</a>
    </p>
</div>
{% endblock %}