<div
    data-te-modal-init
    id="modalBlacklist"
    tabindex="-1"
    aria-labelledby="modalBlacklistLabel"
    aria-modal="true"
    role="dialog"
    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
>
    <div
        data-te-modal-dialog-ref
        class="flex min-h-screen items-center justify-center p-4"
    >
        <div
            class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900"
        >
            <!-- Header -->
            <div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
                <div>
                    <h2
                        id="modalGenresLabel"
                        class="text-xl font-semibold text-neutral-900 dark:text-white"
                    >
                        Genres & Filters
                    </h2>

                    <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
                        Select tags to blacklist from your content.
                    </p>
                </div>

                <button
                    type="button"
                    data-te-modal-dismiss
                    wire:click="revertFilters"
                    class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
                >
                    ✕
                </button>
            </div>

            <!-- Body -->
            <form class="max-h-[75vh] overflow-y-auto">
                <div class="space-y-8 p-6">
                    @foreach (\App\Helpers\FilterCategories::getFilterCategories() as $section => $items)
                        <section>
                            <div class="mb-4 flex items-center justify-between">
                                <h3 class="text-lg font-semibold text-neutral-800 dark:text-white">
                                    {{ $section }}
                                </h3>

                                <div class="h-px flex-1 bg-neutral-200 ml-4 dark:bg-neutral-700"></div>
                            </div>

                            <div class="flex flex-wrap gap-3">
                                @foreach ($items as $tag)
                                    @php
                                        $slug = Str::slug($tag);
                                    @endphp

                                    <div>
                                        <input
                                            wire:model="blacklist"
                                            type="checkbox"
                                            id="blacklist-{{ $slug }}"
                                            name="blacklist[]"
                                            value="{{ $slug }}"
                                            class="peer hidden"
                                        >

                                        <label
                                            for="blacklist-{{ $slug }}"
                                            class="inline-flex cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 transition-all duration-200 hover:border-rose-400 hover:bg-rose-50 hover:text-rose-600 peer-checked:border-rose-600 peer-checked:bg-rose-600 peer-checked:text-white dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-rose-500 dark:hover:bg-neutral-700"
                                        >
                                            {{ $tag }}
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </section>
                    @endforeach
                </div>

                <!-- Footer -->
                <div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
                    <button
                        type="button"
                        data-te-modal-dismiss
                        wire:click="revertFilters"
                        class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
                    >
                        Cancel
                    </button>

                    <button
                        type="button"
                        data-te-modal-dismiss
                        wire:click="applyFilters"
                        class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
                    >
                        Apply Filters
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
