<li>
    <a class="flex flex-col w-auto text-black dark:text-white hover:text-white hover:bg-rose-900/80 rounded-lg cursor-pointer pt-1"
        href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
        <div class="flex items-center">
            <div class="relative w-full aspect-[16/9]">
                @auth
                    @if ($episode->userWatched(auth()->user()->id))
                        <p
                            class="absolute right-1 top-1 bg-green-600/80 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
                            {{ $episode->getResolution() }}</p>
                        <p
                            class="absolute left-1 bottom-1 bg-green-600/80 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
                            <i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
                                class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i
                                class="fa-regular fa-comment"></i> {{ $episode->commentCount() }}
                        </p>
                    @else
                        <p
                            class="absolute right-1 top-1 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
                            {{ $episode->getResolution() }}</p>
                        <p
                            class="absolute left-1 bottom-1 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
                            <i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
                                class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i
                                class="fa-regular fa-comment"></i> {{ $episode->commentCount() }}
                        </p>
                    @endif
                @endauth
                <img loading="lazy" class="block relative rounded-xl object-cover object-center z-20 p-1"
                    src="{{ optional($episode->gallery->first())->thumbnail_url }}"
                    alt="{{ $episode->title }} - {{ $episode->episode }}">
            </div>
        </div>
        <div class="basis-3/4 pl-2 text-center">
            <p class="text-sm font-bold">{{ $episode->title }} - {{ $episode->episode }}</p>
        </div>
    </a>
</li>
