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

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

{% block content %}
    <section class="auth-card form-wide">
        <h1>{{ trans('auth.totp_setup_title') }}</h1>
        {% if setup_required %}
            <p class="flash flash-error">{{ trans('auth.totp_setup_required') }}</p>
        {% endif %}
        <ol class="muted">
            <li>{{ trans('auth.totp_setup_step_app') }}</li>
            <li>{{ trans('auth.totp_setup_step_scan') }}</li>
            <li>{{ trans('auth.totp_setup_step_confirm') }}</li>
        </ol>

        <div class="totp-setup-qr" aria-hidden="false">
            {{ qr_svg|raw }}
        </div>
        <p class="muted totp-scan-hint">{{ trans('auth.totp_scan_hint') }}</p>

        <details class="muted" open>
            <summary>{{ trans('auth.totp_manual_summary') }}</summary>
            <p><code class="totp-secret">{{ secret_display }}</code></p>
            <p><a href="{{ provisioning_uri }}">{{ trans('auth.totp_open_app') }}</a> (mobile)</p>
        </details>

        <form method="post" action="{{ form_action }}" class="form">
            {{ csrf_field() }}
            <label>
                {{ trans('auth.totp_confirm_code') }}
                <input type="text" name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" required autofocus>
            </label>
            <button type="submit" class="btn btn-primary">{{ trans('auth.totp_enable') }}</button>
        </form>
        <p class="muted"><a href="/login/2fa/cancel">{{ trans('auth.back_to_sign_in') }}</a></p>
    </section>
{% endblock %}