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

{% if models %}
<section class="model-size-comparison mb-6">
    {% if section.title is defined and section.title %}
        <div class="text-sm text-slate-500 mb-3">{{ section.title|raw }}</div>
    {% endif %}

    <div class="model-size-comparison__scroller hidden-scrollbar">
        {% for model in models %}
            {% set image_url = model.image_url|default(model.image|default(model.url|default(''))) %}
            {% set model_title = model.title|default(model.name|default('')) %}
            {% set datasheet_link = model.datasheet_link|default('') %}
            {% set dimensions = model.dimensions|default(model.size|default('')) %}
            {% set display = model.display|default(model.inches|default('')) %}
            {% set resolution = model.resolution|default('') %}

            <article class="model-size-comparison__item">
                {% if image_url %}
                    <img
                        class="model-size-comparison__image"
                        loading="lazy"
                        fetchpriority="low"
                        src="{{ image_url }}"
                        alt="{{ model_title|default('Modello') }}"
                    />
                {% endif %}

                {% if model_title %}
                    <div class="model-size-comparison__title">
                        {% if datasheet_link %}
                            <a href="{{ datasheet_link }}">{{ model_title|raw }}</a>
                        {% else %}
                            {{ model_title|raw }}
                        {% endif %}
                    </div>
                {% endif %}

                {% if dimensions %}
                    <div class="model-size-comparison__meta">{{ dimensions|raw }}</div>
                {% endif %}

                {% if display %}
                    <div class="model-size-comparison__meta">
                        {{ display|raw }}{% if display matches '/^[0-9,.]+$/' %} pollici{% endif %}
                        {% if resolution %}<br>{{ resolution|raw }}{% endif %}
                    </div>
                {% elseif resolution %}
                    <div class="model-size-comparison__meta">{{ resolution|raw }}</div>
                {% endif %}
            </article>
        {% endfor %}
    </div>

    {% if section.content.compare_url is defined and section.content.compare_url %}
        <a class="model-size-comparison__link" href="{{ section.content.compare_url }}">
            {{ section.content.compare_label|raw }}
        </a>
    {% endif %}
</section>

<style>
    .model-size-comparison {
        background: #fff;
        text-align: center;
    }

    .model-size-comparison__scroller {
        display: flex;
        gap: 24px;
        overflow-x: auto;
        padding: 8px 10px 10px;
        scrollbar-color: #a3a3a3 transparent;
        scrollbar-width: thin;
    }

    .model-size-comparison__item {
        flex: 0 0 138px;
        min-width: 138px;
        color: #333;
        text-align: center;
    }

    .post_content .model-size-comparison__image,
    .model-size-comparison__image {
        width: 138px;
        height: 302px;
        object-fit: contain;
        object-position: bottom center;
        display: block;
        margin: 0 auto 10px;
        filter: none !important;
        box-shadow: none !important;
    }

    .model-size-comparison__title {
        min-height: 36px;
        color: #006699;
        font-size: 16px;
        line-height: 18px;
        font-weight: 700;
    }

    .model-size-comparison__title a {
        color: inherit;
        text-decoration: none;
    }

    .model-size-comparison__meta {
        color: #333;
        font-size: 13px;
        line-height: 14px;
    }

    .model-size-comparison__link {
        display: inline-block;
        margin-top: 14px;
        color: #006699;
        font-size: 16px;
        line-height: 20px;
        font-weight: 700;
    }

    @media (max-width: 767px) {
        .model-size-comparison {
            margin-left: -1rem;
            margin-right: -1rem;
        }

        .model-size-comparison__scroller {
            gap: 18px;
            padding-left: 16px;
            padding-right: 16px;
        }
    }
</style>
{% endif %}
