{% extends "templates/layout.twig" %}

{% block pageHead %}
    <title>{{data.brand|raw}} {{data.model|raw}} - Notizie</title>
    <link rel="preload" as="image" href="{{data.image}}" fetchpriority="high" type="image/webp">

    {% if type == 'single_smartwatch' %}
    <meta name="description" content="Scheda tecnica completa dello smartwatch {{data.brand|raw}} {{data.model|raw}}: specifiche tecniche, compatibilit&agrave;, funzioni e prezzo attuale.">
    {% endif %}

    {% if type == 'single_tablet' %}
    <meta name="description" content="Scopri la scheda tecnica completa del tablet {{data.brand|raw}} {{data.model|raw}}: caratteristiche, schermo, prestazioni e prezzo aggiornato.">
    {% endif %}

    {% if type == 'single_laptop' %}
    <meta name="description" content="Scopri la scheda tecnica completa del laptop {{data.brand|raw}} {{data.model|raw}}: caratteristiche, schermo e prestazioni.">
    {% endif %}
    

    <meta name="author" content="HDblog.it{% if author.first_name is not empty %} - {{author.first_name}} {{author.last_name}} {% endif %}">
    
{% endblock %}

{% block page %}


    {% block data %}
    {% endblock %}

    <div class="articles-container" x-data="{ showBestpriceOffersModal: false }">
        <article id="{{type}}-{{data.id}}" class="lg:px-0">

            {% if mobile %}

            <div class="post-content-single relative flex-wrap">
                {% include "templates/components/common/breadcrumbs.twig" %}
                {% include "templates/components/prodotti/product-hero-mobile.twig" %}
                {% include "templates/components/prodotti/offers-table-mobile.twig" %}

                <div class="flex mb-4 sticky top-[42px] lg:top-[105px] bg-white pt-4 pb-2 z-[2] lg:mx-0 -mx-4 lg:pl-0 pl-4 lg:pr-0 pr-4 overflow-x-scroll whitespace-nowrap hidden-scrollbar items-center">
                    {% for item in menu_scheda %}
                    <a href="{{item.link}}" class="{{item.class}} select-none mr-2 flex gap-2 items-center rounded-full px-6 h-10 py-2 text-sm font-semibold border hover:cursor-pointer">{{item.title}}</a>
                    {% endfor %}
                </div>
                <section class="my-6">
                    <div class="post_content">
                    {{description|raw}}
                    </div>

                    {% if news is not empty %}
                        <div class="grid grid-cols-1 lg:grid-cols-1 gap-4 py-4 divide-y divide-gray-200">
                            {% for card in news %}
                                <div class="pt-4">
                                    {% include 'templates/components/cards/card-product-news.twig' %}
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}

                    
                    {% if pagination is not empty %}   
                    {% include "templates/components/prodotti/finder/pagination.twig" %}
                    {% endif %}

                </section>
            </div>

            {% else %}

            {% include "templates/components/common/widget.twig" %}

            <div class="post-content-single relative flex-wrap">
                {% include "templates/components/common/breadcrumbs.twig" %}
                <div class="grid grid-cols-1 lg:gap-4 lg:grid-cols-[180px_auto]">
                    {% include "templates/components/prodotti/sidebar-left.twig" %}
                    <div>
                        <section class="article_head">
                            <h1 class="text-2xl/8 lg:text-5xl m-0 max-w-xl">
                                <span>{{data.brand|raw}} </span>
                                <span class="font-light">{{data.model|raw}}</span>
                            </h1>

                            <div class="text-sm text-slate-500 mt-2 mb-6">Specifiche e Caratteristiche Tecniche</div>
                            <div class="grid lg:grid-cols-[auto_300px] gap-4">
                                {% include "templates/components/prodotti/highlights.twig" %}
                                {% include "templates/components/prodotti/price-badge-hero.twig" %}
                            </div>
                            <section class="post_content my-6">
                                {{description|raw}}

                                {% if news is not empty %}
                                    <div class="grid grid-cols-1 lg:grid-cols-1 gap-4 py-4 divide-y divide-gray-200">
                                        {% for card in news %}
                                            <div class="pt-4">
                                                {% include 'templates/components/cards/card-product-news.twig' %}
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% endif %}

                            </section>
                        </section>
 

                        {% if pagination is not empty %}   
                            {% include "templates/components/prodotti/finder/pagination.twig" %}
                        {% endif %}
    
                    </div>
                </div>



                <div class="h-2"></div>

                {% include 'templates/components/prodotti/bestprice-offers-modal.twig' %}



            </div>
            {% endif %} 
            
        </article>

    </div>


{% endblock %}