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

{% block title %}Check 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(--success-50);">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--success-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);">
            Check your email
        </h1>
        <p class="text-sm mt-2 max-w-xs mx-auto leading-relaxed" style="color: var(--text-secondary);">
            We've sent you a password reset link. If you don't see the email, check your spam folder.
        </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" style="color: var(--text-tertiary);">
                Didn't receive the email?
            </p>
            <a href="{% url 'account_reset_password' %}" class="btn-link mt-2 inline-flex">
                Try again
            </a>
        </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 %}