{#
Parameters:
  - id (string) (default: gallery-random(10000))
  - title (string) (default: '')
  - title_tag (string) (default: 'h2')
  - title_link: (link object) (default: {})
  - title_attributes (drupal attrs)
  - counter (string) (default: '')
  - toggle_collapsed (string) (default: '')
  - toggle_expanded (string) (default: '')
  - next_label (string) (default: 'Next')
  - prev_label (string) (default: 'Previous')
  - max_visible_thumbnails (int) (default: 5)
  - items (object[]) format: [
      {
        thumbnail (string) img path
        media: (string) <img> tag
        caption (string)
        caption_title (string)
        copyright (string)
        copyright_label (string)
      }
    ]
  - icon_path (string) (default: '')
  - attributes (drupal attrs)

  Blocks:
    carousel
#}

{%- set _id = id|default('gallery-' ~ random(10000)) %}
{% 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 _counter = counter|default('') %}
{% set _toggle_collapsed = toggle_collapsed|default('') %}
{% set _toggle_expanded = toggle_expanded|default('') %}
{% set _next_label = next_label|default('Next') %}
{% set _prev_label = prev_label|default('Previous') %}
{% set _max_visible_thumbnails = max_visible_thumbnails|default(5) %}
{% set _items = items|default([]) %}
{% set _icon_path = icon_path|default('') %}
{% set _carousel_id = "carousel" ~ _id|capitalize %}
{% set _modal_id = "modal" ~ _id|capitalize %}
{% set _collapse_id = "collapse" ~ _id|capitalize %}
{% set _carousel_items = [] %}

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

{%- set attributes = attributes.addClass('bcl-gallery') %}

{%- if _items is not empty and _items is iterable -%}
<div
  {{ attributes }}
>
  {%- if _title is not empty or _counter is not empty -%}
  <div class="d-sm-flex flex-sm-row align-items-sm-center">
  {%- if _title is not empty -%}
    <div class="flex-sm-grow-1">
      {%- include '@oe-bcl/bcl-heading/heading.html.twig' with {
        title: _title,
        title_tag: _title_tag,
        title_link: _title_link,
        attributes: _title_attributes,
      } only -%}
    </div>
  {%- endif %}
  {%- if _counter is not empty -%}
    <div class="mb-3 mb-sm-0 fw-bold">
      {{- _counter|replace({'%d': _items|length}) -}}
    </div>
  {%- endif -%}
  </div>
  {%- endif -%}
  <div class="bcl-gallery__thumbnails">
  {%- for _batch in _items|batch(_max_visible_thumbnails) %}
    {%- if loop.index0 == 1 -%}
      <div class="bcl-gallery__thumbnails-collaspe collapse" id="{{ _collapse_id }}">
    {%- endif -%}
      <ul class="bcl-gallery__grid">
        {%- for _item in _batch -%}
          <li>
          {%- include '@oe-bcl/bcl-gallery/gallery-item.html.twig' with {
            item: _item,
            carousel_id: _carousel_id,
            modal_id: _modal_id,
            icon_path: _icon_path,
            carousel_anchor: loop.index0 + (_max_visible_thumbnails * loop.parent.loop.index0),
          } only -%}
          </li>
        {%- endfor -%}
      </ul>
    {%- if loop.last and loop.index0 >= 1 -%}
      </div>
    {%- endif %}
  {%- endfor %}
    {%- if _items|length > _max_visible_thumbnails -%}
      <div class="bg-lighter py-3 px-4 mt-2 rounded text-center">{# -#}
        <a
          class="bcl-gallery__collapse standalone d-none d-sm-inline-block"
          aria-controls="{{ _collapse_id }}"
          data-bs-toggle="collapse"
          aria-expanded="false"
          role="button"
          href="#{{ _collapse_id }}"
        >{# -#}
          <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>{# -#}
          <span class="label-expanded">{{ _toggle_expanded }}</span>
          {%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
            name: 'caret-down-fill',
            size: '2xs',
            path: _icon_path,
            attributes: create_attribute().addClass('ms-2-5'),
          } only -%}
        </a>{# -#}
        <a
          class="bcl-gallery__mobile-view-more standalone d-inline-block d-sm-none"
          data-bs-target="#{{ _carousel_id }}"
          data-bs-slide-to="{{ _max_visible_thumbnails - 1 }}"
          role="button"
          href="#"
        >{# -#}
          <span data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">{# -#}
            <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
            {%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
              name: 'caret-down-fill',
              size: '2xs',
              path: _icon_path,
              attributes: create_attribute().addClass('ms-2-5'),
            } only -%}
          <span>{# -#}
        </a>{# -#}
      </div>
    {%- endif -%}
  </div>{# -#}
  <div class="modal" id="{{ _modal_id }}" tabindex="-1" aria-labelledby="{{ _modal_id }}" aria-hidden="true" data-bs-backdrop="false">{# -#}
    <div class="modal-dialog modal-dialog-centered modal-fullscreen">{# -#}
      <div class="modal-content">{# -#}
        <div class="modal-header border-0 justify-content-between">
        {%- if _title is not empty -%}
          <div class="modal-title">
            {%- if _title is not empty %}
              {%- include '@oe-bcl/bcl-heading/heading.html.twig' with {
                title: _title,
                title_tag: 'h3',
                attributes: create_attribute().addClass(['d-sm-block', 'd-none']),
              } only %}
            {%- endif -%}
          </div>
        {%- endif -%}
          <div class="carousel-pager">{# -#}
            <span>1</span> / {{ _items|length -}}
          </div>{# -#}
          <div class="modal-close">
            {%- set button_attributes = create_attribute()
                                      .addClass('btn-close')
                                      .setAttribute('aria-label', 'Close')
                                      .setAttribute('data-bs-dismiss', 'modal')
            %}
            {%- include '@oe-bcl/bcl-button/button.html.twig' with {
              clean_class: true,
              attributes: button_attributes
            } only -%}
          </div>{# -#}
        </div>{# -#}
        <div class="modal-body d-flex align-items-center justify-content-center">
        {%- block carousel %}
          {%- for _item in _items %}
            {%- set _carousel_items = _carousel_items|merge([_item|merge({
              image: ('<iframe' in _item.media or '<img' in _item.media) ? _item.media|replace({'src=': 'data-src='}) : _item.media,
            })]) %}
          {%- endfor %}
          {%- include '@oe-bcl/bcl-carousel/carousel.html.twig' with {
            id: _carousel_id,
            with_controls: true,
            with_indicators: false,
            prev_label: _prev_label,
            next_label: _next_label,
            autoplay: false,
            items: _carousel_items,
          } only %}
        {%- endblock -%}
        </div>{# -#}
      </div>{# -#}
    </div>{# -#}
  </div>{# -#}
</div>
{%- endif -%}