<product-cta-box
        inline-template
        :selected_item="{{ item|json_encode }}"
        :assessment_complete="{{ assessment_complete|json_encode }}"
>
    <div class="productDetailsCTA">

        <div class="wrapper">

            <div class="productNavCTA">

                <div class="ctaLeft">
                    <h3 class="navCtaTitle">
                        {{ item.name }}
                    </h3>
                </div> <!-- .ctaLeft -->


                <div class="ctaRight" :class="[navPricingReady ? 'showBar' : '']">

                    <div class="ctaPrices">

                        <div class="priceRow productPrices">

                            <div class="itemPriceWrap">



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


                                    <span class="priceSaving" v-if="saleActive && displaySavingPriceString">

                                        <span class="fromPrefix">Save</span>

                                        <span v-html="displaySavingPriceString">£0.00</span>

                                    </span>

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

                                        {% 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 && displaySalePriceString" v-html="displaySalePriceString"
                                    >
                                        {% if item.sale_price < item.price and item.sale_price > 0 %}
                                            £{{ item.price }}
                                        {% endif %}

                                    </span>

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


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


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


                        {% include 'shop/basket/delivery_banner.twig' with {
                            no_wrapper: false,
                            show_expected_delivery: true,
                            class: 'navBanner'
                        } %}

                    </div> <!-- .ctaPrices -->

                    <div class="ctaButtons">


                        {% if item.isInStock() %}

                            {% if category_redirect_link and item.product_type == 'doctor' %}

                                <a
                                        class="button"
                                        href="{{ category_redirect_link }}"
                                >

                                    {% if category_redirect_btn_text is not empty %}
                                        {{ category_redirect_btn_text }}
                                    {% else %}
                                        View all treatments
                                    {% endif %}
                                </a>

                            {% else %}

                                <a
                                        class="button"
                                        href="#"
                                        disabled
                                        v-if="stock < 1  || item.total_stock < 1"
                                >
                                    Out of Stock
                                </a>

                                <button
                                        type="submit"
                                        name="add-bag"
                                        class="button"
                                        {{ admin_preview ? 'disabled' : '' }}
                                        v-else
                                        :disabled="loading"
                                        @click.prevent="scrollToOptions()"
                                >

                                    {% if form_id is not empty and assessment_complete is empty and item.product_type == 'doctor' %}
                                        Get started
                                    {% else %}
                                        Buy Now
                                    {% endif %}
                                </button>

                            {% endif %}


                        {% else %}

                            <a
                                    class="button outOfStock"
                                    href="#"
                                    disabled
                            >
                                Out of Stock
                            </a>

                        {% endif %}

                    </div> <!-- .ctaButtons -->

                </div> <!-- .ctaRight -->

            </div> <!-- .productNavCTA -->

        </div> <!-- .wrapper -->

    </div> <!-- .productDetailsCTA -->

</product-cta-box>
