{% if images %}
<div class="photo-gallery" data-controller="lightbox">
    <div class="gallery-grid">
        {% for image in images %}
            {% set thumb = image.local|default(false) ? media_url(image.thumbnail) : image.thumbnail %}
            {% set full = image.local|default(false) ? media_url(image.viewUrl) : image.viewUrl %}
            <button
                type="button"
                class="gallery-item"
                data-lightbox-target="item"
                data-action="lightbox#open"
                data-lightbox-index-param="{{ loop.index0 }}"
                data-src="{{ full }}"
                data-alt="{{ image.name }}"
            >
                <img src="{{ thumb }}" alt="{{ image.name }}" loading="lazy" decoding="async">
                {% if image.name %}
                    <span>{{ image.name }}</span>
                {% endif %}
            </button>
        {% endfor %}
    </div>

    <div
        class="lightbox"
        data-lightbox-target="overlay"
        data-action="click->lightbox#onBackdrop"
        hidden
        tabindex="-1"
        role="dialog"
        aria-modal="true"
        aria-label="Galeria de fotos"
    >
        <button type="button" class="lightbox__close" data-action="lightbox#close" aria-label="Fechar">
            <i class="fa-solid fa-xmark"></i>
        </button>
        {% if images|length > 1 %}
            <button type="button" class="lightbox__nav lightbox__nav--prev" data-action="lightbox#prev" aria-label="Anterior">
                <i class="fa-solid fa-chevron-left"></i>
            </button>
            <button type="button" class="lightbox__nav lightbox__nav--next" data-action="lightbox#next" aria-label="Próximo">
                <i class="fa-solid fa-chevron-right"></i>
            </button>
        {% endif %}
        <figure class="lightbox__stage">
            <img data-lightbox-target="stage" alt="">
            <figcaption data-lightbox-target="caption"></figcaption>
        </figure>
        {% if images|length > 1 %}
            <div class="lightbox__thumbs">
                {% for image in images %}
                    {% set thumb = image.local|default(false) ? media_url(image.thumbnail) : image.thumbnail %}
                    <button
                        type="button"
                        class="lightbox__thumb"
                        data-lightbox-target="thumb"
                        data-action="lightbox#select"
                        data-lightbox-index-param="{{ loop.index0 }}"
                        aria-label="{{ image.name }}"
                    >
                        <img src="{{ thumb }}" alt="" loading="lazy">
                    </button>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</div>
{% endif %}