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

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

    <div class="inputWrap">

        <chosen
                :options="genders"
                placeholder="Choose Gender"
                v-model="basket.address.shipping.gender"
                class="selectGender"
                @input="callUpdate('store_details')"
                @focus="clearError('errors.address.shipping.gender')"
                id="shippingGender"
                name="shipping_gender"

        ></chosen>

    </div>

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

<div class="row"
    v-bind:class="{
        'errorWrap showError': hasField('errors.address.shipping.firstname')
    }"
>
    <label for="shippingFirstName">
        First Name<sup>*</sup>
    </label>

    <div class="inputWrap">

        <input maxlength="20"
            type="text"
            name="shipping_first_name"
            id="shippingFirstName"
            v-on:focus="clearError('errors.address.shipping.firstname')"
            v-model="basket.address.shipping.firstname"
            class="text"
        />

    </div>

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

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

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

    <label for="shippingSurname">
        Last Name<sup>*</sup>
    </label>

    <div class="inputWrap">
        <input maxlength="20"
            type="text"
            name="shipping_last_name"
            id="shippingSurname"
            v-on:focus="clearError('errors.address.shipping.lastname')"
            v-model="basket.address.shipping.lastname"
            class="text"
        />
    </div> <!-- .inputWrap -->

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

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


<div class="row">
    <label for="shippingCountry">
        Country<sup>*</sup>
    </label>
    <div class="inputWrap">

        <chosen
                :options="countries"
                placeholder="Select country"
                v-model="basket.address.shipping.country"
                class="selectCountry"
                @input="callUpdate('store_details')"
                @focus="clearError('errors.address.shipping.country')"
                id="shippingCountry"
                name="shipping_country"

        ></chosen>

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

{% if paf_enabled %}
    <div class="row"
        v-bind:class="{
            'errorWrap showError': hasField('errors.address.shipping.postcode')
        }"
    >
        <label class="postcode" for="shippingPostcodeSearch">
            Postcode/Zip<sup v-show="hasPostcodes('shipping')">*</sup>
        </label>

        <div class="inputWrap" :class="[pafSearchEnabled('shipping') ? 'buttonInline' : '']">

            <input maxlength="10"
                type="text"
                name="shipping_postcode"
                id="shippingPostcodeSearch"
                v-on:focus="clearError('errors.address.shipping.postcode')"
                v-model="basket.address.shipping.postcode"
                class="text postcode-search"
            />

            <button type="submit"
                id="shippingPostcodeSubmit"
                class="button"
                @click.prevent="triggerPAF('shipping')"
                v-show="pafSearchEnabled('shipping')"
                name="submit[shipping_postcode]"
            >
                Find Address
            </button>

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

        <div class="validationMessage"
            v-if="hasField('errors.address.shipping.postcode')"
        >
            [% errors.address.shipping.postcode %]
        </div> <!-- .validationMessage -->

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

    <div class="row"
        v-if="hasAddresses('shipping') && pafSearchEnabled('shipping')"
    >
        <label for="shipping_address_list">
            Please select<sup>*</sup>
        </label>

        <div class="inputWrap">


            <chosen
                    :options="address_list.shipping"
                    placeholder="Select address"
                    v-model="paf_address.shipping"
                    class="selectAddress"
                    id="shipping_address_list"
                    name="shipping_address_list"
                    @input="setPafAddress('shipping')"

            ></chosen>


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

    </div>

{% endif %}

<div class="row"
    v-bind:class="{
        'errorWrap showError': hasField('errors.address.shipping.address1')
    }"
>
    <label for="shippingAddress1">
        Address Line 1<sup>*</sup>
    </label>

    <div class="inputWrap">
        <input maxlength="100"
            type="text"
            name="shipping_address_line_1"
            id="shippingAddress1"
            v-on:focus="clearError('errors.address.shipping.address1')"
            v-model="basket.address.shipping.address1"
            class="text"
        />
    </div> <!-- .inputWrap -->

    <div class="validationMessage"
        v-if="hasField('errors.address.shipping.address1')"
    >
        [% errors.address.shipping.address1 %]
    </div> <!-- .validationMessage -->

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

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

    <label for="shippingAddress2">
        Address Line 2
    </label>

    <div class="inputWrap">
        <input maxlength="100"
            type="text"
            name="shipping_address_line_2"
            id="shippingAddress2"
            v-on:focus="clearError('errors.address.shipping.address2')"
            v-model="basket.address.shipping.address2"
            class="text"
        />
    </div>

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

</div>

<div class="row"
    v-bind:class="{
        'errorWrap showError': hasField('errors.address.shipping.city')
    }"
>
    <label for="shippingCity">
        City<sup>*</sup>
    </label>

    <div class="inputWrap">
        <input maxlength="39"
            type="text"
            name="shipping_city"
            id="shippingCity"
            v-on:focus="clearError('errors.address.shipping.city')"
            v-model="basket.address.shipping.city"
            class="text"
        />
    </div>

    <div class="validationMessage"
        v-if="hasField('errors.address.shipping.city')"
    >
        [% errors.address.shipping.city %]
    </div> <!-- .validationMessage -->

</div>


{% if not paf_enabled %}
    <div class="row"
        v-bind:class="{
            'errorWrap showError': hasField('errors.address.shipping.postcode')
        }"
    >
        <label for="noPafShippingPostcode">
            Postcode/Zip<sup v-show="hasPostcodes('shipping')">*</sup>
        </label>

        <div class="inputWrap">

            <input maxlength="10"
                type="text"
                name="shipping_postcode"
                id="noPafShippingPostcode"
                v-on:focus="clearError('errors.address.shipping.postcode')"
                v-model="basket.address.shipping.postcode"
                class="text"
            />

        </div>

        <div class="validationMessage"
            v-if="hasField('errors.address.shipping.postcode')"
        >
            [% errors.address.shipping.postcode %]
        </div> <!-- .validationMessage -->

    </div> <!-- .row -->
{% endif %}



<div class="row shippingState"
    v-show="hasStates('shipping')"
    v-bind:class="{
        'errorWrap showError': hasField('errors.address.shipping.state')
    }"
>
    <label for="shippingState">
        State<sup>*</sup>
    </label>

    <div class="inputWrap">
        <select name="shipping_state"
            v-select:store_details="basket.address.shipping.state"
            class=""
            id="shippingState"
        >
            <option value="">Choose State</option>
            <option v-for="(state, key) in state_list.shipping"
                :value="key"
            >
                [% state %]
            </option>
        </select>
    </div> <!-- .inputWrap -->

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

</div> <!-- .shippingState -->

<div class="row"
     v-bind:class="{
        'errorWrap showError': hasField('errors.address.shipping.notes')
    }"
>
    <label for="shippingCity">
        Reason for shipping to different address than billing address<sup>*</sup>
    </label>

    <div class="inputWrap">
        <textarea
                v-on:focus="clearError('errors.address.shipping.notes')"
                v-model="basket.address.shipping.notes"
                class="text"></textarea>
    </div>

    <div class="validationMessage"
         v-if="hasField('errors.address.shipping.notes')"
    >
        [% errors.address.shipping.notes %]
    </div> <!-- .validationMessage -->

</div>
