{% set products = this.products %}

{% if products|length > 0 %}
    <div
        data-scroll-target="mobileBar"
        class="theme-shop-mobile-bar"
        style="visibility: hidden; opacity: 0; transform: translateY(24px); pointer-events: none;"
        x-cloak>
        <label for="shop-product-select" class="sr-only" data-scroll-target="mobileLabel">
            {{ 'shop.title'|trans }}
        </label>
        <select
            id="shop-product-select"
            data-scroll-target="mobileSelect"
            data-placeholder="{{ 'shop.navigate_cuvees'|trans }}"
            class="theme-shop-mobile-select"
            data-action="change->scroll#selectSection">
            <option value="">{{ 'shop.navigate_cuvees'|trans }}</option>
            {% for product in products %}
                <option value="{{ product.slug }}">{{ product.name }}</option>
            {% endfor %}
        </select>
    </div>
{% endif %}
