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

{% block title %}Verify Your 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(--info-50);">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--info-500)" 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);">
            Verify your email
        </h1>
        <p class="text-sm mt-2 max-w-xs mx-auto leading-relaxed" style="color: var(--text-secondary);">
            We've sent a verification email to your address. Please follow the link in the email to activate your account.
        </p>
    </div>

    <!-- Card -->
    <div class="auth-card text-center">
        <div class="py-2">
            <svg class="mx-auto mb-4" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--text-ghost)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <rect x="2" y="4" width="20" height="16" rx="2"/>
                <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
            </svg>
            <p class="text-sm mb-1" style="color: var(--text-secondary);">
                Check your inbox for the verification link.
            </p>
            <p class="text-xs" style="color: var(--text-tertiary);">
                If you don't see it, check your spam folder.
            </p>
        </div>
    </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 %}