{% extends "./subviews/logincomponents/captcha.twig" %}

    {% block formheading %}
        {{ gT("Please enter your access code to participate in this survey.") }}
    {% endblock %}

    {% block description %}
        <div class="col-lg-12">
            <p class='{{ aSurveyInfo.class.maincoldivdivbp }} alert alert-info' {{ aSurveyInfo.attr.maincoldivdivbp }}>
                {% if aSurveyInfo.aForm.token == null %}
                    {{ gT("If you have been issued an access code, please enter it in the box below and click continue.") }}
                {% else %}
                    {{ gT("Please confirm the access code by answering the security question below and click continue.") }}
                {% endif %}
            </p>
        </div>
    {% endblock %}


    {% block formcontent %}
        <div class="col-lg-12">
            <div class='{{ aSurveyInfo.class.maincolform }}' {{ aSurveyInfo.attr.maincolform }}>
                <label class='{{ aSurveyInfo.class.maincolformlabel }} control-label' {{ aSurveyInfo.attr.maincolformlabel }}>
                    {{ gT("Access code") }}<small class="{{ aSurveyInfo.class.maincolformlabelsmall }} asterisk ri-asterisk small " {{ aSurveyInfo.attr.maincolformlabelsmall }} ></small>
                    <span class="{{ aSurveyInfo.class.maincolformlabelspan }} visually-hidden asterisk " {{ aSurveyInfo.attr.maincolformlabelspan }}>
                    ( {{ gT("Mandatory") }} )
                    </span>
                </label>

                <div class='{{ aSurveyInfo.class.maincolformdiva }}' {{ aSurveyInfo.attr.maincolformdiva }}>
                    {% if aSurveyInfo.aForm.token == null %}
                        <div class='input-group ls-important-field'>
                            <input
                                class='{{ aSurveyInfo.class.maincolformdivainput }} form-control' 
                                {{ aSurveyInfo.attr.maincolformdivainput }}
                                placeholder="{{ gT("Enter access code") }}"
                            >
                            <button type="button"  class="input-group-text ls-no-js-hidden" id="ls-toggle-token-show" data-passwordstate="hidden">
                                <i class="fa fa-eye ls-password-hidden" aria-hidden="true"></i><span class="visually-hidden ls-password-hidden">gT("Show code")</span>
                                <i class="fa fa-eye-slash d-none ls-password-shown" aria-hidden="true"></i><span class="visually-hidden d-none ls-password-shown">gT("Hide code")</span>
                            </button>
                        </div>
                        <script>
                            $("#ls-toggle-token-show").on('click', function () {
                                if ($(this).data('passwordstate') == "hidden") {
                                    $(this).prev("input").attr('type', 'text');
                                    $(this).find('.ls-password-hidden').addClass('d-none');
                                    $(this).find('.ls-password-shown').removeClass('d-none');
                                    $(this).data('passwordstate', 'shown');
                                } else {
                                    $(this).prev("input").attr('type', 'password');
                                    $(this).find('.ls-password-hidden').removeClass('d-none');
                                    $(this).find('.ls-password-shown').addClass('d-none');
                                    $(this).data('passwordstate', 'hidden');
                                }
                            });
                        </script>
                    {% else %}
                        {# token is OK (no need update) , captcha not #}
                        {% set passwordFieldHtmlOptions = {
                            'id'       : 'token',
                            'required' : true,
                            'readonly' : true,
                            'class'    : 'form-control ls-important-field'
                        } %}

                        {{ C.Html.passwordField(
                            'token',
                            (( aSurveyInfo.aForm.token )),
                        (passwordFieldHtmlOptions)
                        ) }}
                    {% endif %}
                </div>
            </div>

            {# CAPTACHA INSIDE TOKEN FORM #}
            {% if ( aSurveyInfo.aForm.bCaptchaEnabled == true ) %}
                <div class="{{ aSurveyInfo.class.maincolformdivb }}" {{ aSurveyInfo.attr.maincolformdivb }}>
                    <label class='{{ aSurveyInfo.class.maincolformdivblabel }} control-label' {{ aSurveyInfo.attr.maincolformdivblabel }} >
                        {{ gT("Please solve the following equation:") }}<small class="{{ aSurveyInfo.class.maincolformdivblabelsmall }} superset asterisk ri-asterisk" {{ aSurveyInfo.attr.maincolformdivblabelsmall }} >&nbsp;</small>
                        <span class="{{ aSurveyInfo.class.maincolformdivblabelspan }} visually-hidden asterisk" {{ aSurveyInfo.attr.maincolformdivblabelspan }}>
                        ( {{ gT("Mandatory") }} )
                        </span>
                    </label>
                    <div class="row">
                        <div class="captcha-container col-xl-3 col-lg-12 align-items-center">
                            {{ renderCaptcha().renderOut() }}
                            <a href="#" class="btn btn-outline-secondary" id="reloadCaptcha"
                               title="{{ gT("Reload captcha") }}" data-toggle="captcha"><i
                                        class="ri-refresh-line"></i></a>
                        </div>
                        <div class="{{ aSurveyInfo.class.maincolformdivbdiv }} col-xl-9 col-lg-12 captcha-input align-self-center" {{ aSurveyInfo.attr.maincolformdivbdiv }}>
                            <input class='form-control ls-important-field {{ aSurveyInfo.class.maincolformdivbdivdivinput }}' {{ aSurveyInfo.attr.maincolformdivbdivdivinput }} placeholder="{{ gT("Enter result here - numbers only") }}">
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if ( aSurveyInfo.showtokenpolicy == 'Y' ) %}
                {{include( './subviews/logincomponents/token_privacy.twig')}}
            {% endif %}

            {{ aSurveyInfo.aForm.hiddenFields }}

            <div class='{{ aSurveyInfo.class.maincolformdivc }} ' {{ aSurveyInfo.attr.maincolformdivc }}>
                <div
                        class='{{ aSurveyInfo.class.maincolformdivcdiv }}' {{ aSurveyInfo.attr.maincolformdivcdiv }}>
                    <button type="submit"
                            class='{{ aSurveyInfo.class.maincolformdivcdivbutton }} btn btn-primary' {{ aSurveyInfo.attr.maincolformdivcdivbutton }}>
                        {{ gT("Continue") }}
                    </button>
                </div>
            </div>
        </div>
    {% endblock %}
