<!--Verically centered modal-->
<div data-te-modal-init
    class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
    id="modalBlacklist" tabindex="-1" aria-labelledby="modalBlacklist" aria-modal="true" role="dialog">
    <div data-te-modal-dialog-ref
        class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%]  2xl:min-[576px]:max-w-[60%]">
        <div
            class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
            <x-modal-header :title="__('Blacklist')" />

            <!--Modal body-->
            <div class="relative p-4">
                @php
                    $taglist = \cache()->remember(
                        'searchtags',
                        300,
                        fn() => Conner\Tagging\Model\Tag::where('count', '>', 0)->orderBy('slug', 'ASC')->get(),
                    );
                    $appearances = [
                        'Loli',
                        'Shota',
                        'Milf',
                        'Futanari',
                        'Big Boobs',
                        'Small Boobs',
                        'Dark Skin',
                        'Cosplay',
                        'Elf',
                        'Maid',
                        'Nekomimi',
                        'Nurse',
                        'School Girl',
                        'Succubus',
                        'Teacher',
                        'Trap',
                        'Pregnant',
                        'Glasses',
                        'Swim Suit',
                        'Ugly Bastard',
                        'Monster',
                    ];
                    $types = [
                        '3D',
                        '4K',
                        '48Fps',
                        '4K 48Fps',
                        'Censored',
                        'Uncensored',
                        'Comedy',
                        'Fantasy',
                        'Horror',
                        'Vanilla',
                        'Ntr',
                        'Pov',
                        'Filmed',
                        'X-Ray',
                    ];
                    $actions = [
                        'Anal',
                        'Bdsm',
                        'Facial',
                        'Blow Job',
                        'Boob Job',
                        'Foot Job',
                        'Hand Job',
                        'Rimjob',
                        'Inflation',
                        'Masturbation',
                        'Public Sex',
                        'Rape',
                        'Reverse Rape',
                        'Threesome',
                        'Orgy',
                        'Gangbang',
                    ];
                @endphp

                <ul class="list-none text-justify" style="overflow: hidden;">
                    @foreach ($taglist as $tag)
                        @if (in_array($tag->name, $types) || in_array($tag->name, $appearances) || in_array($tag->name, $actions))
                            @continue
                        @endif
                        <li class="inline-block m-1">
                            <input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
                                id="blacklist-{{ $tag->slug }}" name="blacklist[]" value="{{ $tag->slug }}">
                            <label
                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
                                for="blacklist-{{ $tag->slug }}">{{ $tag->name }}</label>
                        </li>
                    @endforeach
                </ul>

                <br>
                <!-- Actions -->
                <p class="font-medium leading-normal text-neutral-800 dark:text-white">
                    Action
                </p>
                <ul class="list-none text-justify" style="overflow: hidden;">
                    @foreach ($actions as $tag)
                        <li class="inline-block m-1">
                            @php $slug = Illuminate\Support\Str::slug($tag); @endphp
                            <input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
                                id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
                            <label
                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
                                for="blacklist-{{ $slug }}">{{ $tag }}</label>
                        </li>
                    @endforeach
                </ul>

                <br>
                <!-- Character Appearance -->
                <p class="font-medium leading-normal text-neutral-800 dark:text-white">
                    Appearance
                </p>
                <ul class="list-none text-justify" style="overflow: hidden;">
                    @foreach ($appearances as $tag)
                        @guest
                            @php if ($tag === "Loli" || $tag === "Shota") continue; @endphp
                        @endguest
                        <li class="inline-block m-1">
                            @php $slug = Illuminate\Support\Str::slug($tag); @endphp
                            <input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
                                id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
                            <label
                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
                                for="blacklist-{{ $slug }}">{{ $tag }}</label>
                        </li>
                    @endforeach
                </ul>

                <br>

                <!-- Video Types -->
                <p class="font-medium leading-normal text-neutral-800 dark:text-white">
                    Type
                </p>
                <ul class="list-none text-justify" style="overflow: hidden;">
                    @foreach ($types as $tag)
                        <li class="inline-block m-1">
                            @php $slug = Illuminate\Support\Str::slug($tag); @endphp
                            <input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
                                id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
                            <label
                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
                                for="blacklist-{{ $slug }}">{{ $tag }}</label>
                        </li>
                    @endforeach
                </ul>
            </div>

            <!--Modal footer-->
            <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
                <button data-te-modal-dismiss wire:click="revertFilters" type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
                    Close
                </button>
                <button data-te-modal-dismiss wire:click="applyFilters" type="button"
                    class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
                    Apply
                </button>
            </div>
        </div>
    </div>
</div>
