{% if slides %}
<section class="block block-slider{% if cfg.overlay %} block-slider--overlay{% endif %}"
         style="--slider-caption-color: {{ cfg.caption_color }};"
         data-autoplay="{{ '1' if cfg.autoplay else '0' }}"
         data-interval="{{ cfg.interval }}"
         aria-roledescription="carousel" aria-label="Highlights">
    <div class="block-slider__track">
        {% for slide in slides %}
        <div class="block-slider__slide{% if loop.first %} is-active{% endif %}"
             role="group" aria-roledescription="slide"
             aria-label="{{ loop.index }} of {{ slides | length }}"
             {% if not loop.first %}aria-hidden="true"{% endif %}>
            {% if slide.link %}
            <a class="block-slider__media" href="{{ slide.link }}">
                <img src="{{ slide.image_url }}" alt="{{ slide.title }}" loading="lazy">
            </a>
            {% else %}
            <span class="block-slider__media">
                <img src="{{ slide.image_url }}" alt="{{ slide.title }}" loading="lazy">
            </span>
            {% endif %}

            {% if slide.title or slide.caption %}
            <div class="block-slider__caption">
                {% if slide.title %}<h2 class="block-slider__title">{{ slide.title }}</h2>{% endif %}
                {% if slide.caption %}<p class="block-slider__text">{{ slide.caption }}</p>{% endif %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    {% if slides | length > 1 %}
    <button class="block-slider__arrow block-slider__arrow--prev" type="button"
            data-slider-prev aria-label="Previous slide">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M15 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2"
                  stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </button>
    <button class="block-slider__arrow block-slider__arrow--next" type="button"
            data-slider-next aria-label="Next slide">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"
                  stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </button>

    <div class="block-slider__dots" role="tablist" aria-label="Choose slide">
        {% for slide in slides %}
        <button class="block-slider__dot{% if loop.first %} is-active{% endif %}" type="button"
                data-slider-dot="{{ loop.index0 }}" role="tab"
                aria-label="Go to slide {{ loop.index }}"
                aria-selected="{{ 'true' if loop.first else 'false' }}"></button>
        {% endfor %}
    </div>
    {% endif %}
</section>
{% endif %}