{% extends "base.html" %}

{% block title %}Konto verifizieren{% endblock %}

{% block head %}
{{ super() }}
<style>
    .auth-wrap {
        max-width: 560px;
        margin: 2rem auto;
        padding: 2rem;
        border-radius: 18px;
        border: 1px solid #d4e0e9;
        background: #ffffff;
        box-shadow: 0 20px 44px rgba(14, 32, 48, 0.08);
    }
    .auth-wrap h1 { font-size: 2rem; color: #0f344d; margin-bottom: 0.4rem; }
    .auth-wrap p { margin-bottom: 1.3rem; }
    .field { margin-bottom: 0.9rem; }
    .field label { display: block; margin-bottom: 0.35rem; font-weight: 700; color: #19445f; }
    .field input { width: 100%; padding: 0.68rem 0.78rem; border-radius: 10px; border: 1px solid #c4d5e2; font-size: 1rem; color: #12384f; }
    .field input:focus { outline: none; border-color: #2f79a7; box-shadow: 0 0 0 3px rgba(58, 133, 180, 0.2); }
    .auth-btn { width: 100%; border: none; border-radius: 999px; padding: 0.72rem; font-size: 1rem; font-weight: 700; color: #ffffff; background: linear-gradient(120deg, #0a5f8f 0%, #0b4567 100%); cursor: pointer; margin-top: 1rem; }

    /* Helper actions below main form */
    .auth-actions {
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        font-size: 0.92rem;
        color: #547184;
    }
    .auth-actions-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .link-btn {
        background: none;
        border: none;
        color: #0a5f8f;
        font-weight: 700;
        cursor: pointer;
        padding: 0;
        font-size: inherit;
        text-decoration: underline;
    }
    .link-btn:hover {
        color: #0b4567;
    }

    /* Custom Modal Overlay Styles */
    .custom-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(14, 32, 48, 0.5);
        backdrop-filter: blur(3px);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }
    .custom-modal-overlay.active {
        display: flex;
    }
    .custom-modal {
        background: #ffffff;
        padding: 2rem;
        border-radius: 16px;
        max-width: 460px;
        width: 90%;
        box-shadow: 0 20px 44px rgba(14, 32, 48, 0.15);
        border: 1px solid #d4e0e9;
        text-align: left;
    }
    .custom-modal h3 {
        color: #0f344d;
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
    }
    .custom-modal p {
        color: #547184;
        font-size: 0.95rem;
        margin-bottom: 1.2rem;
    }
    .modal-actions {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 1.2rem;
    }
    .modal-btn-primary {
        background: #0a5f8f;
        color: #ffffff;
        border: none;
        border-radius: 999px;
        padding: 0.65rem;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        width: 100%;
    }
    .modal-btn-secondary {
        background: #f1f5f9;
        color: #19445f;
        border: 1px solid #c4d5e2;
        border-radius: 999px;
        padding: 0.65rem;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        width: 100%;
    }
    .modal-btn-secondary:hover {
        background: #e2e8f0;
    }
</style>
{% endblock %}

{% block content %}
<section class="auth-wrap">
    <h1>E-Mail bestätigen</h1>
    <p>Wir haben Ihnen einen Bestätigungscode per E-Mail gesendet. Bitte geben Sie diesen ein, um Ihr Konto zu aktivieren.</p>
    
    <form method="POST" action="{{ url_for('verify_account') }}">
        <div class="field">
            <label for="username">Benutzername</label>
            <input id="username" name="username" type="text" value="{{ username }}" required {% if username %}readonly{% endif %}>
        </div>
        
        <div class="field">
            <label for="token">Bestätigungscode</label>
            <input id="token" name="token" type="text" placeholder="z.B. A1B2C3" autocomplete="off" required autofocus>
        </div>

        <button class="auth-btn" type="submit">Konto aktivieren</button>
    </form>

    <div class="auth-actions">
        <div class="auth-actions-row">
            <span>Keinen Code erhalten?</span>
            <form method="POST" action="{{ url_for('resend_token') }}" style="margin: 0;">
                <input type="hidden" name="username" value="{{ username }}">
                <button type="submit" class="link-btn">Code erneut senden</button>
            </form>
        </div>
        <div class="auth-actions-row">
            <span>Falsche E-Mail-Adresse?</span>
            <button type="button" class="link-btn" onclick="openEmailModal()">E-Mail ändern</button>
        </div>
    </div>
</section>

<!-- Modal: E-Mail-Adresse ändern -->
<div id="emailModal" class="custom-modal-overlay">
    <div class="custom-modal">
        <h3>E-Mail-Adresse ändern</h3>
        <p>Geben Sie Ihre neue E-Mail-Adresse ein. Wir senden Ihnen umgehend einen neuen Bestätigungscode.</p>
        
        <form method="POST" action="{{ url_for('change_email_and_resend') }}">
            <input type="hidden" name="username" value="{{ username }}">
            
            <div class="field">
                <label for="new_email">Neue E-Mail-Adresse</label>
                <input id="new_email" name="new_email" type="email" placeholder="name@beispiel.de" required>
            </div>

            <div class="modal-actions">
                <button type="submit" class="modal-btn-primary">Speichern & Code senden</button>
                <button type="button" onclick="closeEmailModal()" class="modal-btn-secondary">Abbrechen</button>
            </div>
        </form>
    </div>
</div>

<script>
    function openEmailModal() {
        document.getElementById('emailModal').classList.add('active');
    }

    function closeEmailModal() {
        document.getElementById('emailModal').classList.remove('active');
    }

    // Modal per Klick auf den Hintergrund schließen
    document.getElementById('emailModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeEmailModal();
        }
    });
</script>
{% endblock %}