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


<div class="mt-6 grid grid-cols-1 gap-4 divide-y {% if not mobile %} {{stickyclass}} {% endif %}" 
        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 %}

<style>
.score_0 { background: #DB2727; }
.score_1 { background: #ef4c51; }
.score_2 { background: #fe4b51; }
.score_3 { background: #ff7d51; }
.score_4 { background: #ffab50; }
.score_5 { background: #ffd050; }
.score_6 { background: #79eee6; }
.score_7 { background: #72cfe1; }
.score_8 { background: #6de2ad; }
.score_9 { background: #74cf5a; }
.score_10 { background: #74cf5a; }
.score_disabled { background: #cbcbcb; }
</style>