{% extends "login/base.html" %}
{% block content %}
    <div class="auth-icon" aria-hidden="true">
        <svg viewBox="0 0 64 64" width="76" height="76" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M32 4L54 13V29C54 43 45 54 32 60C19 54 10 43 10 29V13L32 4Z"
                  stroke="currentColor" stroke-width="3.2" stroke-linejoin="round"/>
            <rect x="22" y="28" width="20" height="17" rx="3" stroke="currentColor" stroke-width="3"/>
            <path d="M26 28V22C26 18.7 28.7 16 32 16C35.3 16 38 18.7 38 22V28"
                  stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
            <circle cx="32" cy="36" r="2.3" fill="currentColor"/>
            <path d="M32 38V41" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
        </svg>
    </div>
    <h1 class="auth-title">Authenticator Verification</h1>
    <p class="auth-subtitle">Enter the 6-digit code from Google Authenticator to continue.</p>

    <form method="post">
        {% csrf_token %}
        <div class="mb-1">
            <label for="otp" class="form-label">Verification code</label>
            <input
                type="text"
                class="form-control otp-input"
                id="otp"
                name="otp"
                placeholder="Enter 6-digit code"
                inputmode="numeric"
                autocomplete="one-time-code"
                pattern="[0-9]{6}"
                maxlength="6"
                required
                autofocus
            >
        </div>
        <button type="submit" class="btn btn-verify w-100">Verify</button>
    </form>

    <div class="auth-divider"><span>or</span></div>
    <div class="text-center">
        <a class="back-link" href="{% url 'login' %}">← Back to login</a>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-warning alert-dismissible fade show mt-4 mb-0" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
{% endblock %}