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

{% if images is iterable %}

  {# VARIABLES #}

  {% if auto_start %}
    {% set data_ride = 'carousel' %}
  {% endif %}

  {% set hide_thumbs = hide_thumbs|default(false) %}
  {% set hide_fullscreen = hide_fullscreen|default(false) %}
  {% set hide_nav = hide_nav|default(false) %}
  {% set hide_captions = hide_captions|default(false) %}
  {% set gallery_classes = gallery_classes|default('') %}
  {% set preview_count = preview_count|default(1) %}
  {% set expand_icon = expand_icon|default('fas fa-expand-arrows') %}
  {% set hide_icon = hide_icon|default('fas fa-compress-arrows-alt') %}

  {% 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,
      'title': hide_captions ? '' : image.caption ~ num_slides_text,
    } %}
    {% set main_slides = main_slides|merge([main_slide]) %}
  {% endfor %}

  {# TEMPLATE #}
  {% if use_preview %}
    <div class="jb-preview">
      {% for i in 0..(preview_count - 1) %}
        {% set preview_url = false %}
        {% set preview_alt = false %}
        {% if images[i] is defined %}
          {% set preview_url = images[i]['thumb'] %}
          {% set preview_alt = images[i]['caption'] %}
        {% endif %}
        {% if preview_images[i] is defined %}
          {% set preview_url = preview_images[i]['url'] %}
          {% set preview_alt = preview_images[i]['alt'] %}
        {% endif %}
        {% if preview_url and preview_alt %}
          {% set preview_class = [
            preview_image_class,
            'jb-preview-image',
            'jb-pi-' ~ i,
            'jb-preview-' ~ gid,
          ] %}
          {% include "@atoms/html5/image/image.twig" with {
            "url": preview_url,
            "alt": preview_alt,
            "img_class": preview_class|join(' '),
          } only %}
        {% endif %}
      {% endfor %}
      {% if not hide_preview_text %}
        <span class="jb-preview-txt">
          {% if preview_text %}
            {{ preview_text }}
          {% else %}
            Show {{ images|length }} images
          {% endif  %}
        </span>
      {% endif %}
    </div>
  {% endif %}

  <div class="jcbx-wrapper-{{ gid }} {{ use_preview ? 'jcbx-previewed' }}">
    <div class="jcbx {{ gallery_classes }}" id="{{ gid }}">

      <div class="jcbx-inner">

      {% if not hide_fullscreen %}
        <a href="#" id="jb-expand-{{ gid }}" class="jb-expand">
          <i class="{{ expand_icon }}"></i>
        </a>
        <a href="#" id="jb-hide-{{ gid }}" class="jb-hide display-hidden">
          <i class="{{ hide_icon }}"></i>
        </a>
      {% endif %}

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

      {% if not hide_thumbs %}

      <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>
      {% endif %}
      </div>
    </div>
  </div>
{% endif %}
