<p class="text-lg font-bold leading-normal text-neutral-800 dark:text-white">
    {{ __('home.latest-comments') }}
</p>

<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
    @foreach ($latestComments as $comment)
        @if ($comment->commentable_type == 'App\Models\Episode')
            @php $episode = cache()->rememberForever('commentEpisode'.$comment->commentable_id, fn () => App\Models\Episode::with('gallery')->where('id', $comment->commentable_id)->first()); @endphp
            <div id="comments" class="flex p-4 bg-white rounded-lg dark:bg-neutral-950">
                <div
                    class="w-[20vw] mr-5 p-1 md:p-2 mb-8 relative transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300">
                    <a class="hidden hover:text-blue-600 xl:block"
                        href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
                        <img alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="1000"
                            class="block object-cover object-center relative z-20 rounded-lg aspect-video"
                            src="{{ $episode->gallery->first()->thumbnail_url }}"></img>
                        <p
                            class="absolute right-2 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>
                        <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>

                    <a class="block hover:text-blue-600 xl:hidden"
                        href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
                        <img alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="1000"
                            class="block object-cover object-center relative z-20 rounded-lg"
                            src="{{ $episode->cover_url }}"></img>
                    </a>
                </div>
                <div class="w-[60vw]">
                    @include('partials.comment', ['comment' => $comment])
                </div>
            </div>
        @elseif($comment->commentable_type == 'App\Models\Hentai')
            @php $hentai = cache()->rememberForever('commentHentai'.$comment->commentable_id, fn () => App\Models\Hentai::with('gallery', 'episodes')->where('id', $comment->commentable_id)->first()); @endphp
            <div id="comments" class="flex p-4 bg-white rounded-lg dark:bg-neutral-950">
                <div
                    class="w-[20vw] mr-5 p-1 md:p-2 mb-8 relative transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300">
                    <a class="hover:text-blue-600" href="{{ route('hentai.index', ['title' => $hentai->slug]) }}">
                        <img alt="{{ $hentai->episodes->first()->title }}" loading="lazy" width="1000"
                            class="block object-cover object-center relative z-20 rounded-lg aspect-video"
                            src="{{ $hentai->gallery->first()->thumbnail_url }}"></img>
                        <p
                            class="absolute  right-2 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">
                            {{ $hentai->episodes->first()->getResolution() }}</p>
                        <div class="absolute  w-[95%] grid grid-cols-1 text-center">
                            <p class="text-sm text-center text-black dark:text-white">
                                {{ $hentai->episodes->first()->title }}</p>
                        </div>
                    </a>
                </div>
                <div class="w-[60vw]">
                    @include('partials.comment', ['comment' => $comment])
                </div>
            </div>
        @endif
    @endforeach
</div>
