<div id="gallery_compare_" class="gallery-compare select-none mb-6">
    
    <button id="btn_fullscreen_" title="schermo intero" class="gallery-open-btn flex items-center gap-2 absolute top-2 right-2 bg-black/30 text-primary px-2 py-2 rounded-md font-semibold text-xs">
       
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-white">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
        </svg>
    </button>
</div>

<style>
    .gallery-compare {
        display: flex;
        width: 100%;
        height: 600px;
        overflow: hidden;
        position: relative;
    }

    .gallery-strip {
        flex: 1;
        background: #000;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: flex 0.2s ease-out, filter 0.2s ease-out;
    }

    .gallery-strip-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .gallery-strip.expanded {
        flex: 3;
    }

    .gallery-strip.shrunk {
        flex: 0.25;
        filter: brightness(0.5);
    }

    .gallery-strip.shrunk .gallery-label span {
        display: none;
    }

    .gallery-label {
        position: absolute;
        height: 44px;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.7);
        text-align: center;
        padding: 8px 0;
        font-size: 14px;
    }

    .gallery-strip:hover {
        filter: brightness(1);
    }

    .gallery-compare:not(.has-expanded):hover .gallery-strip {
        flex: 0.75;
        filter: brightness(0.5);
    }

    .gallery-compare:not(.has-expanded):hover .gallery-strip:hover {
        flex: 1.8;
        filter: brightness(1);
    }

    .gallery-open-btn {
        z-index: 10;
        transition: all 0.3s ease;
    }
    .gallery-open-btn:hover {
        background-color: rgba(0, 0, 0, 0.7);
    }
</style>

<script>
    (function() {
        const galleryId = 'gallery_compare_';
        const galleryContainer = document.getElementById(galleryId);
        
        if (!galleryContainer) return;
        
        // Get all gallery strips within this specific gallery
        const galleryStrips = galleryContainer.querySelectorAll('.gallery-strip');
        
        galleryStrips.forEach(strip => {
            strip.addEventListener('click', function () {
                // If this strip is already expanded, reset everything
                if (this.classList.contains('expanded')) {
                    galleryStrips.forEach(s => {
                        s.classList.remove('expanded');
                        s.classList.remove('shrunk');
                    });
                    galleryContainer.classList.remove('has-expanded');
                    return;
                }

                // Remove expanded class from all strips in this gallery
                galleryStrips.forEach(s => {
                    s.classList.remove('expanded');
                    s.classList.remove('shrunk');
                });
                
                // Add expanded class to clicked strip
                this.classList.add('expanded');
                galleryContainer.classList.add('has-expanded');
                
                // Add shrunk class to other strips in this gallery
                galleryStrips.forEach(s => {
                    if (s !== this) {
                        s.classList.add('shrunk');
                    }
                });
            });
        });

        // Add click handler for the gallery open button
        const fullscreenBtn = document.getElementById('btn_fullscreen_');
        if (fullscreenBtn) {
            fullscreenBtn.addEventListener('click', function() {
                // Find all images in this specific gallery
                const images = galleryContainer.querySelectorAll('.fancybox');
                
                // Create an array of image URLs with captions
                const imageUrls = Array.from(images).map(img => ({
                    src: img.href,
                    caption: img.getAttribute('data-caption') || ''
                }));
                
                // Open Fancybox with the gallery
                Fancybox.show(imageUrls, {
                    groupAll: true,
                    startIndex: 0
                });
            });
        }
    })();
</script>
