@props([
    'playlistEpisode',
    'isOwner' => false,
])

@php
    $episode = $playlistEpisode->episode;
@endphp

<div wire:key="playlist-episode-{{ $playlistEpisode->id }}"
    class="group flex items-center gap-3 sm:gap-4 rounded-xl border border-neutral-200/70 bg-white p-2.5 sm:p-3 shadow-sm transition hover:border-rose-400/40 hover:bg-rose-50 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-900">
    <div
        class="h-8 w-8 shrink-0 rounded-full bg-neutral-100 text-sm font-bold text-neutral-500 flex items-center justify-center dark:bg-neutral-800 dark:text-neutral-400">
        {{ $playlistEpisode->position }}
    </div>

    <a href="{{ route('hentai.index', ['title' => $episode->slug]) }}" class="shrink-0">
        <img src="{{ $episode->gallery->first()?->thumbnail_url }}"
            alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="160"
            class="aspect-video w-24 sm:w-36 rounded-lg object-cover transition-transform duration-300 group-hover:scale-105">
    </a>

    <div class="min-w-0 flex-1">
        <a href="{{ route('hentai.index', ['title' => $episode->slug]) }}"
            class="block truncate font-bold text-neutral-900 transition hover:text-rose-500 dark:text-white dark:hover:text-rose-400">
            {{ $episode->title }} - {{ $episode->episode }}
        </a>

        @if ($episode->title_jpn)
            <p class="truncate text-sm text-neutral-500 dark:text-neutral-400">{{ $episode->title_jpn }}</p>
        @endif

        <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px] font-semibold">
            <span class="rounded-full bg-black/70 px-2 py-0.5 text-white ring-1 ring-white/10 dark:bg-neutral-700">
                {{ $episode->getResolution() }}
            </span>
            <span class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400">
                <i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }}
            </span>
            <span class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400">
                <i class="fa-regular fa-heart"></i> {{ $episode->likeCount() }}
            </span>
            <span class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400">
                <i class="fa-regular fa-comment"></i> {{ $episode->commentCount() }}
            </span>
            @auth
                @if ($episode->userWatched(auth()->id()))
                    <span
                        class="flex items-center gap-1 rounded-full bg-emerald-800/40 px-2 py-0.5 text-emerald-300 ring-1 ring-emerald-500/30">
                        <i class="fa-solid fa-eye"></i> {{ __('playlist.watched') }}
                    </span>
                @endif
            @endauth
        </div>
    </div>

    @if ($isOwner)
        <div class="flex shrink-0 items-center gap-1">
            <button type="button" wire:click="moveUp({{ $playlistEpisode->id }})"
                class="h-8 w-8 rounded-lg text-neutral-500 transition hover:bg-neutral-100 hover:text-rose-500 dark:text-neutral-400 dark:hover:bg-neutral-800">
                <i class="fa-solid fa-arrow-up"></i>
            </button>
            <button type="button" wire:click="moveDown({{ $playlistEpisode->id }})"
                class="h-8 w-8 rounded-lg text-neutral-500 transition hover:bg-neutral-100 hover:text-rose-500 dark:text-neutral-400 dark:hover:bg-neutral-800">
                <i class="fa-solid fa-arrow-down"></i>
            </button>
            <button type="button" wire:click="remove({{ $playlistEpisode->id }})"
                class="h-8 w-8 rounded-lg text-red-500 transition hover:bg-red-50 dark:hover:bg-red-950/40">
                <i class="fa-solid fa-trash-can"></i>
            </button>
        </div>
    @endif
</div>