{% set models = section.content.models|default([]) %}

{% if models is not empty %}
<section class="model-widget-normal my-6 font-condensed">
    {% if section.title|default('') is not empty %}
        <h2 class="font-condensed font-normal text-3xl mb-4">{{ section.title|raw }}</h2>
    {% endif %}

    <div class="grid grid-cols-1 gap-6">
        {% for model in models %}
            {% set model_name = model.full_name|default((model.model_producer|default('') ~ ' ' ~ model.model_name|default(model.name|default('')))|trim) %}
            {% set model_image = model.model_image_url_ns|default(model.model_image_url|default(model.image_url|default(''))) %}
            {% set model_offers = model.offerlist|default([]) is not empty ? model.offerlist : model.offers|default([]) %}
            {% set model_link = model.model_url|default(model.datasheet_link|default('#')) %}
            {% set price_link = model.model_price_url|default(model.best_price_url|default('')) %}
            {% set highlighted_news = model.video_side|default(model.related_news|default([])|first) %}

            <section class="bg-white" x-data="{ relatedOpen: false }">
                <div class="grid grid-cols-[58px_78px_auto] lg:grid-cols-[58px_78px_1fr_250px] gap-3 items-start mb-7">
                    <div class="grid grid-cols-1 text-center leading-none">
                        {% if model.score|default('') is not empty %}
                            <div class="bg-[#6fb5f4] text-white px-2 py-1.5">
                                <div class="text-3xl">{{ model.score|raw }}</div>
                                <div class="text-xs font-semibold mt-0.5">Hardware</div>
                            </div>
                        {% endif %}

                        {% if model.rating_price|default('') is not empty %}
                            <div class="pt-3 text-black">
                                <div class="text-3xl">{{ model.rating_price|raw }}</div>
                                <div class="text-xs leading-3">Qualit&agrave;<br>Prezzo</div>
                            </div>
                        {% endif %}
                    </div>

                    <a href="{{ model_link|raw }}" class="block">
                        {% if model_image is not empty %}
                            <img class="w-[70px] h-[120px] object-contain mx-auto" src="{{ model_image|raw }}" alt="{{ model_name|raw }}" loading="lazy" fetchpriority="low">
                        {% else %}
                            <div class="bg-slate-100 w-[70px] h-[120px] rounded flex items-center justify-center text-slate-300"></div>
                        {% endif %}
                    </a>

                    <div class="min-w-0">
                        <a href="{{ model_link|raw }}" class="block text-xl leading-6 font-semibold hover:text-primary hover:underline">
                            <strong>{{ model.model_producer|default(model.producer|default(''))|raw }}</strong> {{ model.model_name|default(model.name|default(model.model|default('')))|raw }}
                        </a>

                        {% if model.best_price|default('') is not empty %}
                            <div class="mt-8 flex items-center">
                                <span class="relative inline-flex items-center bg-[#ff9d28] text-white text-[10px] font-bold uppercase leading-3 px-2 h-10">
                                    Miglior<br>prezzo
                                    <span class="absolute -right-4 top-0 border-y-[20px] border-y-transparent border-l-[16px] border-l-[#ff9d28]"></span>
                                </span>
                                <a href="{{ price_link|raw }}" class="inline-flex items-center bg-[#f5c16a] text-white font-bold text-2xl h-10 pl-7 pr-5 rounded-r">
                                    {{ model.best_price|raw }}<small class="text-base ml-1">&euro;</small>
                                </a>
                            </div>
                            {% if price_link is not empty %}
                                <a href="{{ price_link|raw }}" class="block ml-[72px] mt-1 text-sm text-[#ff9d28] hover:underline">Tutti i prezzi ({{ model_offers|length|default(0)|raw }})</a>
                            {% endif %}
                        {% endif %}
                    </div>

                    {% if highlighted_news is not empty %}
                        {% set highlighted_news_link = highlighted_news.url|default(highlighted_news.news_link|default(highlighted_news.news_url|default(''))) %}
                        {% set highlighted_news_title = highlighted_news.title|default(highlighted_news.news_title|default('')) %}
                        {% set highlighted_news_image = highlighted_news.image_url|default(highlighted_news.news_image_url|default('')) %}
                        <a href="{{ highlighted_news_link|raw }}" class="hidden lg:grid grid-cols-[1fr_108px] gap-3 items-center pt-12 text-right group">
                            <span class="text-base leading-4 text-slate-500 group-hover:text-primary">{{ highlighted_news_title|raw }}</span>
                            {% if highlighted_news_image is not empty %}
                                <img class="w-[108px] h-[60px] object-cover" src="{{ highlighted_news_image|raw }}?w=108&h=60" alt="" loading="lazy" fetchpriority="low">
                            {% endif %}
                        </a>
                    {% endif %}
                </div>

                {% if model_offers is not empty %}
                    <div id="prices" class="grid grid-cols-1 gap-0">
                        {% for offer in model_offers|slice(0, 3) %}
                            {% set item = {
                                link: {
                                    card: offer.click_url
                                },
                                title: offer.title,
                                image: offer.image,
                                price: offer.price_formatted,
                                type: offer.is_domination ? 'domination' : 'offer',
                                merchant: {
                                    logo: offer.shop_image,
                                    name: offer.shop
                                }
                            } %}
                            {% include "templates/components/cards/card-affiliation.twig" with { class: loop.first ? 'is_premium' : '' } %}
                        {% endfor %}

                        {% if price_link is not empty %}
                            <a href="{{ price_link|raw }}" class="block max-w-[430px] w-full mx-auto border border-slate-300 bg-gradient-to-b from-white to-slate-100 py-1.5 text-center text-2xl leading-7 text-slate-800 hover:text-primary hover:underline">
                                Vedi tutte le offerte
                            </a>
                        {% endif %}
                    </div>
                {% endif %}

                {% if model.related_news|default([]) is not empty %}
                    <div class="mt-10 border-t border-slate-200 text-center">
                        <button type="button" class="-mt-3 inline-flex items-center gap-1 border border-slate-300 bg-white px-3 py-1 text-xs text-slate-800 hover:text-primary"
                            @click="relatedOpen = !relatedOpen"
                            :aria-expanded="relatedOpen.toString()">
                            <span x-text="relatedOpen ? 'Chiudi' : 'News correlate'"></span>
                            <svg class="size-3 transition-transform" :class="{ 'rotate-180': relatedOpen }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m5 15 7-7 7 7" />
                            </svg>
                        </button>

                        <div class="pt-5 grid grid-cols-1 lg:grid-cols-2 gap-5 text-left" x-cloak x-show="relatedOpen" x-transition>
                            {% for news in model.related_news|slice(0, 4) %}
                                {% set news_link = news.news_link|default(news.news_url|default('')) %}
                                {% set news_image = news.news_image_url|default('') %}
                                <a href="{{ news_link|raw }}" class="grid grid-cols-[92px_auto] gap-3 items-start group">
                                    {% if news_image is not empty %}
                                        <img class="w-[92px] h-[78px] object-cover" src="{{ news_image|raw }}?w=92&h=78" alt="" loading="lazy" fetchpriority="low">
                                    {% else %}
                                        <div class="w-[92px] h-[78px] bg-slate-100"></div>
                                    {% endif %}

                                    <div class="min-w-0">
                                        <div class="text-xl leading-5 font-semibold line-clamp-3 group-hover:text-primary">{{ news.news_title|default('')|raw }}</div>
                                        <div class="mt-1 flex items-center text-xs italic text-slate-500">
                                            {% if news.news_date|default('') is not empty %}
                                                <span>{{ news.news_date|raw }}</span>
                                            {% endif %}
                                            {% if news.news_comments_count|default(0) > 0 %}
                                                <span class="mx-1 not-italic"> </span>
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3 text-slate-300">
                                                    <path fill-rule="evenodd" d="M3.43 2.524A41.29 41.29 0 0 1 10 2c2.236 0 4.43.18 6.57.524 1.437.231 2.43 1.49 2.43 2.902v5.148c0 1.413-.993 2.67-2.43 2.902a41.202 41.202 0 0 1-5.183.501.78.78 0 0 0-.528.224l-3.579 3.58A.75.75 0 0 1 6 17.25v-3.443a41.033 41.033 0 0 1-2.57-.33C1.993 13.244 1 11.986 1 10.573V5.426c0-1.413.993-2.67 2.43-2.902Z" clip-rule="evenodd" />
                                                </svg>
                                                <span class="ml-1 not-italic">{{ news.news_comments_count|raw }}</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </section>
        {% endfor %}
    </div>
</section>
{% endif %}
