


<div 
    id="add_to_compare_"
    class="card_product p-2 bg-white flex items-center relative"
    @click="addToCompare({ id: '', maker: '', model: '', image_url: '' })"
    :class="Alpine.store('productCompare').selectedProducts.some(p => p.id === '') ? 'bg-slate-50' : 'bg-white'" >
    <div class="w-24 lg:w-16 text-center lg:text-left h-24 max-h-28 flex items-center flex-shrink-0 ">
        <img class="block mx-auto object-contain lg:object-left text-white max-h-20" width="100%" height="80" src="" alt=" ">
    </div>
    <div class="pl-2">
        <div id="product_maker_" class="text-sm text-slate-500 -mb-1"></div>
        <div id="product_model_" class="font-semibold text-base font-condensed"></div>
    </div>
    <div 
        
        class="absolute border-2 right-6 top-12 -mt-2.5 text-primary rounded-full border-primary p-2 cursor-pointer"
        :class="Alpine.store('productCompare').selectedProducts.some(p => p.id === '') ? 'text-emerald-500 border-emerald-500' : 'text-primary border-primary'" 
        >
        <!-- Cambia l'icona in base alla presenza del prodotto in selectedProducts -->
        <template x-if="Alpine.store('productCompare').selectedProducts.some(p => p.id === '')">
            <!-- Icona per prodotto già selezionato (es. rimuovere) -->
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-4">
                <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 === '')">
            <!-- Icona per prodotto non selezionato (es. aggiungere) -->
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-4">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
            </svg>
        </template>
    </div>
</div>


<style>
    .text-emerald-500 {
        color: #10b981;
    }
    .border-emerald-500 {
        border-color: #10b981;
    }
</style>

