{% extends "base.html" %}

{% block title %}Resend Verification Email - 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);">
        <h2 style="text-align: center; color: #2c3e50; margin-bottom: 30px;">Resend Verification Email</h2>

        {% if success %}
            <div style="background-color: #d1fae5; padding: 15px; border-radius: 5px; margin-bottom: 20px;">
                <p style="margin: 0; color: #065f46;">
                    <strong>Success!</strong><br>
                    {{ message }}
                </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>
        {% else %}
            {% if error %}
                <div style="background-color: #fee2e2; padding: 15px; border-radius: 5px; margin-bottom: 20px;">
                    <p style="margin: 0; color: #991b1b;">
                        <strong>Error:</strong><br>
                        {{ error }}
                    </p>
                </div>
            {% endif %}

            <form method="post" style="margin-bottom: 20px;">
                {% csrf_token %}

                <div style="margin-bottom: 20px;">
                    <label for="email" style="display: block; margin-bottom: 5px; color: #374151; font-weight: 500;">Email Address</label>
                    <input type="email"
                           id="email"
                           name="email"
                           required
                           style="width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 16px;"
                           placeholder="Enter your email address">
                </div>

                <button type="submit"
                        style="width: 100%; background-color: #3B82F6; color: white; padding: 12px; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer;">
                    Send Verification Email
                </button>
            </form>

            <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>
        {% endif %}
    </div>
</div>
{% endblock %}