{#
/**
 * @file
 * Template for a Bootstrap 5 Carousel component.
 *
 * Available variables:
 * - attributes: HTML attributes for the carousel wrapper element.
 * - carousel_id: Unique ID for the carousel. Required for controls and indicators.
 * - show_controls: (boolean) Show previous/next control buttons.
 * - show_indicators: (boolean) Show slide indicator dots.
 * - slide_count: Number of slides — required when show_indicators is true so
 *   indicators can be generated. Defaults to 0 (no indicators rendered).
 * - crossfade: (boolean) Use fade transition instead of slide.
 * - dark_theme: (boolean) Apply data-bs-theme="dark" for dark controls and captions.
 * - ride: Autoplay behaviour — off (manual), true (after first interaction), carousel (on page load).
 * - touch: (boolean) Enable touch/swipe support on touchscreen devices.
 * - wrap: (boolean) Cycle continuously or stop at last slide.
 * - keyboard: (boolean) React to keyboard left/right arrow events.
 * - pause: Pause behaviour on hover — hover or false.
 * - custom_class: Additional CSS classes for the carousel element.
 *
 * Available slots:
 * - slides: The carousel slide items (.carousel-item elements).
 *
 * @ingroup themeable
 */
#}

{% set carousel_id = carousel_id|default('carousel') %}

{% set classes = [
  'carousel',
  'slide',
  crossfade ? 'carousel-fade' : '',
  custom_class|default(''),
]|filter(v => v) %}

<div
  id="{{ carousel_id }}"
  {{ attributes.addClass(classes) }}
  {% if ride is defined and ride != 'off' %}data-bs-ride="{{ ride }}"{% endif %}
  {% if touch is defined and touch == false %}data-bs-touch="false"{% endif %}
  {% if wrap is defined and wrap == false %}data-bs-wrap="false"{% endif %}
  {% if keyboard is defined and keyboard == false %}data-bs-keyboard="false"{% endif %}
  {% if pause is defined and pause == 'false' %}data-bs-pause="false"{% endif %}
  {% if dark_theme %}data-bs-theme="dark"{% endif %}
>

  {# Indicators — requires slide_count to know how many buttons to render #}
  {% if show_indicators and slide_count is defined and slide_count > 0 %}
    <div class="carousel-indicators">
      {% for i in range(0, slide_count - 1) %}
        <button
          type="button"
          data-bs-target="#{{ carousel_id }}"
          data-bs-slide-to="{{ i }}"
          {% if loop.first %}class="active" aria-current="true"{% endif %}
          aria-label="Slide {{ i + 1 }}"
        ></button>
      {% endfor %}
    </div>
  {% endif %}

  {# Slides slot #}
  <div class="carousel-inner">
    {% block slides %}{% endblock %}
  </div>

  {# Prev / Next controls #}
  {% if show_controls %}
    <button
      class="carousel-control-prev"
      type="button"
      data-bs-target="#{{ carousel_id }}"
      data-bs-slide="prev"
    >
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button
      class="carousel-control-next"
      type="button"
      data-bs-target="#{{ carousel_id }}"
      data-bs-slide="next"
    >
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  {% endif %}

</div>
