{% set img_width  = '100%' %}
{% set img_height = 80 %}

<div 
    id="add_to_compare_{{item.id}}"
    class="card_product p-2 bg-white flex items-center relative"
    @click="addToCompare({ id: '{{item.id}}', maker: '{{item.produttore}}', model: '{{item.modello}}', image_url: '{{item.model_image_url}}' })"
    :class="Alpine.store('productCompare').selectedProducts.some(p => p.id === '{{item.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="{{img_width}}" height="{{img_height}}" src="{{item.model_image_url}}" alt="{{item.produttore}} {{item.modello}}">
    </div>
    <div class="pl-2">
        <div id="product_maker_{{item.id}}" class="text-sm text-slate-500 -mb-1">{{item.produttore}}</div>
        <div id="product_model_{{item.id}}" class="font-semibold text-base font-condensed">{{item.modello}}</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 === '{{item.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 === '{{item.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 === '{{item.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>

