<div class="bg-transparent rounded-lg">
    <p class="leading-normal font-bold text-lg text-rose-600">
        {{ __('stream.gallery') }}
    </p>
    @if ($gallery->count() > 5)
        <div class="grid grid-rows-1 w-30 text-left">
            <ul data-te-lightbox-init class="list-none text-center" style="overflow: hidden;">
                @php $counter = 0; @endphp
                @foreach($gallery as $image)
                @php $counter++; @endphp
                <li class="inline-block m-1 w-[45%] sm:w-[45%] md:w-[20%] xl:w-[18%]">
                    @if ($counter > 5)
                    <div class="!visible hidden" id="collapseGallery" data-te-collapse-item>
                    @else
                    <div>
                    @endif
                        <div class="py-2 mt-2">
                            <img  onClick="(function(){player.play(); player.pause(); })();" src="{{ $image->thumbnail_url }}" data-te-img="{{ $image->image_url }}" alt="{{ $episode->title }} - {{ $episode->episode }} - Screenshot {{ $counter }}" class="relative block items-center h-full w-full rounded-lg tracking-widest transition ease-in-out duration-150 cursor-zoom-in shadow-sm data-[te-lightbox-disabled]:cursor-auto" />
                        </div>
                    </div>
                </li>
                @endforeach
            </ul>
        </div>
        <div class="grid grid-rows-1 w-30 text-center">
            <a id="galleryShowMore" data-te-collapse-init data-te-ripple-init data-te-ripple-color="light" href="#collapseGallery" role="button" aria-expanded="false" aria-controls="collapseGallery" class="text-sm float-right cursor-pointer text-rose-600">{{ __('home.show-more') }}</a>
        </div>
        <script>
        var state = 0;
        function toggleGallery() {
            if (state == 0) {
                document.getElementById('galleryShowMore').innerText = "{{ __('stream.show-less') }}";
                state = 1;
            }  else {
                document.getElementById('galleryShowMore').innerText = "{{ __('home.show-more') }}";
                state = 0;
            }
        }
        document.getElementById('galleryShowMore').addEventListener('click', toggleGallery);
        </script>
    @else
    <div class="grid grid-rows-1 w-30 text-left">
        <ul data-te-lightbox-init class="list-none text-center" style="overflow: hidden;">
            @php $counter = 0; @endphp
            @foreach($gallery as $image)
            @php $counter++; @endphp
            <li class="inline-block m-1 w-[45%] sm:w-[45%] md:w-[20%] xl:w-[18%]">
                <div class="py-2 mt-2">
                    <img  onClick="(function(){player.play(); player.pause(); })();" src="{{ $image->thumbnail_url }}" data-te-img="{{ $image->image_url }}" alt="{{ $episode->title }} - {{ $episode->episode }} - Screenshot {{ $counter }}" class="relative block items-center h-full w-full rounded-lg tracking-widest transition ease-in-out duration-150 cursor-zoom-in shadow-sm data-[te-lightbox-disabled]:cursor-auto" />
                </div>
            </li>
            @endforeach
        </ul>
    </div>
    @endif
</div>
