{% set img_width  = 200 / 6 %}
{% set img_height = 200  / 6 %}

<div class="card_product px-2 grid grid-cols-[52px_auto] items-center relative bg-white">

    <div class="w-16 text-center h-24 max-h-24 flex items-center flex-shrink-0">
        <img class="block object-contain max-h-24" width="{{img_width}}" height="{{img_height}}" src="{{item.image_url}}" alt="{{item.name}}">
    </div>

    <div>
        <div class="text-xs text-left mb-2 font-semibold min-h-8 h-8 line-clamp-2">{{item.name}}</div>
        <div class="flex items-center justify-center gap-2">
            {% if item.prices.best_price.url_low %}
            <a href="{{item.prices.best_price.url_low}}" target="_blank" rel="nofollow" class="rounded-full max-w-24 px-2 py-1 bg-blue-700 text-white text-md text-center w-full font-semibold">
                {{item.prices.best_price.price}}<small>&euro;</small>
            </a>
            {% else %}
            <a href="{{ item.prices.price_alert.url }}" class="rounded-full px-4 py-2 uppercase bg-gray-700 text-white text-md text-center w-full font-semibold">
                Avvisami
            </a>
            {% endif %}
            <a class="border-2 border-slate-500 flex items-center justify-center text-slate-500 rounded-full size-8 relative text-xs" href="{{item.remove_url}}">
                <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="M6 18 18 6M6 6l12 12" />
                </svg>
            </a>
        </div>
    </div>

</div>
