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

{% block title %}Two-Factor Authentication{% endblock %}

{% block body %}
<div style="max-width:400px;margin:4rem auto;font-family:sans-serif">
    <h1>Two-Factor Authentication</h1>
    {% if authenticationError %}
        <div style="color:red;margin-bottom:1rem">{{ authenticationError.messageKey|trans(authenticationError.messageData, 'security') }}</div>
    {% endif %}
    <p>Enter the 6-digit code from your authenticator app.</p>
    <form method="post" action="{{ two_factor_form_path() }}">
        <div style="margin-bottom:1rem">
            <label for="code">Authentication Code</label><br>
            <input id="code" type="text" name="{{ two_factor_code_parameter() }}" inputmode="numeric" autocomplete="one-time-code" required autofocus style="width:100%;padding:.5rem;letter-spacing:.2em;font-size:1.5rem">
        </div>
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('2fa') }}">
        <button type="submit" style="padding:.5rem 1rem">Verify</button>
    </form>
</div>
{% endblock %}