{#
/**
 * @file
 * Template for a Bootstrap 5 Carousel Item.
 *
 * This component must be used as a child inside the carousel component's
 * slides slot. It wraps content in the required .carousel-item div and
 * handles the active state and optional per-slide interval.
 *
 * Available variables:
 * - attributes: HTML attributes for the carousel-item element.
 * - active: (boolean) Mark this slide as the active/visible slide.
 *   Only one slide per carousel should have active set to true.
 * - interval: Optional autoplay delay in milliseconds for this slide only.
 *   Overrides the global carousel interval.
 * - caption_heading: Optional heading text shown in the caption overlay.
 * - caption_text: Optional body text shown in the caption overlay.
 * - custom_class: Additional CSS classes for the carousel-item element.
 *
 * Available slots:
 * - slide_content: The slide content (typically an image component).
 *
 * @ingroup themeable
 */
#}

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

<div
  {{ attributes.addClass(classes) }}
  {% if interval %}data-bs-interval="{{ interval }}"{% endif %}
>
  {% block slide_content %}{% endblock %}

  {% if caption_heading or caption_text %}
    <div class="carousel-caption d-none d-md-block">
      {% if caption_heading %}
        <h5>{{ caption_heading }}</h5>
      {% endif %}
      {% if caption_text %}
        <p>{{ caption_text }}</p>
      {% endif %}
    </div>
  {% endif %}
</div>
