{% if not mobile %}

    <div class="w-[180px] hidden lg:block flex-none">
        <div class="sticky top-[72px]">
            <img loading="eager" class="block mx-auto object-cover" width="{{img_width}}" height="{{img_height}}" src="{{data.image}}" alt="{{data.brand|raw}} {{data.model|raw}}">
            
            <div class="grid grid-cols-1 gap-3 my-4">

                {% if affiliation_offers.best_amazon_offer.link.button is not empty %}

                <a href="{{affiliation_offers.best_amazon_offer.link.button}}" class="border-2 rounded-[6px] custom_shadow border-black hover:border-primary h-12 flex items-center justify-center custom_shadow" target="_blank" rel="nofollow">
                    <div class="flex text-sm items-center font-semibold">Compra su 
                        <img style="margin-bottom: -10px; margin-left: 5px;" alt="Amazon" height="19" src="{{assets_dir}}/brands/amazon_logo.svg" width="62">
                    </div>  
                </a>

                {% endif %}
                {% if affiliation_offers.best_ebay_offer.link.button is not empty %}

                <a href="{{affiliation_offers.best_ebay_offer.link.button}}" class="border-2 rounded-[6px] custom_shadow border-black hover:border-primary h-12 flex items-center justify-center custom_shadow" target="_blank" rel="nofollow">
                    <div class="flex text-sm items-center font-semibold">Compra su 
                        <img style="margin-left: 3px;" alt="eBay" height="21" src="{{assets_dir}}/brands/ebay_logo.svg" width="52">
                    </div>
                </a>

                {% endif %}

                {% if affiliation_offers.domination is not empty %}
                <a href="{{affiliation_offers.domination.link}}" class="border-2 rounded-[6px] custom_shadow border-black hover:border-primary h-12 flex items-center justify-center custom_shadow" target="_blank" rel="nofollow">
                    <div class="flex text-sm items-center font-semibold">Compra su 
                        <img style="margin-left: 12px; height: 18px; margin-top: -2px;" alt="{{affiliation_offers.domination.cta}}" height="21" src="{{affiliation_offers.domination.merchant_logo}}" width="auto">
                    </div>
                </a>
                {% endif %}


            </div>
            <ul>
                {% for item in menu_scheda %}
                <li>
                    <a href="{{item.link}}" class="left_sidebar_menu_item block bg-slate-100 p-2 py-3 text-left mb-1 text-sm {{item.class}}">{{item.title|raw}}</a>
                </li>
                {% endfor %}
            </ul>

            {% if data.price is not empty and data.price != '0' %}
                <div @click="showBestpriceOffersModal = true" class="w-[163px] h-[152px] flex flex-col items-center mx-auto my-4 cursor-pointer" style="background-image: url({{assets_dir}}/barcode.png);">
                    
                    {% if affiliation_offers.domination is not empty %}
                    <div class="text-sm mt-8 font-semibold pt-6">{{affiliation_offers.domination.cta}}</div>
       
                    {% else %}

                    <div class="text-sm mt-8 font-semibold">Miglior prezzo</div>
                    <div class="text-3xl font-condensed font-normal text-primary-dark">&euro; {{data.price|trim}} </div>
                   
                    {% endif %}
                    
     
                </div>
            {% endif %}

        </div>
    </div>

    <style>
        .left_sidebar_menu_item:hover:not(.is_active) {
            background-color: #e5e7eb;
        }
        .is_active {
            background-color: #e15a5c;
            color: #fff;
            position: relative;
        }
        .is_active::after {
            content: '';
            position: absolute;
            right: -12px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 12px solid #e15a5c;
            border-top: 22px solid transparent;
            border-bottom: 22px solid transparent;
        }
        .custom_shadow {
            box-shadow: -2px 4px 0 #2fafd1;
        }
        .custom_shadow:hover {
            box-shadow: -4px 6px 0 #2fafd1;
        }
    </style>


{% endif %}
