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

    <div class="inputWrap">

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

        ></chosen>

    </div>
</div>

<div class="row"
     v-bind:class="{
            'errorWrap showError': hasField('errors.info.contact_no') || hasField('errors.info.phone_prefix')
        }"
>
    <label for="phoneNo">
        Phone number<sup>*</sup>
    </label>

    <div class="inputWrap">


        <input maxlength="20"
               type="tel"
               name="cardholder_phone_number"
               id="phoneNo"
               v-on:focus="clearError('errors.info.contact_no')"
               v-model="basket.info.contact_no"
               class="text"
        />

        <input type="hidden"
               max="5"
               name="cardholder_phone_prefix"
               id="phonePrefix"
               v-model="basket.info.phone_prefix"
               v-on:focus="clearError('errors.info.phone_prefix')"
               class="text prefix"
               autocomplete="off"
               readonly
        />
    </div>

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

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

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

    <label for="billingAddress1">
        Address Line 1<sup>*</sup>
    </label>

    <div class="inputWrap">

        <input maxlength="100"
            {#v-bind:readonly="!basket.address.billing.enabledFields"#}
            type="text"
            v-on:focus="clearError('errors.address.billing.address1')"
            name="billing_address_line_1"
            id="billingAddress1"
            v-model="basket.address.billing.address1"
            class="text"
        />
    </div>

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

</div>

<div class="row"
    v-bind:class="{
        'errorWrap showError': hasField('errors.address.billing.address2')
    }"
>
    <label for="billingAddress2">
        Address Line 2
    </label>
    <div class="inputWrap">
        <input maxlength="100"
            {#v-bind:readonly="!basket.address.billing.enabledFields"#}
            type="text"
            name="billing_address_line_2"
            id="billingAddress2"
            v-on:focus="clearError('errors.address.billing.address2')"
            v-model="basket.address.billing.address2"
            class="text"
        />
    </div>

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

</div>

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

    <div class="inputWrap">
        <input maxlength="39"
            {#v-bind:readonly="!basket.address.billing.enabledFields"#}
            type="text"
            name="billing_city"
            id="billingCity"
            v-on:focus="clearError('errors.address.billing.city')"
            v-model="basket.address.billing.city"
            class="text"
        />
    </div>

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

</div>

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

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

    </div>

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

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

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

<div class="row billingState"
    v-show="hasStates('billing')"
    v-bind:class="{
        'errorWrap showError': hasField('errors.address.billing.state')
    }"
>

    <label class="country" for="billingState">
        State<sup>*</sup>
    </label>

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

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

</div> <!-- #bill-state -->

{% if basket.allow_alternate_delivery %}

    <div class="row alt_del checkboxRow">

        <input type="checkbox"
            name="shipping_address"
            id="shippingAddress"
            @change="shippingTrigger"
            v-model="basket.billing_address_used"
            v-bind:true-value="1"
            v-bind:false-value="0"
        />

        <label for="shippingAddress">
            Ship to this address?
        </label>

    </div>

{% else %}

    <input type="hidden"
        name="shipping_address"
        v-model="basket.billing_address_used"
        v-bind:true-value="1"
        v-bind:false-value="0"
        value="1"
    />

{% endif %}
