{% set modifier_classes = 'uw-ig--' ~ type %}

<div id="uw-ig-{{ images.id }}" class="uw-ig {{ modifier_classes }}" data-id="{{ images.id }}" data-images-num="{{ display_images }}" data-nav="{{ nav }}">
  <div class="uw-ig__wrapper">
    {% if type == NULL or type == 'slider' %}

      {% embed '@layouts/carousel/carousel.twig' %}

        {% block content %}
          {% for index, image in images.images %}
            <div class="uw-ig__item">
              <div class="uw_ig__image">
                <a class="uw-lightbox__open" href="#uw-lightbox-{{ images.id }}-{{ index }}">

                  {% include '@components/responsive-image/responsive-image.twig' with {
                    'sources': image.image.sources,
                    'img_element': image.image.img_element['#uri'],
                    'alt': image.image.alt
                  } %}

                </a>
              </div>
              {% if image.caption %}
                <div class="uw_ig__caption">
                  {% include '@components/caption/caption.twig' with {
                    'caption': image.caption
                  } %}
                </div>
              {% endif %}
            </div>

          {% endfor %}

        {% endblock %}

      {% endembed %}
      {#  lightbox #}

      {% for index, image in images.images %}
        <div class="uw-lightbox" id="uw-lightbox-{{ images.id }}-{{ index }}">
          <div class="uw-lightbox__content">

            <img src="{{ image.original }}" alt="{{ image.image.alt }}">

            <div class="uw-lightbox__title">

              <div class="uw-lightbox__count">
                <span>{{ loop.index }} / {{  loop.length  }}</span>
              </div>

              {% if image.caption %}
                <div class="uw-lightbox__caption">{{ image.caption }}</div>
              {% endif %}
            </div>

            <a class="uw-lightbox__close" href="#uw-ig-{{ image_gallery.images.id }}"></a>

            {% set numItems =  loop.length - "1" %}
            {%  if index == 0  %}
              {% set prevIndex =  numItems  %}
              {% set nextIndex =  index + "1" %}
            {% elseif index == numItems %}
              {% set nextIndex =  0  %}
              {% set prevIndex =  index  - "1"  %}
            {% else %}
              {% set prevIndex =  index  - "1"  %}
              {% set nextIndex =  index + "1" %}
            {% endif %}

            <div class="uw-lightbox__prev-next">
              <a class="uw-lightbox__prev" href="#uw-lightbox-{{ images.id }}-{{ prevIndex }}"></a>
              <a class="uw-lightbox__next"  href="#uw-lightbox-{{ images.id }}-{{ nextIndex }}"></a>
            </div>
          </div>
        </div>
      {% endfor %}

    {% else %}

      {% for images in image_gallery.images %}

        {% for index, image in images %}
          <div class="uw-ig__item">
            <div class="uw-ig__image">
              <a class="uw-lightbox__open" href="#uw-lightbox-{{image_gallery.images.id }}-{{ index }}">
                <img src="{{ image.image.thumbnail }}" alt="{{ image.alt }}" />
              </a>

              {% if image.caption %}
                <div class="uw_ig__caption">
                  {% include '@components/caption/caption.twig' with {
                    'caption': image.caption
                  } %}
                </div>
              {% endif %}

            </div>
          </div>
        {% endfor %}
      {% endfor %}

      {#  lightbox #}
      {% for images in image_gallery.images %}

        {% for index, image in images %}
          <div class="uw-lightbox" id="uw-lightbox-{{ image_gallery.images.id }}-{{ index }}">
            <div class="uw-lightbox__content">
              <img src="{{ image.image.original }}" alt="{{ image.alt }}">

              <div class="uw-lightbox__title">
                <div class="uw-lightbox__count">
                  <span>{{ loop.index }} / {{  loop.length  }}</span>
                </div>
                {% if image.caption %}
                  <div class="uw-lightbox__caption">{{ image.caption }}</div>
                {% endif %}
              </div>

              <a class="uw-lightbox__close" href="#uw-ig-{{ image_gallery.images.id }}"></a>

              {% set numItems =  loop.length - "1" %}
              {%  if index == 0  %}
                {% set prevIndex =  numItems  %}
                {% set nextIndex =  index + "1" %}
              {% elseif index == numItems %}
                {% set nextIndex =  0  %}
                {% set prevIndex =  index  - "1"  %}
              {% else %}
                {% set prevIndex =  index  - "1"  %}
                {% set nextIndex =  index + "1" %}
              {% endif %}

              <div class="uw-lightbox__prev-next">
                <a class="uw-lightbox__prev" href="#uw-lightbox-{{ image_gallery.images.id }}-{{ prevIndex }}"></a>
                <a class="uw-lightbox__next"  href="#uw-lightbox-{{image_gallery.images.id }}-{{ nextIndex }}"></a>
              </div>
            </div>
          </div>
        {% endfor %}
      {% endfor %}
    {% endif %}
  </div>
</div>