hstream/resources/views/livewire/playlist-overview.blade.php

<div wire:keydown.right.window="nextPage" wire:keydown.left.window="previousPage"
    class="text-gray-900 dark:text-white">
    <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 flex-col items-center gap-6 rounded-2xl border border-neutral-200/70 bg-white p-6 shadow-sm sm:flex-row sm:items-center sm:gap-8 sm:p-8 dark:border-neutral-800 dark:bg-neutral-950">
            <img class="h-24 w-24 shrink-0 rounded-full shadow-lg ring-2 ring-rose-500/20"
                src="{{ $playlist->user->getAvatar() }}">

            <div class="flex min-w-0 flex-1 flex-col text-center sm:text-left">
                @if ($editingName)
                    <div class="flex flex-wrap items-center justify-center gap-2 mb-1 sm:justify-start">
                        <input
                            type="text"
                            wire:model="editingPlaylistName"
                            maxlength="30"
                            class="rounded-lg border border-neutral-300 bg-white px-3 py-1.5 text-xl font-bold text-neutral-900 focus:border-rose-500 focus:outline-none focus:ring-1 focus:ring-rose-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white"
                        />
                        <button wire:click="updateName" class="rounded-lg bg-rose-600 px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-rose-700">
                            Save
                        </button>
                        <button wire:click="cancelEditName" class="rounded-lg border border-neutral-300 px-3 py-1.5 text-sm text-neutral-600 transition hover:bg-neutral-100 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800">
                            Cancel
                        </button>
                    </div>
                    @error('editingPlaylistName')
                        <p class="text-rose-500 text-sm mb-1">{{ $message }}</p>
                    @enderror
                @else
                    <h1 class="flex items-center justify-center gap-1 text-3xl font-bold text-neutral-900 sm:justify-start dark:text-white">
                        <span class="truncate">{{ $playlist->name }}</span>
                        @auth
                            @if (Auth::id() === $playlist->user->id)
                                <button wire:click="editName" class="ml-1 text-xl text-neutral-400 transition hover:text-rose-500" title="Edit playlist name">
                                    <i class="fa-solid fa-pen-to-square"></i>
                                </button>
                            @endif
                        @endauth
                    </h1>
                @endif
                <p class="mt-1 text-lg font-light text-neutral-500 dark:text-neutral-300">{{ __('playlist.episodes') }}: {{ $playlist->episodes_count }}</p>
                <p class="mt-0.5 text-lg font-light text-neutral-500 dark:text-neutral-300">
                    Creator: {{ $playlist->user->name }}
                    @auth
                        @if (Auth::id() === $playlist->user->id)
                            <span class="ml-3">
                                <button wire:click="toggleVisibility" class="cursor-pointer rounded-full px-3 py-0.5 text-xs font-semibold transition {{ $playlist->is_private ? 'bg-neutral-200 text-neutral-700 hover:bg-neutral-300 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-600' : 'bg-green-600 text-white hover:bg-green-500' }}">
                                    <i class="fa-solid {{ $playlist->is_private ? 'fa-lock' : 'fa-earth-americas' }} mr-1"></i>
                                    {{ $playlist->is_private ? 'Private' : 'Public' }}
                                </button>
                            </span>
                        @else
                            <span class="ml-3 rounded-full px-3 py-0.5 text-xs font-semibold {{ $playlist->is_private ? 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200' : 'bg-green-600 text-white' }}">
                                <i class="fa-solid {{ $playlist->is_private ? 'fa-lock' : 'fa-earth-americas' }} mr-1"></i>
                                {{ $playlist->is_private ? 'Private' : 'Public' }}
                            </span>
                        @endif
                    @endauth
                </p>
            </div>

            <div class="shrink-0">
                @if ($firstEpisode)
                    <a href="{{ route('hentai.index', ['title' => $firstEpisode->slug, 'playlist' => $playlist->id]) }}"
                        class="inline-flex items-center gap-2 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">
                        <i class="fa-solid fa-play text-xs"></i> {{ __('playlist.play') }}
                    </a>
                @else
                    <a class="inline-flex cursor-not-allowed items-center gap-2 text-neutral-500 bg-neutral-200 font-medium rounded-lg text-sm px-4 py-2 dark:text-neutral-300 dark:bg-neutral-700">
                        <i class="fa-solid fa-play text-xs"></i> {{ __('playlist.play') }}
                    </a>
                @endif
            </div>
        </div>

        <!-- Toolbar -->
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
            <div class="relative flex-1">
                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                    <svg class="h-5 w-5 text-neutral-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                    </svg>
                </div>

                <input
                    wire:model.live.debounce.500ms="search"
                    type="search"
                    placeholder="{{ __('playlist.search-episodes') }}"
                    class="w-full rounded-xl border border-neutral-300 bg-white py-2.5 pl-12 pr-12 text-sm text-neutral-900 shadow-sm transition focus:border-rose-500 focus:outline-none focus:ring-4 focus:ring-rose-500/20 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white dark:placeholder-neutral-500"
                />

                <div wire:loading.class="opacity-100" class="opacity-0">
                    <div class="absolute inset-y-0 right-3 flex items-center">
                        <svg class="h-5 w-5 animate-spin text-rose-500" viewBox="0 0 24 24" fill="none">
                            <circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-90" fill="currentColor"
                                d="M22 12a10 10 0 0 1-10 10V18a6 6 0 0 0 6-6h4Z">
                            </path>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="flex shrink-0 items-center gap-2">
                <label for="playlistPerPage" class="text-sm text-neutral-500 dark:text-neutral-400">
                    {{ __('playlist.per-page') }}
                </label>
                <select
                    wire:model.live="perPage"
                    id="playlistPerPage"
                    class="rounded-xl border border-neutral-300 bg-white py-2.5 pl-3 pr-8 text-sm text-neutral-900 shadow-sm transition focus:border-rose-500 focus:outline-none focus:ring-4 focus:ring-rose-500/20 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white"
                >
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>
        </div>

        <!-- List -->
        <div class="space-y-2">
            @forelse($episodes as $playlistEpisode)
                @include('livewire.partials.playlist-episode-row', ['playlistEpisode' => $playlistEpisode, 'isOwner' => $isOwner])
            @empty
                <div
                    class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-12 text-center">
                    <div class="inline-flex h-20 w-20 items-center justify-center rounded-full bg-gray-100 dark:bg-neutral-800 mb-4">
                        <i class="fa-solid fa-clapperboard text-3xl text-gray-400 dark:text-gray-500"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">
                        {{ $search !== '' ? __('playlist.no-matches') : __('playlist.empty-playlist') }}
                    </h3>
                </div>
            @endforelse
        </div>

        <!-- Pagination -->
        @if ($episodes->hasPages())
            <div class="mt-6">{{ $episodes->links('pagination::tailwind') }}</div>
        @endif
    </div>
</div>