{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
{% set format = craft.app.images.getSupportsWebP() ? 'webp' : 'jpg' %}
 
<section {{ dataComponent }} id="{{ id }}" class="gallery bg-{{ index.index0 }} {{ separation }}">
	<div class="container">
		{% include 'components/_setHeadTitles' %}

		{% if not component.fieldSwitch %}
			{% include 'components/_galleryLightbox' with {
        images: component.listsImages.all() ?? null,
        setClass: 'justify-content-center',
        format: format
      } %}
		{% else %}
			{% set listsImages = component.listsImages.all() ?? null %}
			{% if listsImages %}
				<div class="swiper sliderGallery pb-5 pt-3" data-slider-preview="{{ (component.gridView|length) > 0 ? component.gridView : 1 }}">
					<div class="swiper-wrapper pb-3">
						{% for img in listsImages %}
							<div class="swiper-slide">
								<a href="{{ img.getUrl({ format: format }) }}" data-type="image" data-fslightbox class="sliderGallery--item glightbox">
									{% if component.gridView == '1' %}
										{% include 'components/_imageTransformsSimple' with {
                      img: img,
                      setClass: 'imgAbsolute',
                      alt: img.title,
                      transforms: {
                        '(min-width: 992px)': {
                          width: 1920,
                          height: 1080
                        },
                        '(min-width: 991px)': {
                          width: 600
                        }
                      },
                      default: {
                        width: 560
                      }
                    } only %}
									{% else %}
										<img data-src="{{ img.getUrl({ mode: 'crop', quality: 96, position: 'top-center', format: format, width: 600, height: 'auto' }) }}" alt="{{ img.title }}" loading="lazy" class="lazyload img-fluid imgAbsolute" src=""/>
									{% endif %}
								</a>
							</div>
						{% endfor %}
					</div>
					<div class="swiper-pagination"></div>
				</div>
			{% endif %}
		{% endif %}
		{% include 'components/_btnArrow' with {
      btn: component.itemLink,
      parentClass: 'col-12 col-lg-4 mx-auto py-3'
    } only %}
	</div>
</section>
{% include 'quarks/_loadJsComponent' with {
    name:  '_' ~ component.type
  } only %}