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

{% if images is iterable %}

  {% set main_slides = [] %}
  {% for image in images %}
    {% set main_image  %}
      {% include "@atoms/html5/image/image.twig" with { "url": image.main, "alt": image.caption } only %}
    {% 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">
                  {% set img_attributes = create_attribute()
                    .setAttribute("data-bs-target", "#crslc-main-#{gid}")
                    .setAttribute("data-bs-slide-to", '' ~ tile_count)
                    .setAttribute("data-jcbx-thumb-slide", '' ~ slide_count)
                    .setAttribute("aria-label", "Slide " ~ (tile_count + 1))
                    .setAttribute("id", "jcbx-thumb-#{gid}-#{tile_count}")
                  %}
                  {% include "@atoms/html5/image/image.twig" with {
                    "url": image.thumb,
                    "alt": image.caption,
                    "img_class": "jcbx-thumb " ~ (tile_count ? '' : 'tb-active'),
                    'img_attributes': img_attributes,
                  } only %}
                </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 %}
