
<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 -->

<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>


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

    <div class="inputWrap">

        <input maxlength="10"
            type="text"
            name="shipping_postcode"
            id="shippingPostcode"
            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 -->



<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>
