<section<txp:evaluate> class="<txp:if_yield name="align">align-<txp:yield name="align" /> </txp:if_yield><txp:if_yield name="padding-y">py-<txp:yield name="padding-y" /></txp:if_yield>"</txp:evaluate>>
    <txp:if_yield><txp:yield /><txp:else /><h2 class="sr-only"><txp:text item="gallery" /></h2></txp:if_yield>
    <div class="glide">
        <div class="glide__track" data-glide-el="track">
            <ul class="glide__slides">
                <txp:evaluate>
                    <txp:images category="gallery" break="" sort="date desc" limit="12">
                        <li class="glide__slide">
                            <txp:if_variable name="--gallery-additional-img-formats" not value="">
                                <picture>
                                    <txp:if_variable name="--gallery-additional-img-formats" match="any" value="jxl"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.jxl" type="image/jxl" /></txp:if_variable>
                                    <txp:if_variable name="--gallery-additional-img-formats" match="any" value="avif"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.avif" type="image/avif" /></txp:if_variable>
                                    <txp:if_variable name="--gallery-additional-img-formats" match="any" value="webp"><source srcset="<txp:image_url trim="/\.(gif|png|jpe?g)$/" />.webp" type="image/webp" /></txp:if_variable>
                                    <img decoding="async" src="<txp:image_url />" alt="<txp:image_info type='alt' />" itemprop="image">
                                </picture>
                            <txp:else />
                                <img decoding="async" src="<txp:image_url />" alt="<txp:image_info type='alt' />" itemprop="image">
                            </txp:if_variable>
                        </li>
                    </txp:images>
                    <txp:variable name="gallery-img-number" value="0" />
                <txp:else />
                    <txp:variable name="gallery-fallback" value="1" />
                    <li class="glide__slide"><img decoding="async" src="<txp:page_url type="theme_path" />/assets/img/placeholders/img-hd-1.png" alt="Placeholder Image 1" itemprop="image"></li>
                    <li class="glide__slide"><img decoding="async" src="<txp:page_url type="theme_path" />/assets/img/placeholders/img-hd-2.png" alt="Placeholder Image 2" itemprop="image"></li>
                    <li class="glide__slide"><img decoding="async" src="<txp:page_url type="theme_path" />/assets/img/placeholders/img-hd-3.png" alt="Placeholder Image 3" itemprop="image"></li>
                </txp:evaluate>
            </ul>
        </div>
        <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<">←</button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">">→</button>
        </div>
        <div class="glide__bullets" data-glide-el="controls[nav]">
            <txp:if_variable name="gallery-img-number">
                <txp:images category="gallery" break="" sort="date desc" limit="12">
                    <button class="glide__bullet" data-glide-dir="=<txp:variable name="gallery-img-number" />"><txp:variable name="gallery-img-number" add="1" output /> <txp:text item="of" /> <txp:hide process="2"><txp:variable name="gallery-img-number" /></txp:hide></button>
                </txp:images>
            <txp:else />
                <button class="glide__bullet" data-glide-dir="=0">1 <txp:text item="of" /> 3</button>
                <button class="glide__bullet" data-glide-dir="=1">2 <txp:text item="of" /> 3</button>
                <button class="glide__bullet" data-glide-dir="=2">3 <txp:text item="of" /> 3</button>
            </txp:if_variable>
        </div>
    </div>
    <txp:if_variable name="gallery-fallback"><txp:output_form form="instructions">To use this module, please create an an image category named <code>gallery</code> and assign one of more images to that category. Module also accepts <code>align=""</code> (allowed values: <code>left</code>, <code>right</code>, <code>center</code>, <code>inline-start</code>, <code>inline-end</code>) and <code>padding-y=""</code> (allowed values: <code>0</code> to <code>5</code>). If used as a container tag, any contained content is yielded above gallery content.</txp:output_form></txp:if_variable>
</section>
