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

{% block navigation %}
    {% include 'general/navigation_2fa.html.twig' %}
{% endblock %}

{% block body %}
    <div class="trusted-domains">
        <form name="twofactorlogin" method="post" action="{{ checkPathUrl ? checkPathUrl: path(checkPathRoute) }}">
            <input type="hidden" name="{{ csrfParameterName }}" value="{{ csrf_token(csrfTokenId) }}">

            {# Authentication errors #}
            {% if authenticationError %}
                <p>{{ authenticationError|trans(authenticationErrorData, 'SchebTwoFactorBundle') }}</p>
            {% endif %}

            <div class="container pt-3 jumbotron">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="text-center">{{ 'txtLoginKeyEmailSubject'|trans }}</h2>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="form-group col-md-2"></div>
                    <div class="form-group col-md-2 text-center">
                        <label for="_auth_code">
                            {{ 'txtLoginKeyLabel'|trans }}
                        </label>
                    </div>
                    <div class="form-group col-md-4">
                        <input
                                id="_auth_code"
                                type="text"
                                name="{{ authCodeParameterName }}"
                                autocomplete="one-time-code"
                                autofocus
                                {#
                                https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete
                                If your 2fa methods are using numeric codes only, add these attributes for better user experience:
                                inputmode="numeric"
                                pattern="[0-9]*"
                                #}
                                class="form-control"
                                placeholder="{{ 'txtLoginKeyPlaceholder'|trans }}" required
                        />
                    </div>
                    <div class="form-group col-md-4">
                        <a href="{{ path('2fa_resend_auth_code') }}"
                           class="btn btn-info">{{ 'txtResendLoginKey'|trans }}
                        </a>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="form-group col-md-4"></div>
                    <div class="form-group col-md-8">
                        <input type="submit" class="btn btn-primary" value="{{ 'cta_login'|trans }}">
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}