@isset($playlist)
<div class="pt-2 sm:px-2 lg:px-4 2xl:w-[450px]">
    <div class="bg-transparent rounded-lg overflow-hidden bg-white dark:bg-neutral-800">
        <div class="p-4">
            <p class="leading-normal font-bold text-lg text-rose-600 pb-2">
                @if ($playlist->is_private)
                <a href="{{ route('profile.playlist.show', $playlist->id) }}">{{ $playlist->name }}</a>
                @else
                <a href="{{ route('playlist.show', $playlist->id) }}">{{ $playlist->name }}</a>
                @endif
            </p>
            @php
                $episodeCount = $playlistEpisodes->count();
                $currentIndex = 0;
                $nextEpisode = "";

                if ($episodeCount > 1) {
                    $currentIndex = $playlistEpisodes->search(fn($playlistEpisode) => $playlistEpisode->episode->id == $episode->id);
                    $nextEpisode = $currentIndex !== false && $currentIndex + 1 < $episodeCount 
                        ? $playlistEpisodes[$currentIndex + 1]->episode->slug 
                        : "";
                }
            @endphp
            <p class="text-neutral-800 dark:text-neutral-300">
                {{ $playlist->user->global_name ?? $playlist->user->username }} • {{ $currentIndex + 1 }}/{{ $episodeCount }} Episodes
            </p>
        </div>
        
        <!-- Table -->
        <div id="scrollable" class="flex-none min-w-full px-4 sm:px-6 md:px-0 overflow-auto scrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar:bg-transparent scrollbar-track:!bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300 scrollbar-track:!rounded dark:scrollbar-track:!bg-slate-500/[0.16] dark:scrollbar-thumb:!bg-slate-500/50 max-h-96 lg:supports-scrollbars:pr-2 lg:max-h-96">
            <div class="overflow-y-auto">
                <div class="space-y-2 p-0 pb-2 sm:p-2">
                    @php 
                        $counter = 1;
                        $isAuthedUsersPlaylist = false;
                        if (auth()->check() && $playlist->user->id == auth()->user()->id) {
                            $isAuthedUsersPlaylist = true;
                        }
                    @endphp
                    @foreach($playlistEpisodes as $playlistEpisode)
                    @if ($playlistEpisode->episode->id == $episode->id)
                    <div class="flex items-center gap-4 p-2 bg-rose-800/30 rounded-lg shadow swipe-container transition-colors" id="active">
                    @else
                    <div 
                        class="flex items-center gap-4 p-2 dark:bg-neutral-900/50 bg-white rounded-lg shadow transition-colors @if($isMobile && $isAuthedUsersPlaylist) swipe-container @endif" 
                        id="{{ $playlist->id }}-{{ $playlistEpisode->episode->id }}">
                    @endif
                        <div class="text-black dark:text-white">
                            @if ($playlistEpisode->episode->id == $episode->id)
                            <i class="fa-solid fa-play w-[15px]"></i>
                            @else
                            <p class="w-[15px]">{{ $counter }}</p>
                            @endif
                        </div>
                        <a href="{{ route('hentai.index', ['title' => $playlistEpisode->episode->slug, 'playlist' => $playlist->id ]) }}" class="contents">
                            <img loading="lazy" src="{{ $playlistEpisode->episode->gallery->first()->thumbnail_url }}" alt="{{ $playlistEpisode->episode->title }} - {{ $playlistEpisode->episode->episode }}" class="w-20 h-14 object-cover rounded">
                        </a>
                        <div class="grow">
                            <a href="{{ route('hentai.index', ['title' => $playlistEpisode->episode->slug, 'playlist' => $playlist->id ]) }}">
                                <p class="text-black dark:text-white font-medium text-sm break-words">{{ $playlistEpisode->episode->title }} - {{ $playlistEpisode->episode->episode }}</p>
                            </a>
                            <p class="text-gray-700 dark:text-gray-300 text-xs truncate">{{ $playlistEpisode->episode->viewCount() }} Views - {{ $playlistEpisode->episode->studio->name }}</p>
                        </div>
                        @if ($playlistEpisode->episode->id != $episode->id && $isAuthedUsersPlaylist)
                            @if($isMobile)
                            <div class="justify-self-end flex items-center">
                                <i class="transition-all fa-solid fa-grip-lines-vertical cursor-grab text-black dark:text-white" id="del-{{ $playlist->id }}-{{ $playlistEpisode->episode->id }}"></i>
                            </div>
                            @else
                            <div class="justify-self-end flex items-center">
                                <a class="transition-all fa-solid fa-trash cursor-pointer text-red-700/80" id="delD-{{ $playlist->id }}-{{ $playlistEpisode->episode->id }}"></a>
                            </div>
                            @endif
                        @endif
                    </div>
                    @php $counter++; @endphp
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
<input id="playlist_id" type="hidden" value="{{ $playlist->id }}">
<input id="playlist_next_episode_slug" type="hidden" value="{{ $nextEpisode }}">

<script>
// Select the scrollable div and the target child element
const scrollableDiv = document.getElementById('scrollable');
const targetElement = document.getElementById('active');

// Scroll to the target element
scrollableDiv.scrollTop = targetElement.offsetTop - scrollableDiv.offsetTop - 50;
</script>
@endisset