<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="{{img_width}}" height="{{img_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 class="block">
                    <div class="flex justify-between">
                        <span class="text-xs leading-none">Hardware: </span>
                        <span class="text-xs font-bold leading-none" x-text="product.hardware_score"></span>
                    </div>
                
                    <div class="flex justify-between w-full">
                        <span class="text-xs leading-none">Qualità Prezzo: </span>
                        <span class="text-xs font-bold leading-none" x-text="product.quality_price"></span>
                    </div>
                </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 -->
{#             <button 
                @click="addToCompare({ id: product.id, maker: product.produttore, model: product.modello, image_url: product.model_image_url })"
                class="mt-2 flex min-h-10 items-center justify-center rounded-md px-2 py-2 w-full"
                :class="Alpine.store('productCompare').selectedProducts.some(p => p.id === product.id) ? 'bg-emerald-500 hover:bg-emerald-600 text-white' : 'bg-slate-200 hover:bg-slate-300 text-slate-700">
                
                <template x-if="Alpine.store('productCompare').selectedProducts.some(p => p.id === product.id)">
                    <div class="flex items-center">
                        <span class="text-emerald-500">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-4 mr-2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                        </span>
                        <span class="text-xs font-medium">Aggiunto al confronto</span>
                    </div>
                </template>
                <template x-if="!Alpine.store('productCompare').selectedProducts.some(p => p.id === product.id)">
                    <div class="flex items-center">
                        <span class="text-slate-500">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-4 mr-2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                            </svg>
                        </span>
                        <span class="text-xs font-medium">Compara</span>
                    </div>
                </template>
            </button> #}
        </div>
    </div>
</template>