<template x-for="(product, index) in displayedProducts" :key="index">
    <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">                
        
            <a title="Scheda tecnica" :href="product.scheda_tecnica_url" class="w-28 lg:w-16 text-center lg:text-left h-32 max-h-32 flex items-center flex-shrink-0 ">
                <img x-show="product.model_image_url" :src="product.model_image_url" :alt="`${product.produttore} ${product.modello}`" class="block mx-auto object-contain lg:object-left text-white max-h-32" width="" height="">
            </a>

            <div class="py-4 px-1 w-full">
                <div x-text="product.produttore" class="text-primary-dark font-bold text-xs"></div>
                <div x-text="product.modello" class="line-clamp-3 text-base leading-5 font-semibold whitespace-normal min-h-10"></div>
                


            </div>

            <div class="w-full">
                <a :href="`/avviso-prezzo/${product.id}`" @click.prevent="window.priceAlertModal.openPriceAlertModal(product.id, `${product.produttore} ${product.modello}`)" 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>


            <a :href="product.scheda_tecnica_url" class="mt-2 flex h-10 items-center justify-between rounded-md bg-amber-500 hover:bg-[#fdb04b]  px-2 py-2 text-white w-full">
                <span class="text-xs mr-2">Miglior prezzo</span>
                <span class="text-lg font-normal font-condensed" x-text="`${product.prezzo}&euro;`"></span>
            </a>

            <!-- Nuovo pulsante Compara/Rimuovi -->

        </div>
    </div>
</template>