{% set classes = classes|default("") %}
{% set params = params|default("") %}

<div class="navigation-global-panel-dynamic-products {{ classes }}" {{ params }}>
    <div class="navigation-global-panel-dynamic-products__container">
            <ul class="navigation-global-panel-dynamic-products__content-wrapper">
            {% for item in children %}
                {% if item.object == "hv_product" %}
                    {# only one tile shows on desktop #}
                    {% set itemClasses = "navigation-global-panel-dynamic-products__content-item" %}
                    {% set itemClasses = not loop.first ? itemClasses ~ " navigation-global-panel-dynamic-products__content-item--mobile" : itemClasses %}
                    <li class="{{ itemClasses }}">
                        {% include '@views/components/navigation/global/tiles/product/template.twig' with {
                            classes: "navigation-global-panel-dynamic-products__content-item-tile",
                            supheading: "Featured",
                            heading: item.name,
                            href: item.url,
                            src: imageData.images[loop.index0]~ "?width=300&quality=75",
                            srcXL: imageData.images[loop.index0] ~ "?width=500&quality=75",
                            srcTablet: imageData.images[loop.index0] ~ "?width=250&quality=75",
                            srcMobile: imageData.images[loop.index0] ~ "?width=150&quality=75",
                            rating: ratingData.ratings[loop.index0],
                        } only %}
                    </li>
                {% else %}
                    <li class="navigation-global-panel-dynamic-products__content-item">
                        {% include '@views/components/navigation/global/buttons/view-all/template.twig' with {
                            classes: "navigation-global-panel-dynamic-products__content-view-all",
                            text: "View All",
                            href: item.url,
                            isSolid: true
                        } only %}
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>

    {% if cta|default("") %}
        <a class="button-link navigation-global-panel-dynamic-products__content-view-all-mobile" href="{{ cta.href }}" target="{{ cta.target|default("_self") }}" aria-label="{{ cta.text|default("View All") }}">
            <span class="inline text--cta">{{ cta.text|default("View All") }}</span>
        </a>
    {% endif %}
</div>