Gallery Thumbnails

{% if config.galleryOptionShowNavArrows %}
        <div x-show="!isStart && showThumbnailArrows" class="absolute top-4 left-1/2 -translate-x-1/2 z-10 hidden xl:block">
            {% render "@template-button" with {
                color: 'dark',
                type: 'subtle',
                icon_type: "only-icon",
                size: 'md',
                border: true,
                label: 'Voir le slide précédent',
                icon: {
                    name: "heroicons--arrow-up-outline",
                },
                button_attribute: ("@click=\"prevItem\" :class=\"{'opacity-0 cursor-default': isStart, 'opacity-100': !isStart}\" \" :tabindex=\"isStart ? '-1' : '0'\"")|replace({'\"': '"'})
            } %}
        </div>
    {% endif %}

    {# Thumbnails #}
    <div
        class="flex gap-2 overflow-hidden w-full h-auto xl:flex-col xl:flex-1 max-h-none xl:max-h-[var(--gallery-main-height)]"
        x-show="images.length > 0"
        x-ref="thumbnailContainer"
        x-bind="galleryBody"
    >
        <template x-for="(image, index) in images" :key="index">
            <button
                    @click="activeItem = index"
                    class="js_thumbs_slide shrink-0 focus:outline-none transition-colors relative overflow-hidden group xl:flex-none aspect-[5/6]"
                    :class="{
                    'opacity-56': activeItem === index
                }"
                    :ref="activeItem === index ? 'activeThumb' : null"
                    x-init="$watch('activeItem', () => scrollToActiveThumb())"
            >
                <div class="relative w-full h-full">
                    <img
                        width="{{ config.smallWidth }}"
                        height="{{ config.smallHeight }}"
                        :src="image.thumb"
                        :alt="image.caption"
                        loading="lazy"
                        class="object-cover xl:w-full h-full"
                    >

                    <div
                        class="absolute inset-0 group-hover:ring-4 group-hover:ring-inset group-hover:ring-brand-600"
                        :class="{
                            'ring-4 ring-inset ring-brand-600 pointer-events-none': activeItem === index
                        }"
                    ></div>
                </div>
            </button>
        </template>
    </div>

    {% if config.galleryOptionShowNavArrows %}
        <div x-show="!isEnd && showThumbnailArrows" class="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 hidden xl:block">
            {% render "@template-button" with {
                color: 'dark',
                type: 'subtle',
                icon_type: "only-icon",
                size: 'md',
                border: true,
                label: 'Voir le slide suivant',
                icon: {
                    name: "heroicons--arrow-down-outline",
                },
                button_attribute: ("@click=\"nextItem\" :class=\"{'opacity-0 cursor-default': isEnd, 'opacity-100': !isEnd}\" :tabindex=\"isEnd ? '-1' : '0'\"")|replace({'\"': '"'})
            } %}
        </div>
    {% endif %}