59 lines
2.3 KiB
PHP
59 lines
2.3 KiB
PHP
@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>
|