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

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

<div
    wire:key="playlist-sidebar-row-{{ $playlistEpisode->id }}"
    @if ($isActive) data-active-row aria-current="true" @endif
    class="group relative flex h-20 shrink-0 items-center gap-3 px-2.5 transition {{ $isActive ? 'bg-rose-600/10 dark:bg-rose-500/10' : 'hover:bg-neutral-100 dark:hover:bg-neutral-900' }}"
>
    @if ($isActive)
        <span class="absolute inset-y-0 left-0 w-1 bg-rose-600"></span>
    @endif

    <div class="flex h-7 w-7 shrink-0 items-center justify-center text-sm text-neutral-500 dark:text-neutral-400">
        @if ($isActive)
            <i class="fa-solid fa-play text-rose-600 dark:text-rose-400"></i>
        @else
            {{ $playlistEpisode->position }}
        @endif
    </div>

    <a href="{{ route('hentai.index', ['title' => $episode->slug, 'playlist' => $playlistEpisode->playlist_id]) }}" class="shrink-0">
        <img
            src="{{ $episode->gallery->first()?->thumbnail_url }}"
            alt="{{ $episode->title }} - {{ $episode->episode }}"
            loading="{{ $isActive ? 'eager' : 'lazy' }}"
            decoding="async"
            width="100"
            class="h-14 w-[100px] rounded-md object-cover {{ $isActive ? 'ring-2 ring-rose-600/60' : '' }}"
        >
    </a>

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

    @if ($isOwner)
        <button
            type="button"
            wire:click="remove({{ $playlistEpisode->id }})"
            wire:confirm="{{ __('playlist.remove-confirm') }}"
            aria-label="{{ __('playlist.remove') }}"
            class="shrink-0 rounded-md p-2 text-neutral-400 transition hover:bg-red-50 hover:text-red-600 sm:opacity-0 sm:group-hover:opacity-100 dark:text-neutral-500 dark:hover:bg-red-950/40 dark:hover:text-red-400"
        >
            <i class="fa-solid fa-trash-can"></i>
        </button>
    @endif
</div>