{#
/**
 * @file
 * Default theme implementation to display a Bootstrap Carousel component.
 *
 * Available variables:
 * - attributes: An array of HTML attributes intended to be added to the main
 *   container tag of this template.
 *   - id: A valid HTML ID and guaranteed to be unique.
 * - controls: Flag indicating whether or not to show the carousel controls.
 * - indicators: Flag indicating whether or not to show the carousel indicators.
 * - interval: The amount of time to delay between automatically cycling a
 *   slide item. If false, carousel will not automatically cycle.
 * - pause: (optional) Pauses the cycling of the carousel on mouseenter and
 *   resumes the cycling of the carousel on mouseleave.
 * - slides: A list of carousel slide items containing:
 *    - image: (required) The image to display in the slide item.
 *    - attributes: (optional) An array of HTML attributes intended to be added
 *      to the slide item.
 *    - title: (optional) A title to display for the slide item.
 *    - description: (optional) Additional helpful text to display for a slide
 *      item.
 * - start_index: (optional) Alters the slide position relative to its current
 *   position.
 * - wrap: (optional) Whether the carousel should cycle continuously or have
 *   hard stops.
 *
 * @ingroup templates
 */
#}
{% set classes = ['carousel', 'slide'] %}
<div{{ attributes.addClass(classes) }} data-ride="carousel" data-interval="{{ interval }}" data-pause="{{ pause }}" data-wrap="{{ wrap }}">
  {% if indicators %}
    {{ indicators }}
  {% endif %}
  <div class="carousel-inner" role="listbox">
  {% for slide in slides %}
    {% set slide_classes = ['item', start_index == loop.index0 ? 'active'] %}
    <div{{ slide.attributes.addClass(slide_classes) }}>
      {{ slide.image }}
      {% if slide.title or slide.description %}
        <div class="carousel-caption">
          {% if slide.title %}
            <h3>{{ slide.title }}</h3>
          {% endif %}
          {% if slide.description %}
            <p>{{ slide.description }}</p>
          {% endif %}
        </div>
      {% endif %}
    </div>
  {% endfor %}
  </div>
  {% if controls %}
    {{ controls.left }}
    {{ controls.right }}
  {% endif %}
</div>