{% load i18n %}
{% comment %}
Full-bleed carousel (Bootstrap). Slides live in CarouselSlide; sublines are
pre-sanitized HTML. ``initial_slide_index`` is read once into ``start``.
{% endcomment %}
{% with start=block.initial_slide_index %}
<div id="cms-carousel-{{ block.pk }}" class="carousel slide cms-carousel" data-bs-ride="carousel"
     data-bs-interval="{{ block.interval_seconds }}000">
  <div class="carousel-indicators">
    {% for slide in block.slides.all %}
      <button type="button" data-bs-target="#cms-carousel-{{ block.pk }}" data-bs-slide-to="{{ forloop.counter0 }}"
              {% if forloop.counter0 == start %}class="active" aria-current="true"{% endif %}
              aria-label="{{ forloop.counter }}"></button>
    {% endfor %}
  </div>
  <div class="carousel-inner">
    {% for slide in block.slides.all %}
      <div class="carousel-item{% if forloop.counter0 == start %} active{% endif %}">
        {% if slide.image %}<img src="{{ slide.image.url }}" class="d-block w-100" alt="{{ slide.headline }}">{% endif %}
        {% if slide.headline or slide.subline or slide.cta_label %}
          <div class="carousel-caption">
            {% if slide.headline %}<h3>{{ slide.headline }}</h3>{% endif %}
            {% if slide.subline %}<div>{{ slide.subline|safe }}</div>{% endif %}
            {% if slide.cta_label and slide.cta_url %}
              <a href="{{ slide.cta_url }}" class="btn btn-primary">{{ slide.cta_label }}</a>
            {% endif %}
          </div>
        {% endif %}
      </div>
    {% endfor %}
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#cms-carousel-{{ block.pk }}"
          data-bs-slide="prev" aria-label="{% translate 'Previous slide' %}">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#cms-carousel-{{ block.pk }}"
          data-bs-slide="next" aria-label="{% translate 'Next slide' %}">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
</div>
{% endwith %}