{% extends "base.html" %}

{% block title %}Registration Successful - KeepItGoing{% endblock %}

{% block body %}
<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg, #f5f5f5); padding: 20px;">
    <div style="max-width: 500px; width: 100%; background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
        <div style="text-align: center; margin-bottom: 30px;">
            <svg style="width: 80px; height: 80px; color: #10B981;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76"></path>
            </svg>
        </div>

        <h2 style="text-align: center; color: #2c3e50; margin-bottom: 20px;">Check Your Email!</h2>

        <p style="text-align: center; color: #666; margin-bottom: 15px;">
            We've sent a verification email to:
        </p>
        <p style="text-align: center; font-weight: bold; color: #2c3e50; margin-bottom: 20px;">
            {{ email }}
        </p>

        <p style="color: #666; margin-bottom: 15px;">
            Please click the link in the email to verify your account. After verification,
            your account will be reviewed by our team for approval.
        </p>

        <div style="background-color: #e3f2fd; padding: 15px; border-radius: 5px; margin-top: 30px;">
            <p style="margin: 0; color: #0d47a1; font-size: 14px;">
                <strong>Didn't receive the email?</strong><br>
                Check your spam folder or <a href="{% url 'resend-verification' %}" style="color: #1976d2; text-decoration: none; font-weight: bold;">request a new verification email</a>.
            </p>
        </div>

        <div style="text-align: center; margin-top: 30px;">
            <a href="{% url 'login' %}" style="color: #666; text-decoration: none; font-size: 14px;">Return to Login</a>
        </div>
    </div>
</div>
{% endblock %}