Gallery Main Image

<div
    class="relative overflow-hidden bg-white"
    aria-live="polite"
    aria-atomic="true"
    x-bind="galleryBody"
    x-ref="galleryDialog"
    :class="{
        'z-50 fixed inset-0 w-screen max-w-[min(1280px,(100%_-_2rem))] max-h-[min(1024px,(100%_-_2rem))] m-auto': fullscreen,
        'relative aspect-[5/6]': !fullscreen
    }"
    :role="fullscreen ? 'dialog' : false"
    :aria-modal="fullscreen"
    @keyup.arrow-right="nextItem"
    @keyup.arrow-left="prevItem"
    @resize.debounce.100.window="syncHeight"
>
    <div
        class="relative h-full"
        x-ref="track"
    >
        <div
            class="flex transition-transform duration-300 ease-out h-full"
            :style="{ transform: `translateX(-${activeItem * 100}%)` }"
        >
            <template x-for="(image, index) in images" :key="index">
                <div class="flex-shrink-0 w-full h-full relative">
                    <div x-show="index === 0" class="absolute z-10 top-4 left-4 bg-black text-white px-3 py-1 rounded-full text-body-sm font-semibold">
                        NEW
                    </div>

                    <template x-if="image.type === 'video' && activeVideo">
                        <iframe
                            class="absolute inset-0 w-full h-full"
                            frameborder="0"
                            x-data="getVideoData(image)"
                            :src="src"
                            :allow="allow"
                        ></iframe>
                    </template>

                    <picture>
                        <source :srcset="fullscreen ? image.full : image.img" media="(min-width: 768px)"/>
                        <img
                                x-show="!activeVideo || image.type !== 'video'"
                                :src="fullscreen ? image.full : image.img"
                                :alt="image.caption || '{{ config.productName }}'"
                                class="w-full h-full object-cover"
                                draggable="false"
                        >
                    </picture>

                    {% if config.galleryOptionShowCaption %}
                        <div
                            x-show="image.caption"
                            class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/50 to-transparent text-white"
                            x-text="image.caption"
                        ></div>
                    {% endif %}
                </div>
            </template>
        </div>


        <div class="absolute inset-x-0 bottom-0 flex justify-between items-center p-4 z-10 pointer-events-none" x-show="images.length > 1">
            {% if config.galleryOptionArrows %}
                <div class="flex items-center h-full pointer-events-auto">
                    {% 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-left-outline",
                        },
                        button_attribute: ("@click=\"prevItem\" :class=\"{'opacity-0 cursor-default': isStart, 'opacity-100': !isStart}\" \" :tabindex=\"isStart ? '-1' : '0'\"")|replace({'\"': '"'})
                    } %}
                </div>

                <div class="flex items-center h-full pointer-events-auto">
                    {% 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-right-outline",
                        },
                        button_attribute: ("@click=\"nextItem\" :class=\"{'opacity-0 cursor-default': isEnd, 'opacity-100': !isEnd}\" :tabindex=\"isEnd ? '-1' : '0'\"")|replace({'\"': '"'})
                    } %}
                </div>
            {% endif %}
        </div>

        <div class="absolute top-2 right-2 flex gap-2">
            {% if config.galleryOptionAllowfullscreen %}
                <button
                    @click="toggleFullscreen"
                    class="p-2 rounded-full bg-white/80 text-gray-800 hover:bg-white"
                >
                    <span x-show="!fullscreen">{% render "@icons-heroicons--plus-outline" %}</span>
                    <span x-show="fullscreen">{% render "@icons-heroicons--x-mark-outline" %}</span>
                </button>
            {% endif %}
        </div>
    </div>
</div>