<div>

    <div class="mb-5 flex items-center justify-between">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white">
            {{ __('stream.gallery') }}
        </h2>

        @if ($gallery->count() > 5)
            <button
                id="galleryToggle"
                class="text-sm font-semibold text-gray-900 dark:text-white transition">
                {{ __('home.show-more') }}
            </button>
        @endif
    </div>

    <div
        data-te-lightbox-init
        class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">

        @foreach($gallery as $index => $image)

            <div class="{{ $index >= 5 ? 'hidden extra-gallery-item' : '' }}">

                <div
                    class="group overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-xl dark:border-neutral-700 dark:bg-neutral-800">

                    <img
                        onClick="(function(){player.play(); player.pause(); })();"
                        src="{{ $image->thumbnail_url }}"
                        data-te-img="{{ $image->image_url }}"
                        alt="{{ $episode->title }} - Screenshot {{ $index + 1 }}"
                        class="aspect-video w-full cursor-zoom-in object-cover transition duration-300 group-hover:scale-105"
                    >

                </div>

            </div>

        @endforeach

    </div>

</div>

@if ($gallery->count() > 5)
<script>
    const toggleBtn = document.getElementById('galleryToggle');
    const hiddenItems = document.querySelectorAll('.extra-gallery-item');

    let expanded = false;

    toggleBtn.addEventListener('click', () => {

        expanded = !expanded;

        hiddenItems.forEach(item => {
            item.classList.toggle('hidden');
        });

        toggleBtn.innerText = expanded
            ? "{{ __('stream.show-less') }}"
            : "{{ __('home.show-more') }}";
    });
</script>
@endif