{#
/**
 * @file
 * Vartheme BS5 Starter Kit implementation for Bootstrap heroslider component.
 *
 * Available properties:
 * - controls_indicators_position: Choose the location of the media from (overlay|start|end|top|bottom).
 * - id: Set a unique id on the heroslider for optional controls, especially if the single page is using multiple hero sliders.
 * - items: An array of slider items, with a formatted UI Pattern for Cards.
 * - controls: Add the previous/next controls.
 * - indicators: Add indicators to the heroslider, alongside the previous/next controls.
 * - interval: The amount of time to delay between automatically cycling an item.
 * - keyboard: Whether the carousel should react to keyboard events. (true|false)
 * - pause: If set to `hover`, pauses the cycling of the carousel on mouseenter and resumes
 *          the cycling of the carousel on mouseleave. If set to false, hovering over the carousel
 *          won’t pause it. On touch-enabled devices, when set to `hover`, cycling will pause
 *          on touchend (once the user finished interacting with the carousel) for two intervals,
 *          before automatically resuming. This is in addition to the mouse behavior.
 * - ride: If set to `true`, autoplays the carousel after the user manually cycles the first item.
 *         If set to `carousel`, autoplays the carousel on load.
 * - touch: Whether the carousel should support left/right swipe interactions on touchscreen devices. (true|false)
 * - wrap: Whether the carousel should cycle continuously or have hard stops. (true|false)
 * - heroslider_utility_classes: An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to the heroslider element.
 * - heroslider_controls_utility_classes: An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to the controls element.
 * - heroslider_indicators_utility_classes: An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to the indicators element.
 *
 * Available attributes:
 * - attributes: HTML attributes to apply to the heroslider main wrapper tag.
 * - controls_attributes: HTML attributes to apply to the controls wrapper tag.
 * - indicators_attributes: HTML attributes to apply to the indicators wrapper tag.
 *
 * Available slots:
 * - empty: The output when the Hero Slider has no slides (empty).
 *
 */
#}
{% apply spaceless %}

{% set heroslider_id = id ? id : 'heroslider-' ~ random(1000) %}
{% set heroslider_utility_classes = heroslider_utility_classes ?? [] %}
{% set heroslider_controls_utility_classes = heroslider_controls_utility_classes ?? [] %}
{% set heroslider_indicators_utility_classes = heroslider_indicators_utility_classes ?? [] %}
{% set controls_indicators_position = controls_indicators_position ? ['hero-style-' ~ controls_indicators_position] : ['hero-style-overlay'] %}

{%
  set heroslider_classes = [
    'varbase-heroslider',
    'js-varbase-heroslider',
    'carousel',
    'slide',
  ]|merge(heroslider_utility_classes)|merge(controls_indicators_position)
%}

{% if not attributes %}
  {% set attributes = create_attribute() %}
{% endif %}

{% set attributes = attributes.addClass(heroslider_classes) %}
{% set attributes = attributes.setAttribute('id', heroslider_id) %}

{% set interval = interval ?? 5000 %}
{% set attributes = attributes.setAttribute('data-bs-interval', interval) %}

{% set keyboard = keyboard ?? true %}
{% if keyboard == true %}
  {% set attributes = attributes.setAttribute('data-bs-keyboard', 'true') %}
{% endif %}

{% set pause = pause ?? '' %}
{% if pause and pause != '' %}
  {% set attributes = attributes.setAttribute('data-bs-pause', pause) %}
{% endif %}

{% set ride = ride ?? '' %}
{% if ride and ride != '' %}
  {% set attributes = attributes.setAttribute('data-bs-ride', ride) %}
{% endif %}

{% set touch = touch ?? true %}
{% if touch == true %}
  {% set attributes = attributes.setAttribute('data-bs-touch', 'true') %}
{% endif %}

{% set wrap = wrap ?? true %}
{% if wrap == true %}
  {% set attributes = attributes.setAttribute('data-bs-wrap', 'true') %}
{% endif %}

{% if items and items|length >= 1 -%}
  <div{{ attributes }}>
    {# Add carousel items #}
    <div class="carousel-inner">
      {% for key, item in items %}
        {% set item_id = heroslider_id ~ '--item-' ~ key %}
        <div id="{{ item_id }}" class="carousel-item {{ (key == 0) ? 'active' }}">
          {{ item }}
        </div>
      {% endfor %}
    </div>

    {% if (indicators or controls) and items|length >= 2 %}

      {% if not controls_attributes %}
        {% set controls_attributes = create_attribute() %}
      {% endif %}

      {%
        set controls_classes = [
          'carousel-controls',
        ]
      %}

      {% set controls_attributes = controls_attributes.addClass(controls_classes) %}

      <div{{ controls_attributes }}>

        {# Add indicators for the carousel #}
        {% if indicators %}
          {% if not indicators_attributes %}
            {% set indicators_attributes = create_attribute() %}
          {% endif %}

          {%
            set indicators_classes = [
              'carousel-indicators'
            ]|merge(heroslider_indicators_utility_classes)
          %}

          {% set indicators_attributes = indicators_attributes.addClass(indicators_classes) %}

          <div{{ indicators_attributes}}>
            {% for key, item in items %}
              {% set item_id = heroslider_id ~ '--item-' ~ key %}
              <button id="indicator--{{ item_id }}" type="button" data-bs-target="#{{ heroslider_id }}" data-bs-slide-to="{{ key }}" class="{{ (key == 0) ? 'active' }}" aria-label="{{ item.indicator_label }}" aria-current="{{ (key == 0) ? 'true' }}"></button>
            {% endfor %}
          </div>
        {% endif %}

        {# Add controls for the carousel #}
        {% if controls %}
          <div class="carousel-control-buttons">
            <button class="carousel-control-prev js-carousel-control-prev" type="button" data-bs-target="#{{ heroslider_id }}" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">{{ 'Previous'|t }}</span>
            </button>
            <button class="carousel-control-pause js-carousel-control-pause" type="button" data-bs-target="#{{ heroslider_id }}">
              <span class="carousel-control-pause-icon" aria-hidden="true"></span>
              <span class="visually-hidden">{{ 'Pause'|t }}</span>
            </button>
            <button class="carousel-control-next js-carousel-control-next" type="button" data-bs-target="#{{ heroslider_id }}" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">{{ 'Next'|t }}</span>
            </button>
          </div>
        {% endif %}
      </div>
    {% endif %}
  </div>
{% elseif empty -%}
  <div{{ attributes }}>
    <div class="view-empty">
      {{ empty }}
    </div>
  </div>
{% endif %}

{% endapply %}