{# Parameters:
  - title (string) (default: '')
  - title_tag (string) (default: 'h2')
  - title_link: (link object) (default: {})
  - title_attributes: (drupal attrs)
  - id (string) (default: '')
  - autoplay (boolean) (default: true)
  - dark (boolean) (default: false)
  - active_item (integer) (default: 1)
  - items (object[]) format: [
    {
      image: (string) <img> tag
      caption (string)
      caption_classes (string)
      caption_title (string)
      copyright (string)
      copyright_label (string)
      interval (integer) (default: 0)
    }
  ],
  - fade (boolean) (default: false)
  - with_controls (boolean) (default: true)
  - prev_label (string) (default: '')
  - next_label (string) (default: '')
  - with_indicators (boolean) (default: false)
  - rounded_indicators (boolean) (default: false)
  - disable_touch (boolean) (default: false)
  - attributes (drupal attrs)
#}

{%- set _title = title|default('') %}
{% set _title_tag = title_tag|default('h2') %}
{% set _title_link = title_link|default({}) %}
{% set _title_attributes = title_attributes ?: create_attribute() %}
{% set _id = id|default('') %}
{% set _autoplay = autoplay ?? true %}
{% set _dark = dark ?? false %}
{% set _active_item = active_item|default(1) %}
{% set _items = items|default([]) %}
{% set _fade = fade ?? false %}
{% set _with_controls = with_controls ?? true %}
{% set _prev_label = prev_label|default('') %}
{% set _next_label = next_label|default('') %}
{% set _with_indicators = with_indicators ?? false %}
{% set _rounded_indicators = rounded_indicators ?? false %}
{% set _disable_touch = disable_touch ?? false %}

{%- set _classes = ['carousel', 'slide'] %}

{%- if _fade %}
  {%- set _classes = _classes|merge(['carousel-fade']) %}
{% endif %}
{% if _dark %}
  {%- set _classes = _classes|merge(['carousel-dark']) %}
{% endif %}

{%- if attributes is empty %}
  {%- set attributes = create_attribute() %}
{% endif %}

{%- if _id is not empty %}
  {%- set attributes = attributes.setAttribute('id', _id) %}
{% endif %}

{%- if _autoplay %}
  {%- set attributes = attributes.setAttribute('data-bs-ride', 'carousel') %}
{% endif %}

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

{%- if _rounded_indicators %}
  {%- set attributes = attributes.addClass('rounded-indicators') %}
{% endif %}

{%- set attributes = attributes.addClass(_classes) %}

{%- if _title is not empty -%}
  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
    title: _title,
    title_tag: _title_tag,
    title_link: _title_link,
    attributes: _title_attributes,
  } only %}
{%- endif -%}

<div
  {{ attributes }}
>
{%- if _with_indicators -%}
  <div class="carousel-indicators d-none d-md-flex">
  {%- for _i in 0..(_items|length - 1) %}
    {%- set button_attributes = create_attribute()
                              .setAttribute('aria-label', 'Slide ' ~ (_i + 1))
                              .setAttribute('data-bs-target', '#' ~ _id)
                              .setAttribute('data-bs-slide-to', _i)
    %}
    {%- if loop.index == _active_item %}
      {%- set button_attributes = button_attributes.setAttribute('aria-current', true).addClass(['active']) %}
    {%- endif %}
    {%- include '@oe-bcl/bcl-button/button.html.twig' with {
      clean_class: true,
      attributes: button_attributes
    } only %}
  {%- endfor -%}
  </div>
{%- endif -%}
  <div class="carousel-inner">
  {%- if _items is not empty and _items is iterable %}
    {%- for _item in items %}
    {%- set _item_classes = 'carousel-item' %}
    {%- if loop.index == _active_item %}
      {%- set _item_classes = _item_classes ~ ' active' %}
    {%- endif -%}
    <div
      class="{{ _item_classes }}"
    {% if _item.interval is defined %}
      data-bs-interval="{{ _item.interval }}"
    {% endif %}
    >
    {%- if _item.image is defined and _item.image is not empty %}
      <figure class="m-0 h-100">
        {{- _item.image }}
        {%- if (_item.caption is defined and _item.caption is not empty) or (_item.link is defined and _item.link is not empty) or (_item.caption_title is defined and _item.caption_title is not empty) %}
          {%- set _caption_classes = 'carousel-caption' %}
          {%- if _item.caption is not empty and _item.link is empty %}
            {%- set _caption_classes = _caption_classes ~ ' d-none d-md-block' %}
          {%- endif -%}
          <div
            class="{{ _caption_classes }}"
          >
            {%- if _item.caption is not empty or _item.caption_title is not empty %}
              {%- if _item.caption_classes is defined and _item.caption_classes is not empty -%}
                <div class="{{ _item.caption_classes }}">
              {%- endif %}
              {%- if _item.caption_title is not empty -%}
                <div class="fs-5">{{ _item.caption_title }}</div>
              {%- endif %}
                {{- _item.caption -}}
              {% if _item.caption_classes is defined and _item.caption_classes is not empty -%}
                </div>
              {%- endif %}
            {%- endif %}
            {%- if _item.link is defined and _item.link is not empty %}
              {%- include '@oe-bcl/bcl-link/link.html.twig' with _item.link only %}
            {%- endif -%}
          </div>
        {%- endif -%}
        {%- if _item.copyright is defined and _item.copyright is not empty -%}
          <figcaption class="bcl-copyright">
            {%- if _item.copyright_label is defined and _item.copyright_label is not empty -%}
              <span class="visually-hidden">{{- _item.copyright_label }} </span>
            {%- endif -%}
            {{- _item.copyright -}}
          </figcaption>
        {%- endif -%}
      </figure>
    {%- endif %}
    </div>
    {%- endfor %}
  {%- endif -%}
  </div>
{%- if _with_controls -%}
  <button
    class="carousel-control-prev"
    type="button"
    data-bs-target="#{{ _id }}"
    data-bs-slide="prev"
  >{# -#}
    <span class="carousel-control-prev-icon"></span>
  {%- if _prev_label is not empty -%}
    <span class="visually-hidden">{{ _prev_label }}</span>
  {%- endif -%}
  </button>{# -#}
  <button
    class="carousel-control-next"
    type="button"
    data-bs-target="#{{ _id }}"
    data-bs-slide="next"
  >{# -#}
    <span class="carousel-control-next-icon"></span>
  {%- if _next_label is not empty -%}
    <span class="visually-hidden">{{ _next_label }}</span>
  {%- endif -%}
  </button>
{%- endif -%}
</div>
{#--#}