<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
@include('partials.head')

<body class="font-sans antialiased">
    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
        @include('layouts.navigation')
        <!-- Page Content -->
        <main>
            @include('user.partials.background')
            <div
                class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-20 mt-[65px] flex flex-row justify-center xl:justify-normal">
                <div class="flex flex-col xl:flex-row">
                    @include('profile.partials.sidebar')
                    <div class="pb-2  space-y-6 max-w-7xl px-0 md:px-6 lg:px-8 pt-8 xl:pt-0">

                        @php
                            $episode_ids = array_unique(
                                DB::table('comments')
                                    ->where('commenter_id', $user->id)
                                    ->get()
                                    ->pluck('commentable_id')
                                    ->toArray(),
                            );
                        @endphp

                        @foreach ($episode_ids as $episode_id)
                            @php $episode = App\Models\Episode::where('id', $episode_id)->first(); @endphp
                            <div
                                class="flex flex-col 2xl:flex-row p-5 bg-white/40 dark:bg-neutral-950/40 backdrop-blur rounded-lg items-center">
                                <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 md: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>
                                        <p
                                            class="absolute left-2 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>
                                        <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 md: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>
                                        <div class="relative 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>
                                <div class="md:w-[60vw]">
                                    @comments(['model' => $episode])
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </main>
        @include('layouts.footer')
    </div>
</body>

</html>
