{% extends 'base.html' %}

{% block title %}Verify Your Email - AgentForms{% endblock %}

{% block head_extra %}
<style nonce="{{ csp_nonce }}">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: #0a0a0b;
        color: #e4e4e7;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .verify-container {
        max-width: 480px;
        padding: 32px;
        text-align: center;
    }

    .logo {
        font-family: 'SF Mono', 'Fira Code', monospace;
        font-size: 14px;
        color: #00ff41;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 24px;
    }

    h1 {
        font-size: 24px;
        margin-bottom: 12px;
    }

    p {
        color: #a1a1aa;
        line-height: 1.6;
        margin-bottom: 24px;
    }

    .email {
        color: #e4e4e7;
        font-weight: 500;
    }

    .btn {
        display: inline-block;
        padding: 12px 24px;
        background: #00ff41;
        color: #0a0a0b;
        text-decoration: none;
        border-radius: 6px;
        font-weight: 600;
        margin: 8px;
        transition: opacity 0.2s;
    }

    .btn:hover {
        opacity: 0.9;
    }

    .btn-secondary {
        background: transparent;
        border: 1px solid #27272a;
        color: #a1a1aa;
    }

    .btn-secondary:hover {
        background: #27272a;
        color: #e4e4e7;
    }

    .alert {
        padding: 12px;
        border-radius: 6px;
        margin-bottom: 24px;
        font-size: 14px;
    }

    .alert-success {
        background: rgba(0, 255, 65, 0.1);
        border: 1px solid rgba(0, 255, 65, 0.3);
        color: #00ff41;
    }

    .alert-info {
        background: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.3);
        color: #3b82f6;
    }

    .alert-error {
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #ef4444;
    }

    .timer {
        color: #71717a;
        font-size: 13px;
        margin-top: 16px;
    }
</style>
{% endblock %}

{% block content %}
<div class="verify-container">
    <div class="logo">AgentForms</div>

    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }}">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
    {% endwith %}

    <h1>Check Your Email</h1>
    <p>We've sent a verification link to <span class="email">{{ user.email }}</span>.<br>
    Click the link in that email to verify your account.</p>

    <form method="POST" action="/settings/resend-verification">
        <button type="submit" class="btn btn-secondary">Resend Verification Email</button>
    </form>

    <div class="timer">
        Didn't receive the email? Check your spam folder or try again in a minute.
    </div>
</div>
{% endblock %}