{% set img_width  = '100%' %}
{% set img_height = 80 %}
{% set product_brand = item.brand|default(item.producer|default('')) %}
{% set product_model = item.model|default(item.name|default('')) %}
{% set product_image = item.image.size.thumbnail.url|default(item.image|default('')) %}
{% set product_link = item.link|default('') %}
{% set product_prices_link = item.prices_page|default(item.priceLink|default(item.offers[0].modelPriceLink|default(''))) %}
{% set product_price = item.price|default(item.offers[0].price|default('')) %}
{% set product_score = item.hardware_score|default(item.score.value|default('')) %}


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

        {% if product_score is not empty %}
            <div class="absolute top-2 right-2 bg-primary text-white rounded-lg px-1 min-w-8">
                <div class="text-xs text-center font-semibold">{{ product_score }}</div>
            </div>
        {% endif %}

    
        {# 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">
                {% if product_link is not empty %}
                <a href="{{ product_link }}">
                {% endif %}
                    <img class="block mx-auto object-contain max-h-28 group-hover:opacity-90" width="{{img_width}}" height="{{img_height}}" src="{{product_image}}" alt="{{product_brand|raw}} {{product_model|raw}}">
                {% if product_link is not empty %}
                </a>
                {% endif %}
            </div>
        </div>
    
        {# Nome prodotto e modello #}
        <div class="flex-1 min-w-0">
            {% if product_link is not empty %}
            <a href="{{ product_link }}" class="block hover:text-red-700 hover:underline">
            {% endif %}
                <div id="product_maker_{{item.id}}" class="text-lg font-semibold -mb-2">{{product_brand|raw}}</div>
                <div id="product_model_{{item.id}}" class="font-light text-lg">{{product_model|raw}}</div>
            {% if product_link is not empty %}
            </a>
            {% endif %}


            {% if product_price is not empty and product_price != '0' and product_prices_link is not empty %}
                {% set best_price_value = product_price %}
                {% set best_price_link = product_prices_link %}
                {% 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">
        {% if product_link is not empty %}
        <a href="{{ product_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>
        {% endif %}
        {% if product_prices_link is not empty %}
        <a href="{{ product_prices_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">
        Tutti i Prezzi</a>
        {% endif %}
    </div>
</div>





