<div class="-mx-4">
    {% set max_offers = 4 %}
    {% set highlighted_offers = 0 %}


    <div class="px-4 border-b border-slate-200">
        <h2 class="font-condensed text-base font-semibold m-0">Dove comprare</h2>
    </div>


    <div class="grid grid-cols-1 gap-4 my-6">

        {% if affiliation_offers.best_amazon_offer is not empty %}
            {% set item = affiliation_offers.best_amazon_offer %}
            {% include "templates/components/cards/card-affiliation-table.twig" with {class: 'is_premium'} %}
            {% set highlighted_offers = highlighted_offers + 1 %}
        {% endif %}

        
        {% if affiliation_offers.best_ebay_offer is not empty %}
            {% set item = affiliation_offers.best_ebay_offer %}
            {% include "templates/components/cards/card-affiliation-table.twig" with {class: 'is_premium'} %}
            {% set highlighted_offers = highlighted_offers + 1 %}
        {% endif %}


        {% set remaining_slots = max_offers - highlighted_offers %}


        {% for item in affiliation_offers.offers|slice(0, remaining_slots) %}
        {% include "templates/components/cards/card-affiliation-table.twig" %}
        {% endfor %}

    </div>

    {% if affiliation_offers.offers|length > max_offers %}
    <div class="grid grid-cols-1 text-sm font-semibold">
        <a href="{{data.price_page}}" class="bg-primary text-white h-12 flex items-center justify-center relative">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 absolute left-4">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
            </svg>
            Altre offerte
        </a>
    </div>
    {% endif %}
</div>
