{% set categories = this.categories %}
{% set products = this.products %}
{% set category = this.category %}

{% if categories|length > 0 or products|length > 0 %}
    <div
        data-scroll-target="mobileBar"
        class="border-accent/20 fixed inset-x-0 bottom-0 z-40 w-screen border-t bg-surface/95 px-2 pt-3 pb-safe-bottom opacity-0 shadow-sticky-bar backdrop-blur-sm md:hidden"
        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">
            {{ this.showCategoryMenu and category ? category.name : 'shop.title'|trans }}
        </label>
        <select
            id="shop-product-select"
            data-scroll-target="mobileSelect"
            data-placeholder="{{ 'shop.navigate_cuvees'|trans }}"
            class="border-accent/30 bg-page text-foreground w-full border px-2 py-1.5 text-xs tracking-card-title normal-case outline-none"
            data-action="change->scroll#selectSection"
            {% if products|length == 0 %}
                disabled
            {% endif %}>
            <option value="">{{ 'shop.navigate_cuvees'|trans }}</option>
            {% for product in products %}
                <option value="{{ product.slug }}">
                    {{ product.name }}
                </option>
            {% endfor %}
        </select>
    </div>
{% endif %}
