{#
Title: Logo Slider
Description: Horizontal slider of linked logos
Category: formatting
Icon: images-alt2
Mode: preview
Align: full
SupportsAlign: full false
#}

{# Created with PHPStorm AI *Edited for cleanup* #}

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

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

                {% if fields.images %}

                    {% set has_spv = fields.images_visible ? true : false %}

                    <div
                            class="logo-slider__track"
                            data-logo-slider="1"
                            {% if has_spv %}data-spv="1"{% endif %}
                            data-speed="{{ fields.slider_speed|default(35) }}"
                            data-pause-on-hover="{{ fields.pause_on_hover ? 'true' : 'false' }}"
                            style="
                                    --slides-count: {{ fields.images|length }};
                            {% if fields.images_visible %}
                                    --slides-per-view: {{ fields.images_visible }};
                            {% endif %}
                                    "
                            aria-label="{{ fields.title ?: 'Logo slider' }}"
                    >
                        {% for item in fields.images %}
                            {% set link = item.link %}

                            {% if item.image_mime %}
                                <div class="logo-slider__slide">
                                    {% if link and link.url %}
                                        <a class="logo-slider__link"
                                           href="{{ link.url }}"
                                           {% if link.target %}target="{{ link.target }}"{% endif %}
                                           aria-label="{{ link.title ?: 'Logo link' }}">
                                            {% if item.image_mime == 'image/svg+xml' %}
                                                <img
                                                        class="logo-slider__img"
                                                        src="{{ item.image_url }}"
                                                        alt="{{ item.image_alt|default('') }}"
                                                        loading="lazy"
                                                        decoding="async"
                                                />
                                            {% else %}
                                                {{ include('views/parts/image.twig', { image: item.image }) }}
                                            {% endif %}
                                        </a>
                                    {% else %}
                                        {% if item.image_mime == 'image/svg+xml' %}
                                            <img
                                                    class="logo-slider__img"
                                                    src="{{ item.image_url }}"
                                                    alt="{{ item.image_alt|default('') }}"
                                                    loading="lazy"
                                                    decoding="async"
                                            />
                                        {% else %}
                                            {{ include('views/parts/image.twig', { image: item.image }) }}
                                        {% endif %}
                                    {% endif %}
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </section>
    {% endblock %}
{% endblock %}