{% if columns %}
    {% set colSize = 12 / columns %}
{% else %}
    {% set colSize = 3 %}
{% endif %}

{{ style({ include: oViewConf.getModuleUrl('ddoevisualcms', 'out/src/css/gallery.min.css') }) }}
{{ script({ include: oViewConf.getModuleUrl('ddoevisualcms', 'out/src/js/index.bundle.min.js'), priority: 5, dynamic: __oxid_include_dynamic }) }}

{% if type == 'lightbox' %}
    {{ style({ include: oViewConf.getModuleUrl('ddoevisualcms', 'out/src/css/lightbox.min.css') }) }}
{% endif %}

<div class="dd-shortcode-{{ shortcode }}{{ fullwidth ? ' dd-fullwidth' }} dd-image-gallery{% if class %} {{ class }}{% endif %}">
    <div class="row">
        {% for image in images %}
            <div class="col-12 col-sm-{{ colSize }}  {{ thumbClass }}">
                <div class="card text-white bg-transparent dd-image-box">
                    <img{% if isLazyLoadingEnabled %} loading="lazy"{% endif %} src="{{ image.sImageURL }}" width="{{ image.thumbImageSize[0] }}"
                                                                                height="{{ image.thumbImageSize[1] }}" alt="{{ image.name }}"/>
                    {% if show_title %}
                        <div class="card-img-overlay bg-black bg-opacity-50 px-3 py-3">
                            <div class="card-img-overlay-content">
                                <div class="card-title h6 dd-image-caption">{{ image.name }}</div>
                            </div>
                        </div>
                    {% endif %}
                    <a href="{% if thumbnail %}{{ image.sURL }}{% else %}{{ image.sImageURL }}{% endif %}" class="stretched-link"
                       target="_blank"{% if show_title %} title="{{ image.name }}"{% endif %}
                            {% if type == 'lightbox' %} data-toggle="lightbox" data-gallery="{{ galleryId }}"{% endif %}></a>
                </div>
            </div>
        {% endfor %}

    </div>
</div>