<section class="gallery-section gallery-layout-{{ gallery.layout | default("square") }}">
    <div class="gallery-title">
        {{ title | safe }}
    </div>

    {% if needs_external_consent %}
        <div class="gallery-placeholder external-placeholder">
            <button
                type="button"
                class="gallery-load-button"
            >
                Externe Galerie-Bilder laden
            </button>
        </div>
    {% endif %}

    <div class="gallery-grid"{% if needs_external_consent %} hidden{% endif %}>
        {% for image in images %}
            <a
                href="{{ image.src }}"
                class="gallery-link"
                data-pswp-width="{{ image.width }}"
                data-pswp-height="{{ image.height }}"
                aria-label="Bild öffnen"
            >
                <figure class="gallery-item">
                    <img
                        src="{{ image.src }}"
                        alt="{{ image.alt }}"
                        loading="lazy"
                    >

                    {% if image.alt and gallery.captions | default(true) %}
                        <figcaption>
                            {{ image.alt }}
                        </figcaption>
                    {% endif %}
                </figure>
            </a>
        {% endfor %}
    </div>
</section>
