
{% set stickyclass = related_models_sidebar.models|length <= 2 ? 'sticky top-[68px]' : '' %}


<div class="{% if not mobile %} {{stickyclass}} {% endif %}">



<div class="mt-6 grid grid-cols-1 gap-4 divide-y" 
        x-data="{ 
        openpopup(url, width = 750, height = 500, name = 'popup') {
            const left = (screen.width - width) / 2;
            const top = (screen.height - height) / 2;
            window.open(url, name, `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`);
        }
    }">
    {% for item in related_models_sidebar.models %}
        {% include "templates/components/prodotti/cards/card-product-with-links.twig" %}
    {% endfor %}

</div>

{% if related_models_sidebar.compare.link is not empty %}
<div class="mt-4 border-t text-center py-2">
    <a href="{{ related_models_sidebar.compare.link }}" class="flex items-center justify-center gap-2 text-center text-sm hover:underline hover:text-red-700">
        {{ related_models_sidebar.compare.label }}
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">
            <path stroke-linecap="round" stroke-linejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
        </svg>
    </a>
</div>
{% endif %}


</div>