{% extends 'paxalia/auth_base.html' %}
{% load i18n %}
{% block title %}{% trans "Two-factor verification" %} · {{ brand_name }}{% endblock %}
{% block content %}
<section class="paxalia-auth-card" aria-labelledby="twofa-heading" data-auth-step="2fa" data-otp-incomplete-message="{% trans 'Enter the complete verification code, or use a recovery code.' %}">
    <header class="paxalia-auth-card__header">
        <div class="paxalia-auth-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none">
                <rect x="5" y="10" width="14" height="10" rx="1.7" stroke="currentColor" stroke-width="1.6"/>
                <path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="currentColor" stroke-width="1.6"/>
            </svg>
        </div>
        <p class="paxalia-auth-eyebrow">{% trans "Layer 2" %}</p>
        <h1 id="twofa-heading">{% trans "Two-factor verification" %}</h1>
        <p>{% trans "Use your authenticator app, or use one unused recovery code when your authenticator is unavailable." %}</p>
    </header>

    <div class="paxalia-auth-card__body">
        <form method="post" class="paxalia-auth-form" id="paxaliaTwoFactorForm" novalidate>
            {% csrf_token %}
            <input type="hidden" name="next" value="{{ next }}">
            <input type="hidden" name="token" id="paxaliaOtpToken" value="">

            {% if rate_limited %}
                <div class="paxalia-auth-callout paxalia-auth-callout--danger" role="alert">
                    <strong>{% trans "Verification temporarily limited" %}</strong>
                    <p>{% trans "Too many verification attempts. Please wait before trying again." %}</p>
                </div>
            {% elif verification_error %}
                <div class="paxalia-auth-callout paxalia-auth-callout--danger" role="alert">
                    <strong>{% trans "Verification failed" %}</strong>
                    <p>{% trans "The authenticator code or recovery code was not accepted. Check the value and try again." %}</p>
                </div>
            {% endif %}

            <div class="paxalia-auth-method">
                <div class="paxalia-auth-method__header">
                    <div>
                        <span class="paxalia-auth-eyebrow">{% trans "Authenticator app" %}</span>
                        <strong>{% trans "Six-digit verification code" %}</strong>
                    </div>
                    <span class="paxalia-auth-method__badge">{% trans "Primary" %}</span>
                </div>
                <div class="paxalia-otp-grid" data-otp-grid role="group" aria-label="{% trans 'Six-digit authenticator code' %}">
                    {% for i in '123456' %}
                        <input
                            class="paxalia-otp-digit"
                            type="text"
                            name="otp_digit"
                            inputmode="numeric"
                            pattern="[0-9]*"
                            maxlength="1"
                            {% if forloop.first %}autocomplete="one-time-code"{% else %}autocomplete="off"{% endif %}
                            aria-label="{% trans 'OTP digit' %} {{ forloop.counter }}"
                        >
                    {% endfor %}
                </div>
                <small class="paxalia-auth-help">{% trans "The code changes automatically in your authenticator app." %}</small>
            </div>

            <div class="paxalia-auth-divider"><span>{% trans "or" %}</span></div>

            <div class="paxalia-auth-method paxalia-auth-method--recovery">
                <div class="paxalia-auth-method__header">
                    <div>
                        <span class="paxalia-auth-eyebrow">{% trans "Recovery" %}</span>
                        <strong>{% trans "Use a one-time recovery code" %}</strong>
                    </div>
                    {% if recovery_available %}
                        <span class="paxalia-auth-method__badge">{% trans "One-time" %}</span>
                    {% endif %}
                </div>
                <div class="paxalia-auth-field">
                    <label for="id_recovery_code">{% trans "Recovery code" %}</label>
                    <input id="id_recovery_code" name="recovery_code" class="form-input" data-recovery-code autocomplete="off" autocapitalize="characters" spellcheck="false" inputmode="text" maxlength="19" placeholder="ABCD-EFGH-IJKL-MNOP" aria-describedby="recovery-help">
                </div>
                <small id="recovery-help" class="paxalia-auth-help">
                    {% if recovery_available %}
                        {% trans "Each recovery code can be used once. Keep the remaining codes in your secure recovery location." %}
                    {% else %}
                        {% trans "No unused recovery codes are currently available for this administrator." %}
                    {% endif %}
                </small>
            </div>

            <div class="paxalia-auth-errors" data-auth-error hidden aria-live="assertive"></div>

            <button class="btn btn-primary paxalia-auth-submit" type="submit">
                {% trans "Verify and continue" %}
            </button>
        </form>
    </div>
</section>
{% endblock %}