<div>
    <div class="relative mx-auto sm:px-6 lg:px-8  text-gray-900 dark:text-white xl:max-w-[95%] 2xl:max-w-[90%]"
        wire:keydown.right.window="nextPage" wire:keydown.left.window="previousPage">
        <ol class="border-l border-neutral-300 dark:border-neutral-500">
            @foreach ($watchedGrouped as $day => $episodes)
                <li>
                    <div class="flex items-center pt-3 flex-start">
                        <div class="-ml-[5px] mr-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500">
                        </div>
                        <p class="text-sm text-neutral-500 dark:text-neutral-300">
                            {{ $episodes->first()->created_at->diffForHumans(['parts' => 1]) }}
                        </p>
                    </div>
                    <div class="flex justify-center">
                        <div class="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4">
                            @foreach ($episodes as $episode)
                                <div class="mt-2 mb-6 ml-4">
                                    <x-episode-cover :episode="$episode->episode" view="thumbnail" />
                                </div>
                            @endforeach
                        </div>
                    </div>
                </li>
            @endforeach
        </ol>
        {{ $watched->links('pagination::tailwind') }}
    </div>
</div>
