<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="no-chosen 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>

{% include 'AccountVerifier/verification_block.twig' with {'verification_type' : 'phone'} %}

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

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

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

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

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

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

    </div>



    <div class="row"
        v-show="hasAddresses('billing') && pafSearchEnabled('billing')"
    >
        <label for="billing_address_list">
            Please select<sup>*</sup>
        </label>

        <div class="inputWrap">

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

            ></chosen>

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

{% endif %}

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

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

            <input maxlength="10"
                type="text"
                name="billing_postcode"
                id="noPafBillingPostcode"
                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>
{% endif %}

<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="no-chosen"
            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 %}
