{% extends 'layouts/base.html.twig' %}

{% block title %}{{ trans('auth.totp_challenge_title') }} — {{ site.name }}{% endblock %}

{% block content %}
    <section class="auth-card">
        <h1>{{ trans('auth.totp_challenge_title') }}</h1>
        <p class="muted">{{ trans('auth.totp_challenge_lead') }} <strong>{{ username }}</strong>.</p>
        <form method="post" action="/login/2fa" class="form">
            {{ csrf_field() }}
            <label>
                {{ trans('auth.totp_auth_code') }}
                <input type="text" name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" autofocus required>
            </label>
            <button type="submit" class="btn btn-primary">{{ trans('auth.totp_verify') }}</button>
        </form>
        <details class="muted" style="margin-top:1rem">
            <summary>{{ trans('auth.totp_use_recovery') }}</summary>
            <form method="post" action="/login/2fa" class="form" style="margin-top:0.75rem">
                {{ csrf_field() }}
                <label>
                    {{ trans('auth.totp_recovery_code') }}
                    <input type="text" name="recovery_code" placeholder="XXXX-XXXX" autocomplete="off">
                </label>
                <button type="submit" class="btn btn-small">{{ trans('auth.totp_use_recovery') }}</button>
            </form>
        </details>
        <p class="muted"><a href="/login/2fa/cancel">{{ trans('auth.back_to_sign_in') }}</a></p>
    </section>
{% endblock %}