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

<div class="card_product p-2 bg-white flex items-center relative">
    
    <div class="w-20 text-center h-20 max-h-20 flex items-center flex-shrink-0">
        <img class="block mx-auto object-contain max-h-20 lg:max-h-32" width="{{img_width}}" height="{{img_height}}" src="{{item.image_url}}" alt="{{item.name}}">
    </div>
    <div class="pl-1">
        <div id="product_model_{{item.id}}" class="font-semibold text-sm min-h-8 max-w-40">{{item.name}}</div>
        <div class="flex items-center">
            {% if item.prices.best_price.url %}
            <a href="{{item.prices.best_price.url}}" class="bg-blue-500 text-white rounded-md py-1 px-2 relative">
                {{item.prices.best_price.price}}<small>&euro;</small>
            </a>
            {% else %}
            <button @click="window.productAlertModal.openProductAlertModal('{{item.id}}', '{{item.name|escape('js')}}')" class="bg-slate-200  flex items-center justify-center  rounded-md py-1 px-2 relative text-xs h-8">
                Avvisami
            </button>
            {% endif %}
            <a class="border border-slate-500 flex items-center justify-center text-slate-500 hover:border-red-500 hover:text-red-500 rounded-md h-8 px-2 ml-2 relative text-xs" href="{{item.remove_url}}">
                Rimuovi
            </a>
        </div>
    </div>
</div>
