{% set envlink = 'www' %}

<div>
    <div class="group lg:max-w-md max-w-xs flex flex-col text-center items-center relative border hover:shadow-xl p-2 lg:p-4 rounded-lg">                
    
        <button
            type="button"
            class="absolute top-2 right-2 z-10 border-2 rounded-full p-1.5 cursor-pointer transition-colors"
            :class="Alpine.store('productCompare').selectedProducts.some(p => p.id === '{{product.id}}') ? 'text-emerald-500 border-emerald-500' : 'text-slate-400 border-slate-300 hover:border-primary hover:text-primary'"
            @click.prevent="Alpine.store('productCompare').selectedProducts.some(p => p.id === '{{product.id}}') ? Alpine.store('productCompare').removeFromCompare('{{product.id}}') : Alpine.store('productCompare').addToCompare({ id: '{{product.id}}', producer_name: '{{product.brand|escape('js')}}', model: '{{product.model|escape('js')}}', image_url: '{{product.image}}' })"
        >
            <template x-if="Alpine.store('productCompare').selectedProducts.some(p => p.id === '{{product.id}}')">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-3.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                </svg>
            </template>
            <template x-if="!Alpine.store('productCompare').selectedProducts.some(p => p.id === '{{product.id}}')">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-3.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                </svg>
            </template>
        </button>

        <a title="Scheda tecnica" href="https://{{envlink}}.hdblog.it{{product.link}}" class="w-28 lg:w-28 text-center lg:text-left h-32 max-h-32 flex items-center flex-shrink-0 ">
            <img src="{{product.image}}" alt="{{product.brand}} {{product.model}}" class="block mx-auto object-contain lg:object-left text-white max-h-32" width="{{img_width}}" height="{{img_height}}">
        </a>

        <a title="Scheda tecnica" href="https://{{envlink}}.hdblog.it{{product.link}}" class="py-4 px-1 w-full">
            <div class="text-primary-dark font-bold text-xs">{{product.brand}}</div>
            <div class="line-clamp-3 text-base leading-5 font-semibold whitespace-normal min-h-10">{{product.model}}</div>


        </a>

{#         <div class="w-full">
            <a href="/avviso-prezzo/{{product.id}}" @click.prevent="window.priceAlertModal.openPriceAlertModal({{product.id}}, '{{product.brand}} {{product.model}}')" class="mt-2 flex cursor-pointer min-h-10 items-center text-sm justify-between rounded-md bg-slate-100 hover:bg-slate-200 px-2 py-2 w-full">
                                    
                <span class="text-xs mr-2">Avviso di prezzo</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5"></path>
                </svg>

            </a>
        </div> #}


        {% if product.price > 0 %}
        <a href="{{product.prices_page}}" class="mt-2 flex h-10 items-center justify-between rounded-md bg-amber-500 hover:bg-[#fdb04b]  p-2 text-white w-full">
            
            {% if product.domination is not empty %}
            <span class="text-sm w-full text-center">{{product.domination.cta}}</span>
            {% else %}
            <span class="text-sm">Miglior prezzo</span>
            <span class="text-lg font-normal font-condensed">{{product.price}} &euro;</span>
            {% endif %}
        </a>
        {% else %}
        <a href="https://{{envlink}}.hdblog.it{{product.link}}" class="mt-2 flex h-10 items-center justify-center rounded-md bg-primary-dark hover:bg-primary  p-2 text-white w-full">
            <span class="text-sm">Scheda tecnica</span>
        </a>
        {% endif %}

    </div>
</div>
