{#
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"
                        >
                            <span aria-hidden="true">←</span>
                        </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"
                        >
                            <span aria-hidden="true">→</span>
                        </button>
                    </div>
                {% endif %}
            </div>
        </section>
    {% endblock %}
{% endblock %}