{%- if editmode -%}

    {{ pimcore_relations('galleryImages', {
        title: 'Drag and drop the images you want',
        types: ['asset'],
        subtypes: ['image']
    }) }}

{%- else -%}

    {%- set images = pimcore_relations('galleryImages') -%}

    {%- if not images.empty -%}

        <div class="swiper {{ brick.id }}-main">

            <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 image in images -%}

                    <div class="swiper-slide">

                        {{ image.thumbnail('brick-' ~ brick.id ~ '-main').html({
                            'disableAutoAlt': true,
                            'alt': get_image_i18n_alt(image, ''),
                            'pictureAttributes': {
                                'class': 'w-100 h-100 d-block user-select-none pointer-events-none'
                            },
                            'imgAttributes': {
                                'class': 'w-100 h-100 object-fit-cover',
                                'width': '100%',
                                'height': '100%',
                                'loading': 'eager'
                            }
                        }) | raw  }}

                    </div>

                {%- endfor -%}

            </div>

        </div>

        <div class="swiper {{ brick.id }}-thumbs mt-30 mt-lg-60 d-none d-lg-block">

            <div class="swiper-wrapper">

                {%- for image in images -%}

                    <div class="swiper-slide cursor-pointer">

                        {{ image.thumbnail('brick-' ~ brick.id ~ '-thumb').html({
                            'disableAutoAlt': true,
                            'alt': get_image_i18n_alt(image, ''),
                            'pictureAttributes': {
                                'class': 'w-100 h-100 d-block user-select-none pointer-events-none'
                            },
                            'imgAttributes': {
                                'class': 'w-100 h-100 object-fit-cover',
                                'width': '100%',
                                'height': '100%',
                                'loading': 'eager'
                            }
                        }) | raw  }}

                    </div>

                {%- endfor -%}

            </div>

        </div>

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


    {%- endif -%}

{%- endif -%}