{% set aFvDataAttrNames = oViewConf.getViewThemeParam("aFvDataAttrNames") %}
{% set aErrors = oView.getFieldValidationErrors() %}
{% set template_title = "C4S_2FAUTH"|translate %}

{% if not oView.isActive("PsLogin") %}
    {% capture append = "oxidBlock_title" %}
        <h1 class="c4s-account-page-header">{{ template_title }}</h1>
    {% endcapture %}
{% endif %}

{% capture append = "oxidBlock_content" %}
    {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_2fauth", "out/src/js/c4s_2fauth_validation.js"), priority: 25, dynamic: __oxid_include_dynamic }) }}

    <div class="row">
        <div class="col-12 col-md-8">
            {% if oView.isActive("PsLogin") %}
                <div class="card card c4s-account-card h-100">
                    <div class="card-header">
                        <h4 class="card-title">{{ template_title }}</h4>
                    </div>

                    <div class="card-body">
            {% endif %}

                        <p>{{ translate({ ident: "C4S_2FAUTH_PAGE_CONTENT" }) }}</p>

                        <form id="c4s_2fauth_form"
                              name="check_code"
                              action="{{ oViewConf.getSslSelfLink()|raw }}cl=c4s_2auth"
                              method="post"
                        >
                            <input type="hidden" name="fnc" value="validate2FAuthToken">
                            <input type="hidden" name="cl" value="c4s_2fauth">

                            {% if aErrors.oxuser__c4s2fauth_token %}
                                <div class="alert alert-danger">{{ translate({ ident: "C4S_2FAUTH_VALIDATION_MESSAGE" }) }}</div>
                            {% endif %}

                            <div class="row mb-3{% if aErrors %} has-error{% endif %}">
                                <label for="token" class="col-md-3 col-form-label">{{ translate({ ident: "C4S_2FAUTH_TOKEN" }) }}</label>
                                <div class="col-md-9">
                                    <input id="token"
                                           class="form-control{% if aErrors %} is-invalid{% endif %}"
                                           type="text"
                                           name="c4s_2fauth_token"
                                           autocomplete="off"
                                           minlength="6"
                                           maxlength="6"
                                           {% if aFvDataAttrNames %}
                                               {% set sPassWordLengthErrorMessage = "C4S_FORM_VALIDATION_PASSWORD_MIN_LENGTH"|translate %}
                                               {{ aFvDataAttrNames.NotEmpty }}="true"
                                               {{ aFvDataAttrNames.NotEmptyTrim }}="true"
                                               {{ aFvDataAttrNames.NotEmptyMessage }}="{{ translate({ ident: "FV_MESSAGE_EMPTY" }) }}"
                                               {{ aFvDataAttrNames.StringLength }}="true"
                                               {{ aFvDataAttrNames.StringLengthMin }}="6"
                                               {{ aFvDataAttrNames.StringLengthMax }}="6"
                                               {{ aFvDataAttrNames.StringLengthMessage }}="{{ translate({ ident: "C4S_2FAUTH_CODE_LENGTH_VALIDATION" }) }}"
                                           {% endif %}
                                    />
                                </div>
                            </div>

                            <div class="mb-3 d-flex justify-content-between">
                                <a href="{{ oViewConf.getHomeLink()|raw }}"
                                   title="{{ oxcmp_shop.oxshops__oxtitleprefix.value }}"
                                   class="btn btn-outline-primary">
                                    {{ translate({ ident: "BACK_TO_START_PAGE" }) }}
                                </a>
                                <button type="submit" class="btn btn-primary">{{ translate({ ident: "C4S_2FAUTH_TOKEN_SUBMIT" }) }}</button>
                            </div>
                        </form>

            {% if oView.isActive("PsLogin") %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    {{ insert_tracker({title: template_title}) }}
{% endcapture %}

{% if oView.isActive("PsLogin") %}
    {% include "layout/popup.html.twig" %}
{% else %}
    {% include "layout/page.html.twig" with {sidebar: "right", blHideBreadcrumb: true} %}
{% endif %}