<fieldset class="personalDetails">

    {% if member.is_verified is empty %}
        <div class="row" v-if="basket.require_id_check">

            <div class="alert complyMessage">
                <span>
                    Please enter your first and last name exactly as it appears on your ID.
                    This is to allow an ID verification.
                </span>
            </div>
        </div>
    {% endif %}




    <div class="row"
         v-bind:class="{
            'errorWrap': hasField('errors.address.billing.gender')
        }"
    >

        <label for="billingGender">
            Gender<sup>*</sup>
        </label>

        <div class="inputWrap">

            <chosen
                    :options="genders"
                    placeholder="Choose Gender"
                    v-model="basket.address.billing.gender"
                    :value="'{{ member.gender }}'"
                    class="selectGender"
                    @input="clearError('errors.address.billing.gender')"
                    @focus="clearError('errors.address.billing.gender')"
                    id="billingGender"
                    name="basket[address][billing][gender]"

            ></chosen>


        </div>

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

    <div class="row"
         v-bind:class="{
            'errorWrap': hasField('errors.address.billing.firstname')
        }"
    >

        <label for="billingFirstname">
            First Name<sup>*</sup>
        </label>

        <div class="inputWrap">
            <input maxlength="20"
                   type="text"
                   name="cardholder_first_name"
                   id="billingFirstname"
                   v-on:focus="clearError('errors.address.billing.firstname')"
                   v-model="basket.address.billing.firstname"
                   class="text"
            />
        </div>

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


    <div class="row"
         v-bind:class="{
            'errorWrap': hasField('errors.address.billing.firstname')
        }"
         v-if="basket.require_id_check_cascade"
    >

        <label for="billingMiddlename">
            Middle Name
        </label>

        <div class="inputWrap">
            <input maxlength="20"
                   type="text"
                   name="cardholder_middle_name"
                   id="billingMiddlename"
                   v-on:focus="clearError('errors.address.billing.middle_name')"
                   v-model="basket.address.billing.middle_name"
                   class="text"
            />
        </div>

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



    <div class="row"
         v-bind:class="{
            'errorWrap showError': hasField('errors.address.billing.lastname')
        }"
    >
        <label for="billingLastname">
            Last Name<sup>*</sup>
        </label>
        <div class="inputWrap">

            <input maxlength="20"
                   type="text"
                   name="cardholder_last_name"
                   id="billingLastname"
                   v-on:focus="clearError('errors.address.billing.lastname')"
                   v-model="basket.address.billing.lastname"
                   class="text"
            />

        </div>

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

    <div class="row"
         v-bind:class="{
            'errorWrap showError': hasField('errors.info.email')
        }"
    >
        <label for="personalEmail">
            Email<sup>*</sup>
        </label>
        <div class="inputWrap">
            <input maxlength="255"
                   type="email"
                   name="cardholder_email"
                   id="personalEmail"
                   v-on:focus="clearError('errors.info.email')"
                   v-model="basket.info.email"
                   class="text"
            />
        </div>

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

    {% if settings.MEMBERS_SECTION and (member.id < 1 or member.emptyPassword()) and settings.MEMBERS_BASKET %}
        {{ include('shop/basket/optional_membership.twig') }}
    {% endif %}


    <div class="row" v-if="basket.contains_doctor_pharmacy_items"
         v-bind:class="{
            'errorWrap showError': hasField('errors.info.dob')
        }"
    >
        <label for="dobDate" class="tooltipRow">
            Date of Birth<sup>* </sup>
            <span class="infoTooltip" v-on:click="triggerTooltip()">
                <i class="far fa-info-circle" aria-hidden="true"></i>
            </span>
            <div class="tooltipContent">
            Due to medication you are ordering, we need to perform an ID verification check. Please see our <a href="/customer-care/privacy-policy/" target="_blank">Privacy Policy</a> for further information
            </div>
        </label>

        <div class="inputWrap dobWrap">
            <input type="tel"
                   max="2"
                   name="cardholder_dob_date"
                   id="dobDate"
                   placeholder="DD"
                   v-model="basket.info.dob_date"
                   v-on:focus="clearError('errors.info.dob')"
                   class="text prefix"/>

            <input type="tel"
                   max="2"
                   name="cardholder_dob_month"
                   id="dobMonth"
                   placeholder="MM"
                   v-model="basket.info.dob_month"
                   v-on:focus="clearError('errors.info.dob')"
                   class="text prefix"/>

            <input type="tel"
                   max="4"
                   name="cardholder_dob_year"
                   id="dobYear"
                   placeholder="YYYY"
                   v-model="basket.info.dob_year"
                   v-on:focus="clearError('errors.info.dob')"
                   class="text prefix"/>


        </div>

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

    </div>



</fieldset> <!-- .personalDetails -->
