@php $limitcounter = 0; @endphp

@foreach ($episodes as $ep)
    @if (isset($popularView))
        @php $episode = $ep->episode @endphp
    @else
        @php $episode = $ep @endphp
    @endif

    @if ($limitcounter >= $limit)
        @break
    @endif

    <div
        class="relative p-1 mb-8 w-full transition duration-300 ease-in-out md:p-2 md:hover:-translate-y-1 md:hover:scale-110">
        <a class="hover:text-blue-600" href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
            <img alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="400"
                class="block relative rounded-lg object-cover object-center aspect-[11/16] z-20 "
                src="{{ $episode->cover_url }}"></img>

            @guest
                <p
                    class="absolute right-1 md:right-2 top-1 md:top-2 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 md:left-2 bottom-1 md:bottom-2 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>
            @endguest

            @php $problematic = cache()->rememberForever('episodeProblematic'.$episode->id, fn () => $episode->getProblematicTags()); @endphp
            @if (!empty($problematic))
                <p
                    class="absolute left-1 md:left-2 top-1 md:top-2 bg-red-700/70 !text-white rounded-br-lg rounded-tl-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
                    <i class="fa-solid fa-triangle-exclamation"></i> {{ $problematic }}
                </p>
            @endif

            @auth
                @if ($episode->userWatched(auth()->user()->id))
                    <p
                        class="absolute right-1 md:right-2 top-1 md:top-2 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 md:left-2 bottom-1 md:bottom-2 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 md:right-2 top-1 md:top-2 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 md:left-2 bottom-1 md:bottom-2 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

            <div class="absolute  w-[95%] grid grid-cols-1 text-center">
                <p class="text-sm text-center text-black dark:text-white">{{ $episode->title }} -
                    {{ $episode->episode }}</p>
            </div>
        </a>
    </div>

    @php $limitcounter++; @endphp
@endforeach