<div class="totalRow delivery fullWidth" v-if="basket.has_physical_items">


    <div class="sectionTitle" v-if="show_delivery_options && basket.delivery_options.length > 1">
        Delivery
    </div> <!-- .sectionTitle -->

    <div class="costTitle">

        <div
                class="row"
                v-if="show_delivery_options && basket.delivery_options.length > 1"
        >

            <chosen
                    :options="basket.delivery_options"
                    placeholder=""
                    v-model="basket.delivery_selected"
                    class="no-chosen selectDelivery"
                    @input="callUpdate('store_details')"
                    label="name"
                    track-by="id"
                    id="deliveryTime"
                    name="delivery"

            ></chosen>

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

        <div v-else
             class="messageBox"
             :class="{'error': basket.delivery_options.length == 0}"
        >
            <p v-if="basket.zone == 3 && basket.delivery_options.length == 0">
                Unfortunately we are unable to post prescription medication to your country.
                Please see the <a href="{{ delivery_page }}">delivery page</a> for further information
            </p>

            <p v-else v-html="current_delivery_name"></p>

            <input type="hidden"
                   v-if="basket.delivery_options.length == 1"
                   v-model="basket.delivery_selected"
                   name="delivery"
            />
        </div>


    </div> <!-- .costTitle -->

    <div class="cost" v-if="basket.cost_delivery > 0">

        <span v-html="multi_currency(basket.cost_delivery)"></span>

    </div> <!-- .cost -->

    <div class="cost" v-else-if="basket.delivery_selected && basket.cost_delivery == 0">

        <span>FREE</span>

    </div> <!-- .cost -->

    <div class="row deliveryInstructionsWrapper" v-if="show_delivery_options && basket.delivery_options.length > 1" style="padding-top: 15px;">
        <label for="deliveryInstructions">
            Instructions (Optional)
        </label>

        <div class="inputWrap">
            <textarea
                name="delivery_instructions"
                id="deliveryInstructions"
                v-model="basket.delivery_instructions"
                class="text"
            ></textarea>
        </div>
    </div>

    <template v-else>
        <div v-if="basket.delivery_selected && basket.delivery_instructions && basket.delivery_instructions.length" class="deliveryInstructionsNote"><small>Instructions: [% basket.delivery_instructions %]</small></div>
    </template>

    <div
            class="errorRow"
            v-if="hasField('errors.delivery') && basket.delivery_selected"
    >

        <div class="error">

            <p v-html="errors.delivery"></p>

        </div> <!-- .alert error -->

    </div> <!-- .errorRow -->


</div> <!-- .subTotal -->
