{% extends "base.html" %}

{% block title %}Email Verification - 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);">
        {% if success %}
            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>

            <h2 style="text-align: center; color: #10B981; margin-bottom: 20px;">Email Verified!</h2>

            <p style="text-align: center; color: #666; margin-bottom: 20px;">
                Your email has been successfully verified.
            </p>

            {% if is_approved %}
                <p style="text-align: center; color: #666; margin-bottom: 30px;">
                    Your account has been approved! You can now log in.
                </p>
                <div style="text-align: center;">
                    <a href="{% url 'login' %}"
                       style="display: inline-block; background-color: #3B82F6; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; font-weight: bold;">
                        Go to Login
                    </a>
                </div>
            {% else %}
                <div style="background-color: #fff3cd; padding: 15px; border-radius: 5px; margin-bottom: 20px;">
                    <p style="margin: 0; color: #856404;">
                        <strong>Pending Approval</strong><br>
                        Your account is now pending approval from our team.
                        You'll receive an email once your account is approved.
                    </p>
                </div>
            {% endif %}

        {% else %}
            <div style="text-align: center; margin-bottom: 30px;">
                <svg style="width: 80px; height: 80px; color: #EF4444;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>

            <h2 style="text-align: center; color: #EF4444; margin-bottom: 20px;">Verification Failed</h2>

            <p style="text-align: center; color: #666; margin-bottom: 30px;">
                {{ error }}
            </p>

            {% if can_resend %}
                <div style="text-align: center;">
                    <a href="{% url 'resend-verification' %}"
                       style="display: inline-block; background-color: #3B82F6; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; font-weight: bold;">
                        Request New Verification Email
                    </a>
                </div>
            {% endif %}
        {% endif %}

        <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 %}