@props(['imagens', 'titulo'])
<div class="px-14 pt-16 pb-20 z-10 relative bg-white max-md:pt-4 max-md:px-10">
    <div class="pb-7 border-b border-[#003CA5] mb-8 max-md:pb-0 max-md:mb-3">
        <h2>
                        <span
                            class="block tracking-33 uppercase text-xs mb-1 text-[#003CA5] max-md:mb-0">{{ __('messages._pagina_downloads.imagens') }}</span>
            <span class="block text-3xl font-bold font-bricolage text-[#003CA5] ">{{ $titulo }}</span>
        </h2>
    </div>

    @php
        $show_n = 8;
        $show = min($imagens->count(), $show_n);
    @endphp
    <div x-data="{ show: {{ $show }} }">
        <div
            class="text-sm text-[#003CA5] mb-4"
            x-text="$el.textContent.replace(/\d+/, show)"
        >{{ __('messages._pagina_downloads.mostrando', ['count' => min($imagens->count(), 20), 'total' => $imagens->count()]) }} </div>
        <ul class="grid items-stretch grid-cols-4 gap-x-5 gap-y-9 mb-11 max-xl:grid-cols-3 max-md:grid-cols-2 max-md:mb-8">
            @foreach($imagens as $img)
                <li :class="{
                                    'flex': {{ $loop->index }} < show,
                                    'hidden': {{ $loop->index }} >= show,
                                }"
                    class="{{ $loop->index < $show ? 'flex' : 'hidden' }} flex-col justify-stretch relative py-6 rounded-[16px] border border-[#003CA566] max-md:py-4">
                    <label class="absolute left-4 top-6 w-9 h-9 rounded-[8px] border border-[#003CA566] z-10
                        max-md:w-6 max-md:h-6 max-md:top-4 overflow-hidden cursor-pointer select-none">
                        <input x-model="checkedItems" class="hidden peer" type="checkbox"
                               value="{{ asset('/storage/' . $img['imagem']) }};{{ $img['slug'] }}">
                        <span
                            class="block w-full h-full flex items-center justify-center peer-checked:bg-darkslateblue-100">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                             viewBox="0 0 24 24">
                                            <path fill="white"
                                                  d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"/>
                                        </svg>
                                    </span>
                    </label>

                    <div class="border-b border-[#003CA566] px-4 pt-9 pb-6 flex justify-center">
                        <img class="h-28 w-auto object-contain object-center md:h-56"
                             src="{{ asset('/storage/' . $img['imagem']) }}"
                             alt="{{ $img['nome_do_produto'] }}">
                    </div>

                    <div class="flex flex-col justify-between h-full px-4 mt-7 max-md:mt-3 max-md:px-3">
                        <h3 class="font-semibold text-base text-[#003CA5] mb-9 max-md:text-sm max-md:mb-4">
                            {{ $img['nome_do_produto'] }}</h3>

                        <div class="flex justify-between items-center">
                            <a download="{{ $img['nome_do_produto'] }}"
                               href="{{ asset('/storage/' . $img['imagem']) }}"
                               class="w-10 h-10 rounded-full bg-midnightblue-100 flex justify-center items-center shrink-0">
                                <img src="{{ asset('images/download-icon.svg') }}"
                                     class="w-5 h-5 block"
                                     alt="Download">
                            </a>
                            <div
                                class="px-6 py-3 rounded-full bg-[#99999924] hover:cursor-pointer max-md:py-[10px] max-md:px-[34px] max-[428px]:px-3">
                                <a href="{{ asset('/storage/' . $img['imagem']) }}" target="_blank"
                                   class="font-bold text-base text-[#003CA5] max-md:text-sm">
                                                    <span
                                                        class="hidden lg:inline">{{ __('messages._pagina_downloads.ver_imagem') }}</span>
                                    <span
                                        class="lg:hidden">{{ __('messages._pagina_downloads.ver') }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
            @endforeach
        </ul>
        <div class="text-center flex flex-col items-center gap-8">
            @if($imagens->count() > $show)
                <button
                    x-show="show < {{ $imagens->count() }}"
                    @click="show = Math.min({{ $show_n }} + show, {{ $imagens->count() }})"
                    class="border-midnightblue-100 text-midnightblue-100 border-2 inline-flex rounded-full mx-auto w-fit px-7 py-3 hover:cursor-pointer font-bold text-sm">
                    {{ __('messages._pagina_downloads.ver_mais') }}
                </button>
            @endif
            <button
                :disabled="loadingSelected || checkedItems.length === 0"
                @click="downloadSelected()"
                class="inline-flex rounded-full mx-auto w-fit px-7 py-4 bg-[#003CA5] shadow-lg disabled:opacity-60">
                            <span class="font-bold text-xl text-white hidden md:inline">
                                {{ __('messages._pagina_downloads.baixar_imagens_selecionadas') }}
                            </span>
                <span class="font-bold text-xl text-white text-base md:hidden">
                                {{ __('messages._pagina_downloads.baixar_selecionadas') }}
                            </span>
            </button>
        </div>
    </div>
</div>
@pushonce('scripts')
    <script src="/js/jszip/jszip.min.js"></script>
@endpushonce