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


<div class="bg-white">
    <div class="flex py-2 relative my-2">


    
        {# Immagine prodotto #}
        <div class="mx-4">
            <div class="w-28 text-center h-28 max-h-28 flex items-center flex-shrink-0  rounded-lg py-2">
                <img class="block mx-auto object-contain max-h-28 group-hover:opacity-90" width="{{img_width}}" height="{{img_height}}" src="{{item.image}}" alt="{{item.brand|raw}} {{item.model|raw}}">
            </div>
        </div>
    
        {# Nome prodotto e modello #}
        <div class="flex-1 min-w-0">
            <div id="product_maker_{{item.id}}" class="text-lg font-semibold -mb-2">{{item.brand|raw}}</div>
            <div id="product_model_{{item.id}}" class="font-light text-lg">{{item.model|raw}}</div>


            {% if item.price is not empty %}
                {% set best_price_value = item.price %}
                {% set best_price_link = item.prices_page %}
                {% include 'templates/components/prodotti/cards/bestprice-button.twig' %}
            {% endif %}


  {#           <a href="/compara/{{item.id}}.html" data-type="0" data-id="{{item.id}}" data-model="{{item.name}}" data-maker="{{item.producer}}" data-imageid="{{item.image.id}}" class="flex items-center gap-2">
                <span class="flex items-center justify-center border border-slate-200 rounded-full p-1">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
                    </svg>
                </span>
                <span class="text-xs hover:underline">
                    Compara
                </span>
            </a> #}
        </div>
    
    </div>
    <div class="flex gap-2">
        <a href="{{ item.link }}"
        style="background: linear-gradient(180deg, #fdfdfd 0%, #f0f0f0 100%)"
        class="border w-full border-[#d0d0d0] p-2 text-center text-xs hover:text-red-700 hover:underline">
        Scheda Tecnica
        </a>
        <a href="{{ item.prices_page }}" 
        style="background: linear-gradient(180deg, #fdfdfd 0%, #f0f0f0 100%)"
        class="border w-full border-[#d0d0d0] p-2 text-center text-xs hover:text-red-700 hover:underline">
        Tutti i Prezzi</a>
    </div>
</div>





