{% block cms_element_bc_image_slider %}
	{% set config = element.translated.config %}

	{% set slideImage1 = config.slideImage1.value %}
	{% set slideImage2 = config.slideImage2.value %}
	{% set slideImage3 = config.slideImage3.value %}

	{% set slideImageResponsive1 = config.slideImageResponsive1.value %}
	{% set slideImageResponsive2 = config.slideImageResponsive2.value %}
	{% set slideImageResponsive3 = config.slideImageResponsive3.value %}

	{% set mediaCollection = searchMedia([
		slideImage1,
		slideImage2,
		slideImage3,
		slideImageResponsive1,
		slideImageResponsive2,
		slideImageResponsive3
	], context.context) %}

	{% set slides = [
		{
			link: config.link1.value,
			mainTitle: config.mainTitle1.value,
			subTitle: config.subTitle1.value,
			buttonText: config.buttonText1.value,
			image: mediaCollection.get(slideImage1),
			responsiveImage: mediaCollection.get(slideImageResponsive1),
			alignContent: config.alignContent1.value,
			titleColor: config.titleColorSlide1.value,
			subTitleColor: config.subTitleColorSlide1.value,
			buttonBgColor: config.buttonBgColorSlide1.value,
			buttonTxtColor: config.buttonTxtColorSlide1.value,
			slideClass: 'slide-one'
		},
		{
			link: config.link2.value,
			mainTitle: config.mainTitle2.value,
			subTitle: config.subTitle2.value,
			buttonText: config.buttonText2.value,
			image: mediaCollection.get(slideImage2),
			responsiveImage: mediaCollection.get(slideImageResponsive2),
			alignContent: config.alignContent2.value,
			titleColor: config.titleColorSlide2.value,
			subTitleColor: config.subTitleColorSlide2.value,
			buttonBgColor: config.buttonBgColorSlide2.value,
			buttonTxtColor: config.buttonTxtColorSlide2.value,
			slideClass: 'slide-two'
		},
		{
			link: config.link3.value,
			mainTitle: config.mainTitle3.value,
			subTitle: config.subTitle3.value,
			buttonText: config.buttonText3.value,
			image: mediaCollection.get(slideImage3),
			responsiveImage: mediaCollection.get(slideImageResponsive3),
			alignContent: config.alignContent3.value,
			titleColor: config.titleColorSlide3.value,
			subTitleColor: config.subTitleColorSlide3.value,
			buttonBgColor: config.buttonBgColorSlide3.value,
			buttonTxtColor: config.buttonTxtColorSlide3.value,
			slideClass: 'slide-three'
		}
	] %}

	<div class="cms-element-{{ element.type }}{% if config.displayMode.value == " standard" and sliderconfig.verticalalign.value %} has-vertical-alignment{% endif %}">
		{% set baseSliderOptions = {
            slider: {
                navPosition: 'bottom',
                speed: 500,
                nav: true,
                controls: true,
				loop: false,
				rewind: false,
                autoHeight: (config.displayMode.value == "standard") ? true : false
            }
        } %}

		{% set alignmentClass = 'align-self-start' %}

		{% if config.verticalAlign.value == 'center' %}
			{% set alignmentClass = 'align-self-center' %}
		{% elseif config.verticalAlign.value == 'flex-end' %}
			{% set alignmentClass = 'align-self-end' %}
		{% endif %}

		<div class="cms-element-alignment {{ alignmentClass }}">
			<div
				class="base-slider image-slider{% if config.navigationArrows.value == " outside" %} has-nav-outside{% endif %}{% if config.navigationDots.value == " outside" %} has-dots-outside{% endif %}"
				data-base-slider="true"
				data-base-slider-options='{{ baseSliderOptions|json_encode }}'
			>
				<div class="image-slider-container" data-base-slider-container="true">

					{% for slide in slides %}
						{% if slide.image %}
							<div class="image-slider-item-container">
								<div class="image-slider-item">
									{% set sliderMedia = slide.image %}
									{% set imgWidth = '1920' %}
									{% set imgHeight = '760' %}

									{% if 'Mobile' in app.request.headers.get('User-Agent') and slide.responsiveImage %}
										{% set sliderMedia = slide.responsiveImage %}
										{% set imgWidth = '768' %}
										{% set imgHeight = '304' %}
									{% endif %}

									{% set attributes = {
										'class': 'img-fluid image-slider-image',
										'alt': (sliderMedia.translated.alt ?: ''),
										'title': (sliderMedia.translated.title ?: ''),
										'width': imgWidth,
										'height': imgHeight
									} %}

									{% sw_thumbnails 'cms-image-slider-thumbnails' with {
										media: sliderMedia,
										attributes: attributes
									} %}
								</div>

								<div class="banner--content-wrapper {{ slide.slideClass }} slideInRight {{ slide.alignContent ? 'content-' ~ slide.alignContent : 'content-right' }}">
									<div class="banner--content">
										{% if slide.mainTitle %}
											<h2 class="banner--title"
												style="color: {{ slide.titleColor ?: '#000000' }};">
												{{ slide.mainTitle }}
											</h2>
										{% endif %}
										{% if slide.subTitle %}
											<span class="banner--subtitle"
												style="color: {{ slide.subTitleColor ?: '#000000' }};">
												{{ slide.subTitle }}
											</span>
										{% endif %}
										{% if slide.buttonText %}
											<div class="btn banner--btn"
												style="background: {{ slide.buttonBgColor ?: '#000000' }};">
												<a href="{{ slide.link }}"
													class="btn btn--link"
													style="color: {{ slide.buttonTxtColor ?: '#000000' }};"
												>
													{{ slide.buttonText }}
												</a>
											</div>
										{% endif %}
									</div>
								</div>
							</div>
						{% endif %}
					{% endfor %}
				</div>
				<div class="image-slider-controls-container custom-slider-controls">
					<div class="base-slider-controls" data-base-slider-controls="true">
						<button class="base-slider-controls-prev image-slider-controls-prev{% if config.navigationArrows.value == " outside" %} is-nav-prev-outside{% elseif config.navigationArrows.value == " inside" %} is-nav-prev-inside{% endif %}">
							<img src="{{asset('/storefront/assets/images/icons/arrow-left.svg', '@BrandCrockAquaTheme')}}" alt="arrow-left" width="20" height="20">
						</button>
						<button class="base-slider-controls-next image-slider-controls-next{% if config.navigationArrows.value == " outside" %} is-nav-next-outside{% elseif config.navigationArrows.value == " inside" %} is-nav-next-inside{% endif %}">
							<img src="{{asset('/storefront/assets/images/icons/arrow-right.svg', '@BrandCrockAquaTheme')}}" alt="arrow-right" width="20" height="20">
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}
