{%- if menus.count > 0 -%}

    <div class="fancy-slider">

        <div class="swiper px-20 px-xl-0">

            <div class="position-absolute top-50 start-0 translate-middle-y z-2 ps-40 d-none d-lg-block">
                <button class="btn-prev text-white"></button>
            </div>
            <div class="position-absolute top-50 end-0 translate-middle-y z-2 pe-40 d-none d-lg-block">
                <button class="btn-next text-white"></button>
            </div>

            <div class="d-flex gap-10 justify-content-end d-lg-none mb-20">
                <button class="btn-prev text-body"></button>
                <button class="btn-next text-body"></button>
            </div>

            <div class="swiper-wrapper">

                {%- for menu in menus -%}

                    <div class="swiper-slide h-auto">

                        <div class="slide h-100">

                            <div class="w-100 h-100 pb-100 position-absolute top-0 start-0 d-none d-md-block pe-lg-80 pe-xl-0">
                                <div class="p-30 h-100 me-lg-100 me-xl-200 {#text-box#}" style="background-color:{{ menu.sliderBackgroundColor | default('var(--bs-light)') }}">
                                    <div class="row">
                                        <div class="col-12 col-lg-6">
                                            <h3 class="h4 text-{{ menu.sliderTextColor | default('body') }}">{{ menu.name }}</h3>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 col-lg-5 col-3xl-4">
                                            <div class="b1 text-{{ menu.sliderTextColor | default('body') }} mb-20">{{ menu.previewDescription | raw }}</div>
                                            <a href="{{ 'brick.menus_slider.slide_cta_url' | trans }}" class="cta text-{{ menu.sliderTextColor | default('body') }}" target="_blank">{{ 'brick.menus_slider.slide_cta_text' | trans }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        
                            <div class="p-20 mb-n100 pb-140 d-md-none" style="background-color:{{ menu.sliderBackgroundColor | default('var(--bs-light)') }}">
                                <h3 class="h4 text-{{ menu.sliderTextColor | default('body') }}">{{ menu.name }}</h3>
                                <div class="b1 mb-20 text-{{ menu.sliderTextColor | default('body') }}">{{ menu.previewDescription | raw }}</div>
                                <a href="{{ 'brick.menus_slider.slide_cta_url' | trans }}" class="cta text-{{ menu.sliderTextColor | default('body') }}" target="_blank">{{ 'brick.menus_slider.slide_cta_text' | trans }}</a>
                            </div>
                         

                            <div class="ms-md-80 ms-lg-160 pt-md-200 pt-lg-140">
                                <div class="row gx-0 justify-content-end mt-md-40 pt-lg-0">  

                                    {%- for dish in menu.dishes | shuffle -%}
                          
                                        <div class="col-4 col-md-3 {{ loop.first ? 'offset-md-3' : '' }}" >
                                            <figure class="position-relative mb-0" style="">

                                                <div class="position-absolute top-0 bottom-0 start-0 end-0 z-0">
                                                    <span class="w-100 h-100 d-block position-absolute top-0 bottom-0 start-0" style="background-color:{{ menu.sliderBackgroundColor | default('var(--bs-light)') }}">
                                                        <span class="position-absolute top-0 bottom-0 start-0 end-0 w-100 h-100 bg-black bg-opacity-25"></span>
                                                    </span>
                                                    {% if dish.mainImage -%}
                                                        {{ dish.mainImage.thumbnail('brick-' ~ brick.id ~ '-dish').html({
                                                            'disableAutoAlt': true,
                                                            'useDataSrc': not editmode,
                                                            'alt': get_image_i18n_alt(dish.mainImage, ''),
                                                            'pictureAttributes': {
                                                                'class': 'w-100 h-100 d-block user-select-none pointer-events-none position-relative'
                                                            },
                                                            'imgAttributes': {
                                                                'class': 'w-100 h-100 object-fit-cover ' ~ (editmode ? '' : 'lazyload'),
                                                                'width': '100%',
                                                                'height': '100%',
                                                            }
                                                        }) | raw  }}
                                                    {%- endif -%}
                                                </div>

                                                <figcaption class="ratio ratio-1x1">
                                                    <div class="p-10 p-lg-20 d-flex align-items-end">
                                                        <span class="h6 text-white mb-0">{{ dish.name }}</span>
                                                    </div>
                                                </figcaption>

                                            </figure>
                                        </div>
                                
                                    {%- endfor -%}

                                </div>
                            </div>

                        </div>

                    </div>

                {%- endfor -%}

            </div>
        </div>
    </div>

    {%- if not editmode -%}
        {%- do pimcore_head_script().appendFile(asset('js/areas/' ~ brick.id ~ '.js'), 'text/javascript') -%}
    {%- endif -%}

{%- endif -%}