
{#
    LimeSurvey
    Copyright (C) 2007-2017 The LimeSurvey Project Team / Louis Gac
    All rights reserved.
    License: GNU/GPL License v2 or later, see LICENSE.php
    LimeSurvey is free software. This version may have been modified pursuant
    to the GNU General Public License, and as distributed it includes or
    is derivative of works licensed under the GNU General Public License or
    other free or open source software licenses.
    See COPYRIGHT.php for copyright notices and details.

    (¯`·._.·(¯`·._.· Registration form._.·´¯)·._.·´¯)

    This is the registration form for participant registration on a survey.

#}
<div class="{{ aSurveyInfo.class.registerform }} row" {{ aSurveyInfo.attr.registerform }}>
    {{ C.Html.form(aSurveyInfo.sRegisterFormUrl,'post',({'id' : 'limesurvey', 'role' : 'form', 'class' : 'form'})) }}

    {{aSurveyInfo.registerform.hiddeninputs}}

    <div class='{{ aSurveyInfo.class.registerformcol }} col-lg-8 offset-lg-2' {{ aSurveyInfo.attr.registerformcol }}>
        <div class="ls-js-hidden mb-3">
            {{ include('./subviews/navigation/language_changer.twig') }}
        </div>
        {# Participants first name #}
        <div class='{{ aSurveyInfo.class.registerformcolrow }} mb-3' {{ aSurveyInfo.attr.registerformcolrow }}>
            <label for='register_firstname' class='{{ aSurveyInfo.class.registerformcolrowlabel }} control-label '>{{ gT("First name:") }}</label>
            <div class="">
                {{ C.Html.textField('register_firstname', aSurveyInfo.sFirstName, ({'id' : 'register_firstname','class' : 'form-control'})) }}
            </div>
        </div>

        {# Participants last name #}
        <div class='{{ aSurveyInfo.class.registerformcolrowb }} mb-3' {{ aSurveyInfo.attr.registerformcolrowb }}>
            <label {{ aSurveyInfo.attr.registerformcolrowblabel }}  class='{{ aSurveyInfo.class.registerformcolrowblabel }} control-label '>{{ gT("Last name:") }}</label>
            <div {{ aSurveyInfo.attr.registerformcolrowbdiv }} >
                {{ C.Html.textField('register_lastname', aSurveyInfo.sLastName, ({'id' : 'register_lastname', 'class' : 'form-control'})) }}
            </div>
        </div>

        {# Participants email #}
        <div class='{{ aSurveyInfo.class.registerformcolrowc }} mb-3' {{ aSurveyInfo.attr.registerformcolrowc }}>
            <label {{ aSurveyInfo.attr.registerformcolrowclabel }} class='{{ aSurveyInfo.class.registerformcolrowclabel }}  control-label'> {{ gT("Email address:") }} {{ include('./subviews/registration/required.twig') }}</label>
            <div {{ aSurveyInfo.attr.registerformcolrowcdiv }}  >
                {{ C.Html.emailField('register_email', aSurveyInfo.sEmail, ({'id' : 'register_email','class' : 'form-control input-sm','required' : true})) }}
            </div>
        </div>

        {# Loop to add extra attributes #}
        {% for key, aExtraAttribute in aSurveyInfo.aExtraAttributes  %}
            <div class=' {{ aSurveyInfo.class.registerformextras }} row mb-3' {{ aSurveyInfo.attr.registerformextras }} >
                {% set registerKey = "register_" ~ key %}
                <label for="{{ registerKey }}" class='{{ aSurveyInfo.class.registerformextraslabel }} control-label '> {{ aExtraAttribute.caption }} {% if aExtraAttribute.mandatory == 'Y' %}{{ include('./subviews/registration/required.twig') }}{% endif %}</label>
                <div {{ aSurveyInfo.attr.registerformcolrowcdiv }} >
                    {% if aExtraAttribute.type == 'DD' and aExtraAttribute.type_options is defined %}
                        {# Dropdown #}
                        {% if aExtraAttribute.type_options is iterable and aExtraAttribute.type_options|length > 0 %}
                            {% if aExtraAttribute.mandatory == 'Y' %}
                                {{ C.Html.dropDownList(registerKey, aSurveyInfo.aAttribute[key], aExtraAttribute.type_options, {'id': registerKey, 'class': 'form-select ls-important-field'}) }}
                            {% else %}
                                {{ C.Html.dropDownList(registerKey, aSurveyInfo.aAttribute[key], {'' : ''}|merge(aExtraAttribute.type_options), {'id': registerKey, 'class': 'form-select ls-important-field'}) }}
                            {% endif %}
                        {% else %}
                            {# Fall back to text field when options are missing #}
                            {{ C.Html.textField(registerKey, aSurveyInfo.aAttribute[key], {'id': registerKey, 'class': 'form-control ls-important-field'}) }}
                        {% endif %}
                    {% elseif aExtraAttribute.type == 'DP' %}
                        {# Date Picker #}
                        <div id="{{ registerKey }}_datetimepicker" class="input-group answer-item date-timepicker-group" data-basename="{{ registerKey }}">
                            {{ C.Html.textField(registerKey, aSurveyInfo.aAttribute[key], {
                                'id': registerKey,
                                'class': 'form-control date-control date ls-important-field',
                                'data-locale': aSurveyInfo.surveyls_language|default('en'),
                                'data-format': aSurveyInfo.surveyls_dateformat_js,
                                'data-showclear': '1',
                                'data-allowinputtoggle': '1',
                                'data-theme': aSurveyInfo.options.thememode|default('light'),
                            }) }}
                            <div class="input-group-addon btn btn-primary datepicker-icon">
                                <i class="ri-calendar-2-fill" aria-hidden="true"></i>
                                <span class="visually-hidden">{{ gT("Open date/time selector") }}</span>
                            </div>
                        </div>
                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                initDatePicker(document.getElementById('{{ registerKey }}'));
                            });
                        </script>
                    {% else %}
                        {# Text Box (TB) - default #}
                        {{ C.Html.textField(registerKey, aSurveyInfo.aAttribute[key], {'id': registerKey, 'class': 'form-control ls-important-field'}) }}
                    {% endif %}
                </div>
            </div>
        {% endfor %}

        {# Captcha box #}
        {% if aSurveyInfo.bCaptcha %}
            <div class="{{ aSurveyInfo.class.registerformcaptcha }} mb-3" {{ aSurveyInfo.attr.maincolformdivb }}>
                <label class='{{ aSurveyInfo.class.registerformcaptchalabel }} control-label ' {{ aSurveyInfo.attr.registerformcaptchalabel }} >{{ gT("Please solve the following equation:") }} {{ include('./subviews/registration/required.twig') }}</label>
                <div class="row" {{ aSurveyInfo.attr.registerformcaptchadiv }}>
                    <div class="{{ aSurveyInfo.class.registerformcaptchadivb }} col-2" {{ aSurveyInfo.attr.registerformcaptchadivb }}>
                            {{ renderCaptcha().renderOut() }}
                    </div>
                    <div class="{{ aSurveyInfo.class.registerformcaptchadivc }} col-1 align-self-center" {{ aSurveyInfo.attr.registerformcaptchadivc }}>
                        <a href="#" class="btn btn-sm btn-outline-secondary" id="reloadCaptcha" title="{{ gT("Reload captcha") }}" data-bs-toggle="captcha"><i class="fa fa-refresh"></i></a>
                    </div>
                    <div class="col-9 align-self-center">
                        <input class='form-control {{ aSurveyInfo.class.registerformcaptchainput }}' {{ aSurveyInfo.attr.registerformcaptchainput }}>
                    </div>
                </div>
            </div>
        {% endif %}

        {# Mandatory information #}
        <div class='{{ aSurveyInfo.class.registermandatoryinfo }}' {{ aSurveyInfo.attr.registermandatoryinfo }} >
                {{ gT('Fields marked with an asterisk are mandatory.')}}
        </div>

        {# Survey policy #}
        {% if ( aSurveyInfo.showregisterpolicy == 'Y' ) %}
            {{include( './subviews/registration/register_privacy.twig')}}
        {% endif %}

        {# Submit register button #}
        <div class='{{ aSurveyInfo.class.registersave }} mb-3' {{ aSurveyInfo.attr.registersave }} >
            <div class='{{ aSurveyInfo.class.registersavediv }} float-end' {{ aSurveyInfo.attr.registersavediv }} >
                {% set continue = gT("Continue",'unescaped') %}
                <button {{ aSurveyInfo.attr.registersavedivbutton }}  class='{{ aSurveyInfo.class.registersavedivbutton }} btn btn-outline-secondary' >
                    {{ continue }}
                </button>
            </div>
        </div>

        {# If there is additional form parts, a.e. trhough a plugin render it out here #}
    </div>
    <div class='{{ aSurveyInfo.class.registerformcoladdidtions }} col-lg-8 offset-lg-2' {{ aSurveyInfo.attr.registerformcoladdidtions }}>
        {{ aSurveyInfo.formAdditions | raw  }}
    </div>

    {{ C.Html.endForm }}
</div>
