{# LIBRARIES #}
{{ attach_library('ui_patterns/bs_carousel.carousel_lib') }}
{% if slides|length > 1 %}
  {{ attach_library('ui_patterns/libraries.bs_carousel') }}
{% endif %}

{# VARIABLES #}
{% set fade = fade|default(false) %}
{% set show_indicators = show_indicators|default(false) %}
{% set show_playpause = show_playpause|default(false) %}
{% set show_controls = show_controls|default(false) %}
{% set slide_classes = slide_classes|default('') %}
{% set slide_wrapper_classes = slide_wrapper_classes|default('') %}
{% set overlay = overlay|default(false) %}
{% set overlay_style = overlay_style|default('ovr-std') %}

{% set carousel_attributes = carousel_attributes|default(create_attribute())
  .setAttribute("data-bs-interval", data_interval|default('5000'))
  .setAttribute("data-bs-keyboard", data_keyboard|default('true'))
  .setAttribute("data-bs-pause", data_pause|default('hover'))
  .setAttribute("data-bs-ride", data_ride|default('carousel'))
  .setAttribute("data-bs-wrap", data_wrap|default('true'))
  .setAttribute("data-bs-touch", data_touch|default('true'))
  .setAttribute("id", "crslc-#{ pid }")
%}

{% set carousel_class = [
  carousel_class|default(""),
  fade ? 'carousel-fade',
  'carousel', 'slide'
] %}

{# TEMPLATE #}
<div {{ carousel_attributes.addClass(carousel_class) }}>

  {# Overlay. This is one per carousel. Each slide can have an overlay too #}
  {% if overlay %}
    <div class="carousel-overlay {{ overlay_style }}">
      {{ overlay|raw }}
      {% if overlay_style == 'ovr-bkend' %}
        {{ overlay|raw }}
      {% endif %}
    </div>
  {% endif %}

  {% if overlay_src and overlay_alt %}
    {% set over_image %}
      {% include "@atoms/html5/image/image.twig" with {"url": overlay_src, "alt": overlay_alt, "img_class": 'poly-over' } only %}
    {% endset %}
    <div class="carousel-overlay {{ overlay_style }}">
      {{ over_image }}
      {% if overlay_style == 'ovr-bkend' %}
        {{ over_image }}
      {% endif %}
    </div>
  {% endif %}

  {% block carousel_inner %}
    <div class="carousel-inner slide-show {{ slide_wrapper_classes }}">
      {% for slide in slides %}
        {% set vars = {
          'sid': slide['sid'] ? slide['sid'] : 'sid-' ~ random(),
          'active': loop.first,
          'slide': slide['slide'] ? slide['slide'] : false,
          'title': slide['title'] ? slide['title'] : false,
          'subtitle': slide['subtitle'] ? slide['subtitle'] : false,
          'body': slide['body'] ? slide['body'] : false,
          'link_title': slide['link_title'] ? slide['link_title'] : false,
          'link_url': slide['link_url'] ? slide['link_url'] : false,
          'image': slide['image'] ? slide['image'] : false,
          'image_src': slide['image_src'] ? slide['image_src'] : false,
          'image_alt': slide['image_alt'] ? slide['image_alt'] : false,
          'overlay': slide['overlay'] ? slide['overlay'] : false,
          'overlay_src': slide['overlay_src'] ? slide['overlay_src'] : false,
          'overlay_alt': slide['overlay_alt'] ? slide['overlay_alt'] : false,
          'readmore': slide['readmore'] ? slide['readmore'] : false,
          'link_scope': slide['link_scope'] ? slide['link_scope'] : false,
          'link_class': slide['link_class'] ? slide['link_class'] : false,
          'disable_icon_right': slide['disable_icon_right'] ? slide['disable_icon_right'] : false,
          'slide_classes': slide_classes,
        } %}
        {{ pattern('bs_slide', vars) }}
      {% endfor %}
    </div>
  {% endblock %}

  {% block carousel_controls %}
    {% if slides|length > 1 and show_controls %}
      <div class="carousel-control-wrapper">
        <button class="carousel-control-prev carousel-control" type="button" data-bs-target="#crslc-{{ pid }}" data-bs-slide="prev">
          <i class="{{ global_icon_left|default('fas fa-chevron-left') }} display-6"></i>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next carousel-control" type="button" data-bs-target="#crslc-{{ pid }}" data-bs-slide="next">
          <i class="{{ global_icon_right|default('fas fa-chevron-right') }} display-6"></i>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    {% endif %}
  {% endblock %}

  {% block carousel_transport %}
    {% if slides|length > 1 and show_playpause %}
      <div class="crsl-transport">
        <button id="crsl-play-{{ pid }}" class="crsl-trsp crsl-play icon-button visually-hidden" type="button" data-crsl-target="crslc-{{ pid }}" data-crsl-action="play">
          <i class="fas fa-play"></i>
          <span class="visually-hidden">Play</span>
        </button>
        <button id="crsl-pause-{{ pid }}" class="crsl-trsp crsl-pause icon-button" type="button" data-crsl-target="crslc-{{ pid }}" data-crsl-action="pause">
          <i class="fas fa-pause"></i>
          <span class="visually-hidden">Pause</span>
        </button>
      </div>
    {% endif %}
  {% endblock %}

  {% block carousel_indicators %}
    {% if slides|length > 1 and show_indicators  %}
      <div class="carousel-indicators-wrapper">
        <div class="carousel-indicators">
          {% for slide in slides %}
            <button
              type="button"
              data-bs-target="#crslc-{{ pid }}"
              data-bs-slide-to="{{ loop.index0 }}"
              class="{{ loop.first ? "active" }}"
              aria-current="{{ loop.first ? "true" : "false" }}"
              aria-label="Slide {{ loop.index }}">
            </button>
          {% endfor %}
        </div>
      </div>
    {% endif %}
  {% endblock %}

</div>
