<div class="itemOptions">


    <product-options
            inline-template
            :item_strengths="{{ item.size_strength_options|json_encode }}"
            :selected_item="{{ item|json_encode }}"
            :assessment_complete="{{ assessment_complete|json_encode }}"
            :item_warning="{{ item_warning|json_encode }}"
            :product_overlay_enabled="{{ product_overlay_enabled|json_encode }}"
    >


            <form action="{{ item.getProductCardData().url }}" method="post" id="addtobasket">

                <div class="innerForm">


                    <div class="mobileOverlay" :class="[mobileMenuActive ? 'visible' : '']">


                        <div class="overlayHeader">

                            <div class="headerLeft">
                                <div class="imageWrap">
                                    <img src="/sites/{{ settings.SITE }}/images/logo.png" alt="Loading" class="miniLogo">
                                </div> <!-- .imageWrap -->
                            </div> <!-- .headerLeft -->

                            <div class="headerRight">
                                <a
                                        href="#"
                                        class="toggleButtonWrap closeButton"
                                        @click.prevent="toggleMobileMenu(true)"
                                >
                                    <span class="toggleButton toggleAlt"></span>
                                </a>
                            </div> <!-- .headerRight -->

                        </div> <!-- .overlayHeader -->


                        {% include 'shop/item/partials/product_header.twig' with {
                            class: 'mobileProduct',
                            titles_only: true,
                            use_h2: true
                        }%}


                        <div class="sizeQuantity" v-if="assessment_complete">

                            <div class="strengths selectionRows" v-if="strengths.length && strengths[0].name.length" v-cloak>

                                <div class="row">

                                    <div class="inputWrap" v-if="strengths.length > 12 || useSelects">

                                        <label for="quantityField" class="fieldLabels">Strength:</label>

                                        <div
                                                class="selectWrapper"
                                                :class="[has_assessment_form ? 'hasPrice' : '']"
                                        >

                                            <select
                                                    class="itemStrengths"
                                                    v-model="selectedStrengthIndex"
                                                    @change="setSelectedStrength()"
                                                    :class="[has_assessment_form ? 'withPrice' : '']"
                                            >

                                                <option
                                                        v-for="(strength, strengthIndex) in strengths"
                                                        :key="'strengths' + strengthIndex"
                                                        :value="strengthIndex"
                                                        :selected="sizeIndex === selectedStrengthIndex"
                                                        v-html="strength.name"
                                                ></option>

                                            </select>

                                            <div class="strengthFrom" v-if="has_assessment_form">

                                            <span
                                                    class="sizePrice"
                                                    v-html="displayStrengthPrice()"
                                            ></span>

                                            </div> <!-- .strengthFrom -->

                                        </div> <!-- .selectWrap -->


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


                                    <div class="inputWrap radioRow" v-else>


                                        <div class="inputTitle">
                                            <label class="fieldLabels">Strength: </label>
                                        </div> <!-- .inputTitle -->

                                        <div class="radioButtons">

                                            <ul class="buttonList" :class="[strengths.length ? 'btns-' + strengths.length : '' ]">

                                                <li v-for="(strength, strengthIndex) in strengths" :key="'strengthsInputs' + strengthIndex">

                                                    <input
                                                            :id="'strength_id_' + strengthIndex"
                                                            type="radio"
                                                            name="itemStrength"
                                                            :value="strengthIndex"
                                                            :true-value="strengthIndex"
                                                            :false-value="false"
                                                            v-model="selectedStrengthIndex"
                                                            :checked="strengthIndex === selectedStrengthIndex"
                                                            class="itemStrengths"
                                                            @change="setSelectedStrength()"
                                                    >

                                                    <label
                                                            :for="'strength_id_' + strengthIndex"
                                                            class="radioButton"
                                                    >
                                                        <span class="radioTitle" v-html="strength.name"></span>
                                                        <span class="radioSizePrice">
                                                        <span
                                                                class="sizePrice"
                                                                v-html="displayStrengthPrice(strengthIndex)"
                                                        ></span>
                                                        <span
                                                                class="sizeSalePrice"
                                                                v-html="displayStrengthSalePrice(strengthIndex)"
                                                                v-if="strengthSaleIsActive(strength)"
                                                        ></span>
                                                    </span>
                                                    </label>
                                                </li>

                                            </ul>

                                        </div> <!-- .radioButtons -->

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

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

                            </div> <!-- .strengths -->

                            <div class="hiddenRow" v-else>
                                <input
                                        :id="'strength_id_' + 0"
                                        type="input"
                                        name="itemStrength"
                                        v-model="selectedStrengthIndex"
                                        class="itemStrengths"
                                        @change="setSelectedStrength()"
                                >
                            </div> <!-- .hiddenRow -->

                            <div class="quantities selectionRows" v-if="selectedStrength">

                                <div class="row">


                                    <div class="inputWrap" v-if="selectedStrength.sizes.length > 12 || useSelects">

                                        <label for="quantityField" class="fieldLabels">Quantity</label>

                                        <div class="selectWrapper">

                                            <select
                                                    id="quantityField"
                                                    class="itemQuantity"
                                                    v-model="selectedSizeIndex"
                                                    @change="setSelectedQuantity(selectedSizeIndex)"
                                            >

                                                <option
                                                        v-for="(size, sizeIndex) in selectedStrength.sizes"
                                                        :key="'size' + sizeIndex"
                                                        :value="sizeIndex"
                                                        :selected="sizeIndex === selectedSizeIndex"
                                                        v-html="size.size"
                                                ></option>

                                            </select>

                                        </div> <!-- .selectWrap -->


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

                                    <div class="inputWrap radioRow" v-else>

                                        <div class="inputTitle">
                                            <label class="fieldLabels">Quantity: </label>
                                        </div> <!-- .inputTitle -->

                                        <div class="radioButtons">

                                            <ul class="buttonList" :class="[selectedStrength.sizes.length ? 'btns-' + selectedStrength.sizes.length : '' ]">

                                                <li v-for="(size, sizeIndex) in selectedStrength.sizes" key="'sizeInput' + sizeIndex">

                                                    <input
                                                            :id="'size_id_' + sizeIndex"
                                                            type="radio"
                                                            name="itemSizes"
                                                            :value="sizeIndex"
                                                            :true-value="sizeIndex"
                                                            :false-value="false"
                                                            v-model="selectedSizeIndex"
                                                            :checked="sizeIndex === selectedSizeIndex"
                                                            class="itemStrengths"
                                                            @change="setSelectedQuantity(sizeIndex)"
                                                    >

                                                    <label
                                                            :for="'size_id_' + sizeIndex"
                                                            class="radioButton"
                                                    >
                                                        <span class="radioTitle" v-html="size.size"></span>
                                                        <span class="radioSizePrice">
                                                        <span
                                                                class="sizePrice"
                                                                v-html="displaySizePrice(size)"
                                                        ></span>
                                                        <span
                                                                class="sizeSalePrice"
                                                                v-html="displaySizeSalePrice(size)"
                                                                v-if="sizeSaleIsActive(size)"
                                                        ></span>
                                                    </span>
                                                    </label>
                                                </li>

                                            </ul>

                                        </div> <!-- .radioButtons -->

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

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

                                {% if item.custom.quantity_description is not empty %}
                                    <div class="quantityExplaination">

                                        <a href="#quantityDescription" class="js_overlayTrigger" data-no-ajax="true">How many do I need?</a>

                                        <div id="quantityDescription" class="quantityDescription">

                                            <h5>How many you need</h5>

                                            <p>
                                                {{ item.custom.quantity_description|striptags|raw }}
                                            </p>

                                        </div> <!-- .quantityDescription -->

                                    </div> <!-- .quantityExplaination -->

                                {% endif %}

                            </div> <!-- .strengths -->

                            <div class="loading" :class="[loading ? 'isLoading' : '']">
                                <div class="loadingIcon">
                                    <div class="loadingText">
                                        Loading product options
                                    </div>
                                </div> <!-- .loadingIcon -->
                            </div> <!-- .loading -->


                        </div> <!-- .sizeQuantities -->



                    </div> <!-- .mobileOverlay -->

                    <div class="addToBasketButtonWrap">

                        <div class="buttonWrapper">

                            <div class="priceRow productPrices">

                                <div class="itemPriceWrap" :class="[stock > 0 ? '' : 'outOfStock']">

                                    <span class="priceNow" v-html="displayPrice">

                                        {% if has_assessment_form is not empty and assessment_complete is empty %}
                                            <span class="fromPrefix">From</span>

                                            {% if item.sale_price < item.price and item.sale_price > 0 %}
                                                £{{ item.sale_price }}
                                            {% else %}
                                                £{{ item.price }}
                                            {% endif %}

                                        {% endif %}


                                    </span>

                                    <span
                                            class="priceWas {% if has_assessment_form is not empty and assessment_complete is empty %}fromPrefixed{% endif %}"
                                            v-if="saleActive" v-html="displaySalePrice"
                                    >
                                    {% if item.sale_price < item.price and item.sale_price > 0 %}
                                        £{{ item.price }}
                                    {% endif %}


                                </span>

                                </div> <!-- .itemPriceWrap -->


                            </div> <!-- .priceRow -->

                            {% if (form_id is not empty and assessment_complete is empty) or item_warning is not empty  %}
                                <div class="warningArea" v-if="has_assessment_form || item_warning">

                                    <div class="productWarningsDanger">

                                        {% if form_id is not empty and assessment_complete is empty and item.product_type == 'doctor' %}

                                            <div class="productWarning info">
                                                <p>
                                                    In order to determine which medication is right for you, please complete the
                                                    questionnaire available on the treatment page relevant to your condition.
                                                    You will then be able to purchase the medication that suits you best.
                                                </p>
                                            </div>

                                        {% endif %}

                                        {% if item_warning is not empty %}

                                            <div class="productWarning info">
                                                <p>{{ item_warning|striptags|raw }}</p>
                                            </div> <!-- .productWarning -->

                                        {% endif %}

                                    </div> <!-- .productWarningsDanger -->

                                </div> <!-- .warningArea -->
                            {% endif %}

                            <div class="buttonArea">

                                <div class="buttonRow addToBagRow">

                                    {% if item.isInStock() %}

                                        <button
                                                type="submit"
                                                name="add-bag"
                                                class="buttonAlt addToBagButton"
                                                {{ admin_preview ? 'disabled' : '' }}
                                        >

                                            {{ item.getProductCardData().label | raw }}

                                        </button>


                                    {% else %}
                                        <a
                                                class="buttonAlt addToBagButton"
                                                href="#"
                                        >
                                            Out of Stock
                                        </a>
                                    {% endif %}

                                </div> <!-- .buttonRow -->


                                <div class="highlights">


                                    <ul>

                                        {% for display_tag in item.display_tags %}

                                        <li>

                                            <div class="iconText">

                                                <div class="icon">
                                                    <img src="{{ display_tag.icon.getFileUrl() }}" />
                                                </div> <!-- .icon -->

                                                <span>{{ display_tag.label }}</span>

                                            </div> <!-- .iconText -->

                                        </li>

                                        {% endfor %}

                                    </ul>

                                </div> <!-- .highlights -->

                            </div> <!-- .buttonArea -->


                            {{ hooks_do_action('item_full_addtobasket_button', item) }}

                        </div> <!-- .buttonWrapper -->

                    </div> <!-- .addToBasketButtonWrap -->



                    <div class="stickyMobileCTA" v-if="!mobileOverlayEnabled" v-cloak>

                        <div class="ctaWrapper">

                            <div class="priceRow productPrices">

                                <div class="itemPriceWrap" :class="[stock > 0 ? '' : 'outOfStock']">

                                <span class="priceNow" v-html="displayPrice">

                                    {% if has_assessment_form is not empty and assessment_complete is empty %}
                                        <span class="fromPrefix">From</span>
                                    {% endif %}

                                    {% if item.sale_price < item.price and item.sale_price > 0 %}
                                        £{{ item.sale_price }}
                                    {% else %}
                                        £{{ item.price }}
                                    {% endif %}
                                </span>

                                    <span
                                            class="priceWas {% if has_assessment_form is not empty and assessment_complete is empty %}fromPrefixed{% endif %}"
                                            v-if="saleActive" v-html="displaySalePrice"
                                    >
                                    {% if item.sale_price < item.price and item.sale_price > 0 %}
                                        £{{ item.price }}
                                    {% endif %}
                                </span>

                                </div> <!-- .itemPriceWrap -->

                                <div class="shippingInfo">
                                    <span>Free delivery</span>
                                </div> <!-- .shippingInfo -->

                            </div> <!-- .priceRow -->

                            <div class="buttonArea">

                                <div class="buttonRow addToBagRow">

                                    {% if item.isInStock() %}

                                        <button
                                                type="submit"
                                                name="add-bag"
                                                class="button addToBagButton"
                                                {{ admin_preview ? 'disabled' : '' }}
                                        >

                                            {{ item.getProductCardData().label | raw }}

                                        </button>


                                    {% else %}
                                        <a class="button addToBagButton" href="#">
                                            Out of Stock
                                        </a>
                                    {% endif %}

                                </div> <!-- .buttonRow -->

                            </div> <!-- .buttonArea -->

                        </div> <!-- .ctaWrapper -->

                    </div> <!-- .stickyMobileCTA -->

                    <input
                            type="hidden"
                            name="size"
                            v-model="selectedSize.id">


                    <input type="hidden" name="quantity" value="1">

                </div><!-- .innerForm -->

            </form>

    </product-options>


    <div class="itemOptTrigger"></div> <!-- .itemOptTrigger -->
</div> <!-- .itemOptions -->






