{{ attach_library('ui_patterns/tm_lightbox_gallery.tm_lightbox_gallery_lib') }}

{% if images is iterable %}

  {% if auto_start %}
    {% set data_ride = 'carousel' %}
  {% endif %}
  {% set data_ride = data_ride|default('carousel') %}
  {% set data_interval = data_interval|default('3000') %}
  {% set show_num_slides = show_num_slides|default(false) %}
  {% set main_slides = [] %}
  {% set num_slides = images|length %}
  {% for image in images %}
    {% set main_image  %}
      {% include "@atoms/html5/image/image.twig" with { "url": image.main, "alt": image.caption } only %}
    {% endset %}
    {% set num_slides_text = '' %}
    {% if show_num_slides %}
      {% set num_slides_text = ' (' ~ loop.index ~ '/' ~ num_slides ~ ')' %}
    {% endif %}
    {% set main_slide = {
      'sid': 'main-' ~ loop.index,
      'image': main_image,
    } %}
    {% set main_slides = main_slides|merge([main_slide]) %}
  {% endfor %}

  <div class="jcbx-wrapper-{{ gid }}">
    <div class="jcbx" id="{{ gid }}">

      <a href="#" id="jb-expand-{{ gid }}" class="jb-expand">
        <i class="fas fa-expand-arrows"></i>
      </a>

      <a href="#" id="jb-hide-{{ gid }}" class="jb-hide display-hidden">
        <i class="fas fa-compress-arrows-alt"></i>
      </a>

      {% include "@organisms/tm-bs/carousel/carousel.twig" with {
        "slides": main_slides,
        "pid": 'main-' ~ gid,
        "show_indicators": false,
        "show_playpause": false,
        "show_controls": false,
        "data_ride": data_ride,
        "data_wrap": 'true',
        "interval": data_interval,
        "carousel_class": 'jcbx-main-carousel',
      } %}

    </div>
  </div>
{% endif %}
