{#
Title: Image Slider
Description: Slider of images/videos with manual arrows and infinite loop
Category: formatting
Icon: images-alt2
Mode: preview
Align: full
SupportsAlign: full false
#}

{% extends '/views/parts/logic/block-settings.twig' %}

{% block blocksettings %}
	{% block imageslider %}
		<section class="image-slider {{ outer_classes }}">
			<div class="{{ inner_classes }}">
				{% if fields.title %}
					<h3 class="image-slider__title">{{ fields.title }}</h3>
				{% endif %}

				{% if fields.images %}
					{% set colSettings = fields.column_settings ?: [] %}
					{% set scrollBy = fields.slides_to_scroll ?: 1 %}
					{% set spvDefault = fields.slides_per_view ?: 3 %}

					<div class="image-slider__wrap" data-image-slider="1" data-scroll-by="{{ scrollBy }}" data-spv-default="{{ spvDefault }}" data-column-settings="{{ colSettings|json_encode|e('html_attr') }}">
						<button class="image-slider__nav image-slider__nav--prev" type="button" data-image-slider-prev aria-label="Previous slides">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewbox="0 0 16 16">
								<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
							</svg>
						</button>

						<div class="image-slider__track" data-image-slider-track tabindex="0" aria-label="{{ fields.title ?: 'Image slider' }}" style="--spv: {{ spvDefault }};">
							<div class="image-slider__rail" data-image-slider-rail>
								{% for item in fields.images %}
									<div class="image-slider__slide">
										{% if item.video and item.video.url %}
											<div class="image-slider__media">
												<video class="image-slider__video" controls preload="metadata" playsinline>
													<source src="{{ item.video.url }}" type="{{ item.video.mime_type ?: 'video/mp4' }}">
												</video>
											</div>
										{% elseif item.image %}
											<div class="image-slider__media">
												{{ include('views/parts/image.twig', { image: item.image }) }}
											</div>
										{% endif %}
									</div>
								{% endfor %}
							</div>
						</div>

						<button class="image-slider__nav image-slider__nav--next" type="button" data-image-slider-next aria-label="Next slides">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewbox="0 0 16 16">
								<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
							</svg>
						</button>
					</div>
				{% endif %}
			</div>
		</section>
	{% endblock %}
{% endblock %}
