<div>
    <div
        class="relative pt-5 mx-auto sm:px-6 lg:px-8 space-y-6 text-gray-900 dark:text-white xl:max-w-[95%] 2xl:max-w-[90%]">

        <!-- Header -->
        <div class="flex text-sm font-light bg-neutral-950/50 backdrop-blur-lg rounded-lg p-10 gap-2">
            <a href="{{ route('user.index', ['username' => $playlist->user->username]) }}">
                @if ($playlist->user->avatar)
                    <img class="relative w-24 h-24 flex-none rounded-full shadow-lg"
                        src="https://external-content.duckduckgo.com/iu/?u=https://cdn.discordapp.com/avatars/{{ $playlist->user->id }}/{{ $playlist->user->avatar }}.webp">
                @else
                    <img class="relative w-24 h-24 flex-none rounded-full shadow-lg" src="/images/default-avatar.webp">
                @endif
            </a>
            <div class="flex flex-col justify-center flex-1 pl-4">
                <h1 class="font-bold text-3xl">{{ $playlist->name }}</h1>
                <p class="font-light text-lg text-neutral-200">Episodes: {{ count($playlistEpisodes) }}</p>
                <p class="font-light text-lg text-neutral-200">Creator: <a
                        href="{{ route('user.index', ['username' => $playlist->user->username]) }}">{{ $playlist->user->username }}</a>
                </p>
            </div>
            <div class="flex flex-col justify-center pl-4">
                <div class="flex justify-end">
                    <a href="{{ route('hentai.index', ['title' => $playlistEpisodes->first()->episode->slug, 'playlist' => $playlist->id]) }}"
                        class="cursor-pointer float-right text-white bg-rose-700 hover:bg-rose-800 focus:ring-4 focus:outline-none focus:ring-rose-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-rose-600 dark:hover:bg-rose-700 dark:focus:ring-rose-800">{{ __('playlist.play') }}</a>
                </div>
            </div>
        </div>

        @forelse($playlistEpisodes as $playlistEpisode)
            @php $episode = $playlistEpisode->episode; @endphp
            <div wire:key="playlist-episode-{{ $playlistEpisode->id }}"
                class="flex justify-between items-center rounded-lg hover:bg-black border border-neutral-950 bg-neutral-950/50 backdrop-blur-lg transition !mt-1 gap-2">
                <div class="flex pl-5 pr-5 w-10">
                    {{ $playlistEpisode->position }}
                </div>
                <div class="flex-[2] hidden md:block">
                    <div class="relative p-1 w-full md:p-2">
                        <a 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 }}">

                            @guest
                                <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 collapse md:visible">
                                    <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

                            @auth
                                @if ($episode->userWatched(auth()->user()->id))
                                    <p
                                        class="absolute left-2 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 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>
                                @endif
                            @endauth
                        </a>
                    </div>
                </div>
                <div class="flex-[5]">
                    <a href="{{ route('hentai.index', ['title' => $episode->slug]) }}"
                        class="font-bold">{{ $episode->title }} - {{ $episode->episode }}</a>
                    <br>
                    <a href="{{ route('hentai.index', ['title' => $episode->slug]) }}">{{ $episode->title_jpn }}</a>
                </div>
                <div class="pr-5">
                    @auth
                        @if (Auth::user()->id === $playlist->user->id)
                            <button class="pr-2" wire:click="moveUp({{ $playlistEpisode->id }})"><i
                                    class="fa-solid fa-arrow-up"></i></button>
                            <button class="pr-2" wire:click="moveDown({{ $playlistEpisode->id }})"><i
                                    class="fa-solid fa-arrow-down"></i></button>
                            <button wire:click="remove({{ $playlistEpisode->id }})" class="text-red-500"><i
                                    class="fa-solid fa-trash"></i></button>
                        @endif
                    @endauth
                </div>
            </div>
        @empty
            <div class="pt-6 text-2xl text-center">
                No results (╥﹏╥)
            </div>
        @endforelse
    </div>
</div>
