<div class="space-y-5">
    {{-- Filters --}}
    <div class="rounded-2xl border border-neutral-200/70 bg-white/80 p-4 shadow-sm backdrop-blur-xl dark:border-neutral-800/70 dark:bg-neutral-950/70">
        <div class="flex flex-col sm:flex-row gap-3">
            {{-- Search --}}
            <div class="relative flex-1">
                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                    <svg class="w-4 h-4 text-gray-400 dark:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
                    </svg>
                </div>
                <input
                    wire:model.live.debounce.500ms="commentSearch"
                    type="search"
                    placeholder="Search comments..."
                    class="w-full pl-10 pr-4 py-2.5 rounded-xl border-neutral-300 dark:text-neutral-300 bg-white dark:bg-neutral-900 dark:border-neutral-700 focus:outline-none focus:ring-2 focus:ring-rose-600 focus:border-rose-700 transition"
                >
            </div>

            {{-- Order --}}
            <div class="relative">
                <i class="fa-solid fa-sort pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
                <select
                    wire:model.live="order"
                    class="appearance-none pl-10 pr-8 py-2.5 rounded-xl border-neutral-300 dark:text-gray-300 bg-white dark:bg-neutral-900 dark:border-neutral-700 min-w-[128px]"
                >
                    <option value="created_at_desc">Newest</option>
                    <option value="created_at_asc">Oldest</option>
                </select>
            </div>
        </div>
    </div>

    {{-- Comments --}}
    <div class="space-y-3">
        @forelse ($comments as $comment)

            @php
                $model = $comment->commentable;
                $episode = $model instanceof \App\Models\Episode
                    ? $model
                    : $model->episodes->first();

                $url = route('hentai.index', ['title' => $model->slug]);
            @endphp

            <a href="{{ $url }}#comment-{{ $comment->id }}"
               wire:key="comment-{{ $comment->id }}"
               class="block group">

                <div class="rounded-xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 hover:shadow-md hover:ring-rose-300/50 dark:hover:ring-rose-700/30 transition-all duration-200 overflow-hidden">

                    <div class="flex flex-col sm:flex-row">

                        {{-- Thumbnail --}}
                        <div class="sm:w-44 shrink-0">
                            <img
                                src="{{ $episode->gallery->first()->thumbnail_url }}"
                                alt="{{ $episode->title ?? '' }}"
                                class="w-full h-36 sm:h-full object-cover"
                                loading="lazy"
                            >
                        </div>

                        {{-- Content --}}
                        <div class="flex-1 p-4 flex flex-col justify-between min-w-0">

                            {{-- Episode Title --}}
                            <p class="text-xs font-medium text-rose-600 dark:text-rose-400 truncate mb-1">
                                {{ $episode->title ?? 'Episode' }}
                            </p>

                            {{-- Comment --}}
                            <div class="text-sm text-gray-700 dark:text-gray-300 line-clamp-2 leading-relaxed">
                                {!! $comment->presenter()->markdownBody() !!}
                            </div>

                            {{-- Meta --}}
                            <div class="flex items-center justify-between mt-2.5 text-xs text-gray-500 dark:text-gray-400">
                                <span class="flex items-center gap-1">
                                    <i class="fa-solid fa-clock text-[10px]"></i>
                                    {{ $comment->presenter()->relativeCreatedAt() }}
                                </span>
                                <span class="text-rose-600 dark:text-rose-400 font-medium group-hover:underline">
                                    View comment
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        @empty
            <div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-12 text-center">
                <div class="inline-flex h-20 w-20 items-center justify-center rounded-full bg-gray-100 dark:bg-neutral-800 mb-4">
                    <i class="fa-solid fa-comment-slash text-3xl text-gray-400 dark:text-gray-500"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">No comments found</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">You haven't commented on anything yet.</p>
            </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    <div>
        {{ $comments->links('pagination::tailwind') }}
    </div>

</div>
