{%- if editmode -%}

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

{%- else -%}

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

    {%- if not images.empty -%}
    
        <div class=" overflow-hidden">

            <div class="pb-40 mx-n80 mx-sm-n100 mx-md-n120 mx-xl-n100">

                <div class="plates d-flex justify-content-center gap-20 gap-xl-60 gap-xxl-80 gap-3xl-100 position-relative" data-scroll data-scroll-offset="20%,0">

                    {%- for image in images -%}

                        <div class="plate {{ loop.index > 3 ? 'd-none d-lg-block' : '' }}">

                            {{ image.thumbnail('brick-' ~ brick.id).html({
                                'disableAutoAlt': true,
                                'alt': get_image_i18n_alt(image, ''),
                                'pictureAttributes': {
                                    'class': 'd-block user-select-none pointer-events-none'
                                },
                                'imgAttributes': {
                                    'class': 'd-block w-auto object-fit-cover lazyload'
                                }
                            }) | raw  }}
                        
                        </div>

                    {%- endfor -%}

                </div>

            </div>

        </div>

    {%- endif -%}

{%- endif -%}