{#
Parameters:
  - item (object) (default: {})
    format: {
      thumbnail (string) img path
      media: (string) <img> tag
      caption (string)
      caption_title (string)
      is_playable (boolean)
    }
  - carousel_id (string) (default: '')
  - modal_id (string) (default: '')
  - carousel_anchor (string) (default: '')
  - icon_path (string) (default: '')
  - attributes (drupal attrs)
#}

{%- set _item = item|default({}) %}
{% set _carousel_id = carousel_id|default('') %}
{% set _modal_id = modal_id|default('') %}
{% set _icon_path = icon_path|default('') %}
{% set _carousel_anchor = carousel_anchor|default('') %}

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

{%- set attributes = attributes.addClass(['bcl-gallery__item', 'd-block', 'w-100', 'img-fluid'])
                              .setAttribute('data-bs-target', '#' ~ _carousel_id)
                              .setAttribute('data-bs-slide-to', _carousel_anchor)
                              .setAttribute('tabindex', '0')
-%}

<a
  {{ attributes }}
>{# -#}
  <div class="bcl-gallery__item-overlay" data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
  {%- if _item.is_playable -%}
    <span class="bcl-gallery__item-play-icon">
    {%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
      name: 'play-fill',
      size: 's',
      path: _icon_path,
    } only -%}
    </span>
  {%- endif %}
  {%- if _item.caption is not empty or item.caption_title is not empty -%}
    <div class="bcl-gallery__item-caption">
    {%- if _item.caption_title is not empty -%}
      <div class="fs-5">{{ _item.caption_title }}</div>
    {%- endif %}
    {%- if _item.caption is not empty -%}
      <div class="bcl-gallery__item-description">
        {{- _item.caption -}}
      </div>
    {%- endif -%}
    </div>
  {%- endif -%}
  </div>
  {{- _item.thumbnail -}}
</a>
{#--#}