<fieldset class="idCheck" v-if="basket.require_id_check_cascade">

    <h6>ID Check</h6>

    <div class="row">


        <p class="error">
            Unfortunately your identity could not be verified using given data.
            Please fill out the additional information to confirm your identity.
        </p>

        <div class="row"  v-bind:class="{
                'errorWrap showError': hasField('errors.info.id_type')
            }">

            <label for="cardholder_id_ty">
                ID Document Type<sup>*</sup>
            </label>

            <div class="inputWrap">


                <chosen
                        :options="id_check_data.idOptions"
                        placeholder="Please select"
                        v-model="basket.info.id_type"
                        class="selectIdType"
                        @input="clearIdCheckNumber(basket.info.id_type)"
                        id="cardholder_id_ty"
                        name="cardholder_id_ty"

                ></chosen>
                {#
                <select name="cardholder_id_ty"
                        id="cardholder_id_ty"
                        v-model="basket.info.id_type"
                        @focus="clearError('errors.info.id_type');"
                        v-select:id_check_type="basket.info.id_type"
                        class="text"">
                    <option value="">Please select</option>
                    <option value="passport">Passport</option>
                    <option value="id_card">ID Card</option>
                    <option value="drivers_license">Drivers License</option>
                </select>
                #}

            </div>

            <div class="validationMessage"
                 v-if="hasField('errors.info.id_type')"
            >
                <span>[% errors.info.id_type %]</span>
            </div>

        </div> <!-- .row -->

        <div class="row idCheckFieldsSection" v-if="basket.info.id_type"
             v-bind:class="{
                'errorWrap showError': hasField('errors.info.id_number')
            }"
        >

            <div class="innerIdCheckFields">

                <div class="multiRowLabel">

                    <label>

                        <span v-if="basket.info.id_type == 'drivers_license'">Drivers License ID Number</span>
                        <span v-if="basket.info.id_type == 'passport'">Passport ID Number</span>
                        <span v-if="basket.info.id_type == 'id_card'">ID Card Number</span>
                        <sup>*</sup>

                    </label>

                    <div class="idHelpLinkWrap">

                        <a
                                class="passportHelpLink transparentOverlay"
                                :href="'{{ settings.THEME_PATH }}/images/id_check/' + basket.info.id_type + '.png'"
                                v-overlay
                        >
                            <i class="fal fa-info-circle" aria-hidden="true"></i> Where can I find this?
                        </a>

                    </div> <!-- .idHelpLinkWrap -->

                </div> <!-- .multiRowLabel -->


                {# Example: L65284563 8 GBR 7604119 M 2201018 B85475BB<<<<<< 06 #}
                {# Lengths: 999999999 1 333 7777777 1 7777777 ======14====== 22 #}
                <div class="inputWrap" v-if="basket.info.id_type == 'passport'">

                    <div class="idCheckFields passportFields">

                        <div
                                class="row"
                                :class="[field.hidden ? 'hideme' : '']"
                                v-for="(field, i) in id_check_data.passport"
                        >

                            <input :type="field.hidden ? 'hidden' : 'text'"
                                   v-model="id_check_data.passport[i].value"
                                   @focus="clearError('errors.info.id_number')"
                                   @blur="validateIdCheckField($event, 'passport', i)"
                                   @input="nextFieldIdCheck($event, 'passport', i)"
                                   :placeholder="field.placeholder"
                                   :maxlength="field.length"
                                   :id="'id_check_passport_' + i"
                            />

                        </div> <!-- .inputWrap -->

                    </div> <!-- .idCheckFields -->

                    <div class="exampleValue">
                        <span>Example:</span>
                        <span>107185702 2 GBR 8501178 F 1601312 <<<<<<<<<<<<<< 02</span>
                    </div> <!-- .exampleValue -->

                </div>


                {# Example: STONE 704116 R99FG #}
                {# Lengths  55555 666666 55555 #}
                <div class="inputWrap" v-if="basket.info.id_type == 'drivers_license'">

                    <div class="idCheckFields driversLicenseFields">

                        <div
                                class="row"
                                :class="[field.hidden ? 'hideme' : '']"
                                v-for="(field, i) in id_check_data.drivers_license"
                        >

                            <input :type="field.hidden ? 'hidden' : 'text'"
                                   v-model="id_check_data.drivers_license[i].value"
                                   @focus="clearError('errors.info.id_number')"
                                   @blur="validateIdCheckField($event, 'drivers_license', i)"
                                   @input="nextFieldIdCheck($event, 'drivers_license', i)"
                                   :placeholder="field.placeholder"
                                   :maxlength="field.length"
                                   :id="'id_check_drivers_license_' + i"
                            />

                        </div> <!-- .inputWrap -->

                    </div> <!-- .idCheckFields -->

                    <div class="exampleValue">
                        <span>Example:</span>
                        <span>MORGA 753116 SM9IJ</span>
                    </div> <!-- .exampleValue -->

                </div>


                {# Example: IR GBR 1234567897 <<<<<<<<<<<<<<< 5605248 F 2201018 GBR <<<<<<<<<<< 4 #}
                {# Lengths: 22 333 ====10==== =======15====== 7777777 1 7777777 333 =====11==== 1 #}
                <div class="inputWrap" v-if="basket.info.id_type == 'id_card'">

                    <div class="idCheckFields idCardFields">

                        <div
                                class="row"
                                :class="[field.hidden ? 'hideme' : '']"
                                v-for="(field, i) in id_check_data.id_card"
                        >

                            <input :type="field.hidden ? 'hidden' : 'text'"
                                   v-model="id_check_data.id_card[i].value"
                                   @focus="clearError('errors.info.id_number')"
                                   @blur="validateIdCheckField($event, 'id_card', i)"
                                   @input="nextFieldIdCheck($event, 'id_card', i)"
                                   :placeholder="field.placeholder"
                                   :maxlength="field.length"
                                   :id="'id_check_id_card_' + i"
                            />

                        </div> <!-- .inputWrap -->

                    </div> <!-- .idCheckFields -->

                    <div class="exampleValue">
                        <span>Example:</span>
                        <span>ID GBR 1234567897 <<<<<<<<<<<<<<< 7704145 F 1604117 GBR <<<<<<<<<<< 4 </span>
                    </div> <!-- .exampleValue -->

                </div>


                {# Hidden id_number field row - Populated via the individual fields that show based on type #}
                <div class="row hiddenIdRow">

                    <input type="hidden"
                           name="cardholder_id_number"
                           id="cardholder_id_number"
                           v-model="basket.info.id_number"
                           @focus="clearError('errors.info.id_number')"
                           placeholder="ID Number"
                    />

                    <div
                         class="error"
                         v-if="hasField('errors.info.id_number')"
                    >
                        <span>[% errors.info.id_number %]</span>
                    </div>

                    <div
                            class="error"
                            v-if="!hasField('errors.info.id_number') && id_check_data.showErrors"
                    >
                        <p>
                            The ID number you have entered appears to be incorrect.
                            Please ensure you have entered the number exactly
                            as it appears on your ID.
                        </p>
                        <p>
                            Please use the "Where can I find this" link
                            above for help finding the ID number.
                        </p>
                    </div>


                </div><!-- .row -->

            </div> <!-- .innerIdCheckFields -->

        </div>

    </div><!-- .row -->

</fieldset>
