{% extends 'layout/security.html.twig' %}

{% block body %}

    <div class="w-100">
        <div class="form w-100 mb-13" id="kt_sing_in_two_factor_form">

            {% if authenticationError %}

                <div class="alert bg-light-danger border border-danger border-dashed d-flex flex-column flex-sm-row w-100 p-5 mb-10">

                    <i class="ki-duotone ki-lock-2 fs-2hx text-danger me-4 mb-5 mb-sm-0">
                        <i class="path1"></i>
                        <i class="path2"></i>
                        <i class="path3"></i>
                        <i class="path4"></i>
                        <i class="path5"></i>
                    </i>

                    <div class="d-flex flex-column pe-0 pe-sm-10">
                        <h5 class="mb-1">{{ 'authentication_error'|trans({},'cms') }}</h5>
                        <span>{{ authenticationError|trans(authenticationErrorData, 'SchebTwoFactorBundle') }}</span>
                    </div>

                </div>
            {% endif %}

            <div class="text-center mb-10">
                <img alt="Logo" class="mh-125px" src="https://preview.keenthemes.com/metronic8/demo1/assets/media/svg/misc/smartphone-2.svg" />
            </div>



            <div class="text-center mb-5">
                <h1 class="text-dark fw-bolder mb-3">{{ 'two_step_verification'|trans({},'cms') }}</h1>
                <div class="text-gray-500 fw-semibold fs-6 mb-5">{{ 'two_step_verification_description'|trans({},'cms') }}</div>

                <div class="card border bg-light border-dashed shadow-none border">
                    <div class="card-body d-flex align-items-center p-2">
                        <div class="symbol  symbol-50px">
                            <div class="symbol-label bg-gray-200 fs-2 fw-semibold text-">{{ app.user.fullName|first|upper }}</div>
                        </div>
                        <span class="ms-3 text-gray-700  parent-hover-primary fs-6 fw-bold">
                            {{ app.user.fullName }}
                        </span>

                        <a href="{{ path('cms_logout') }}" class="btn btn-icon btn-custom btn-icon-muted btn-active-color-danger ms-auto w-30px h-30px w-md-40px h-md-40px position-relative">
                            <i class="ki-duotone ki-cross-circle fs-2 fs-lg-1">
                                <span class="path1"></span>
                                <span class="path2"></span>
                            </i>
                        </a>
                    </div>
                </div>

            </div>

            <div class="mb-10" data-controller="auth">
                <form action="" >
                    <div class="d-flex flex-wrap flex-stack">
                        {% for i in 1..6 %}
                            <div class="col">
                                <div class="mb-4">
                                    <input type="text" class="form-control bg-transparent h-60px w-60px fs-2qx text-center mx-1 my-2 form-control-single-number" name="verification{{ i }}" maxlength="1" autocomplete="off" autocapitalize="off" spellcheck="false" {{ (loop.first) ? 'autofocus' }}  data-action="input->auth#saveValue" data-target="auth.input">
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </form>

                <form id="verificationForm" class="d-block" action="{{ checkPathUrl ? checkPathUrl: path(checkPathRoute) }}" method="post">
                    <input required id="verificationField" type="hidden" name="{{ authCodeParameterName }}" maxlength="6" autocomplete="one-time-code"  data-target="auth.result" readonly/>

                    {% if isCsrfProtectionEnabled %}
                        <input type="hidden" name="{{ csrfParameterName }}" value="{{ csrf_token(csrfTokenId) }}">
                    {% endif %}

                    <div class="d-grid mb-5">
                        <button type="submit" class="btn btn-lg btn-primary fw-bold" data-target="auth.submitButton">{{ 'verify_my_account'|trans({},'cms') }}</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="text-center fw-semibold fs-5">
            <span class="text-muted me-1">{{ 'havent_received_it'|trans({},'cms') }}</span>
            <a href="{{ path('cms_resend_code') }}" class="link-primary fs-5 me-1">{{ 'resend_a_new_code'|trans({},'cms') }}</a>
        </div>
    </div>

{% endblock %}