{{ attach_library('ui_patterns/tm_gallery.tm_gallery_lib') }}

{% if images is iterable %}

  {% set main_slides = [] %}
  {% for image in images %}
    {% set main_image  %}
      <img src="{{ image.main }}" alt="{{ image.caption }}" />
    {% endset %}
    {% set main_slide = {
      'sid': 'main-' ~ loop.index,
      'image': main_image,
      'title': image.caption,
    } %}
    {% 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": true,
        "data_ride": 'carousel',
        "data_wrap": 'true',
        "interval": '3000',
        "carousel_class": 'jcbx-main-carousel',
      } %}

      <div class="jcbx-thumbs">
        {% set nav_slides = [] %}
        {% set tile_count = 0 %}
        {% set slide_count = 0 %}
        {% for row in images|batch(4, '') %}

          {% set slide %}
            <div class="row">
            {% for image in row %}
              {% if image.thumb %}
                <div class="col-3">
                  <img
                    data-bs-target="#crslc-main-{{ gid }}"
                    data-bs-slide-to="{{ tile_count }}"
                    data-jcbx-thumb-slide="{{ slide_count }}"
                    aria-label="Slide {{ tile_count + 1 }}"
                    class="jcbx-thumb {{ tile_count ? '' : 'tb-active'}}"
                    id="jcbx-thumb-{{ gid }}-{{ tile_count }}"
                    src="{{ image.thumb }}"
                    alt="{{ image.caption }}"
                  />
                </div>
                {% set tile_count = tile_count + 1 %}
              {% endif %}
            {% endfor %}
            </div >
          {% endset %}

          {% set nav_slide = {
            'sid': 'nav-' ~ loop.index,
            'slide': slide,
          } %}
          {% set nav_slides = nav_slides|merge([nav_slide]) %}
          {% set slide_count = slide_count + 1 %}
        {% endfor %}

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

      </div>

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