<div>
    <div class="mx-auto max-w-5xl px-4 space-y-6">

        <!-- Filters -->
        <div class="p-4 bg-white/40 dark:bg-neutral-950/40 backdrop-blur rounded-xl shadow flex flex-col sm:flex-row gap-3">

            <!-- Search -->
            <div class="relative flex-1">
                <input
                    wire:model.live.debounce.500ms="commentSearch"
                    type="search"
                    placeholder="Search comments..."
                    class="w-full pl-10 pr-4 py-3 rounded-lg border-neutral-300 dark:text-neutral-300 bg-white/80 dark:bg-neutral-900/50 dark:border-neutral-700 focus:outline-none focus:ring-2 focus:ring-rose-600 focus:border-rose-700 transition"
                >
                <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
                    <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>
            </div>

            <!-- Order -->
            <select
                wire:model.live="order"
                class="px-4 py-3 rounded-lg border-neutral-300 dark:text-gray-300 bg-white/80 dark:bg-neutral-900/50 dark:border-neutral-700 min-w-[128px]"
            >
                <option value="created_at_desc">Newest</option>
                <option value="created_at_asc">Oldest</option>
            </select>
        </div>

        <!-- Comments -->
        <div class="space-y-4">
            @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="bg-white/40 dark:bg-neutral-950/40 backdrop-blur rounded-xl shadow hover:shadow-lg transition overflow-hidden">

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

                            <!-- Thumbnail -->
                            <div class="sm:w-48 shrink-0">
                                <img
                                    src="{{ $episode->gallery->first()->thumbnail_url }}"
                                    alt=""
                                    class="w-full h-40 sm:h-full object-cover"
                                >
                            </div>

                            <!-- Content -->
                            <div class="flex-1 p-4 flex flex-col justify-between">

                                <!-- Comment -->
                                <div class="text-gray-800 dark:text-gray-200 text-sm line-clamp-3">
                                    {!! $comment->presenter()->markdownBody() !!}
                                </div>

                                <!-- Meta -->
                                <div class="flex items-center justify-between mt-3 text-xs text-gray-700 dark:text-gray-400">

                                    <span>
                                        {{ $comment->presenter()->relativeCreatedAt() }}
                                    </span>

                                    <span class="text-rose-600 font-medium group-hover:underline">
                                        View comment
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            @empty
                <div class="flex bg-white/40 dark:bg-neutral-950/40 backdrop-blur rounded-xl shadow hover:shadow-lg transition overflow-hidden">
                    <div class="text-gray-800 dark:text-gray-200 text-center w-full p-4">
                        <p class="text-lg">No results</p>
                        <p class="text-sm opacity-70">(╥﹏╥)</p>
                    </div>
                </div>
            @endforelse
        </div>

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

    </div>
</div>
