{% if hide_inputs == 0 %}
    {{ hooks_do_action('basket_before_table', basket, member) }}
{% endif %}



<div class="basketItems">

    <h5>Items</h5>


    <section v-for="item in basket.items" class="basketItem">

        <div class="basketItemInner"
             :data-id="item.id"
             :class="{'bagItemStockError': item.stock_error}"
        >

            <div class="basketItemImage">

                <a
                        class="imageWrap"
                        href="#"
                        v-if="item.item_image"
                >

                    <img :src="item.item_image" :alt="item.name">

                </a> <!-- .imageWrap -->

                <a
                        class="imageWrap emptyImage"
                        href="#"
                        v-else
                >

                    <img src="/sites/{{ settings.SITE }}/images/placeholders/no-image-items-thumb.png" :alt="item.name">

                </a> <!-- .imageWrap -->


            </div> <!-- .basketItemImage -->

            <div class="basketItemDescription">

                <div v-if="item.nhs_prescription_item" class="descRow 1">
                    <span class="itemTitle">
                        [% item.nhs_prescription_item.name %]
                    </span>
                </div>

                <div v-else class="descRow 2">

                    <a class="itemTitle"
                       v-if="!item.disable_url"
                       v-bind:href="item.item_url"
                       v-html="item.item_name"
                    ></a>

                    <span class="itemTitle"
                          v-else
                          v-html="item.item_name"
                    ></span>

                </div>

                <div class="descRow 3" v-if="typeof item.additional != 'undefined'">

                    <div
                            v-for="addition in item.additional"
                            v-html="addition.html"
                            class="additionals"
                    ></div>

                </div>


                {% if settings.ITEMS_SIZES == true %}

                    <div class="descRow 4">

                        <div
                                v-if="typeof item.size == 'string'"
                                v-html="item.size"
                                class="itemSize"
                        ></div>

                        <div v-else class="itemSizes">
                            <ul>
                                <li v-for="item_size_string in item.size" v-html="item_size_string" />
                            </ul>
                        </div>

                    </div>

                {% endif %}

                <div class="descRow 5">

                    <div v-if="item.included_groupbuy_items">
                        <ul>
                            <li v-for="included_item in item.included_groupbuy_items">
                                <a :href="included_item.url" v-text="included_item.name" target="_blank"></a>
                            </li>
                        </ul>
                    </div>

                </div>


                <div class="descRow 6">

                    <span v-if="item.manage_subscription_button.url">
                        <a :href="item.manage_subscription_button.url" v-text="item.manage_subscription_button.label"></a>
                    </span>
                    <span v-else>
                        <p v-text="item.manage_subscription_button.label"></p>
                    </span>

                </div>


                <div v-if="item.nhs_prescription_item" class="descRow 6">

                    <span>
                        [% item.nhs_prescription_item.quantity %]
                    </span>

                </div>


                <div v-else class="descRow descQuantity">

                    <span class="descLabel">
                        Quantity: <span v-if="!canEditQty(item)" v-html="item.quantity"></span>
                    </span>


                    <div class="row" v-if="canEditQty(item)">

                        <input
                                class="bagItemQuantity"
                                type="number"
                                min="0"
                                maxlength="3"
                                v-model="item.quantity"
                                :name="'quantity_' + item.id"
                                :id="'item_' + item.id"
                                @input="changeStock(item)"
                                @blur="updateStock(item)"
                                autocomplete="off"
                        >

                    </div>

                </div>


            </div> <!-- .basketItemDescription -->


            <div class="basketItemTotals">

                <div class="basketItemActions"
                     v-if="!hide_inputs && item.can_remove"
                >
                    <button type="submit"
                            @click.prevent="removeItem(item)"
                            value="Delete?"
                            class="itemDeleteButton"
                    >
                        <i class="far fa-trash"></i>
                    </button>

                </div><!-- .basketItemActions -->


                <div v-if="basket.no_vat" class="itemPrice">
                    <del v-html="multi_currency(item.original_total)"></del>
                    <span v-html="multi_currency(item.line_total_exvat)"></span>
                </div>

                <div v-else class="itemPrice">
                    <span v-if="item.item_price != item.original_price">
                        <del v-html="multi_currency(item.original_total)"></del>
                    </span>
                    <span v-html="multi_currency(item.line_total)"></span>
                </div>




            </div> <!-- .basketItemTotals -->

        </div> <!-- .basketItem -->




        <div class="itemAlert"
             v-if="item.stock_error"
             v-bind:data-id="item.id"
        >

            <div class="error">
                <p v-html="item.stock_error"></p>
            </div>

        </div>

        <div class="itemAlert"
             v-if="item.delivery_error"
             v-bind:data-id="item.id"
        >

            <div class="error">
                <p v-html="item.delivery_error"></p>
            </div>

        </div>

        <div class="itemAlert"
             v-if="item.limit_error"
             v-bind:data-id="item.id"
        >

            <div class="error">
                <p v-html="item.limit_error"></p>
            </div>

        </div>

        <div class="itemAlert"
             v-if="item.incompatibility_error"
             v-bind:data-id="item.id"
        >

            <div class="error" v-for="incompatibility_error in item.incompatibility_error">
                <p v-html="incompatibility_error"></p>
            </div>

        </div>

        {#
        <div class="itemAlert" >

            <div class="error">
                <p>Example error</p>
            </div>

            <div class="error">
                <p>Example error</p>
            </div>

            <div class="error">
                <p>Example error</p>
            </div>

        </div>
        #}

    </section> <!-- v-for -->

</div> <!-- .basketItems -->


