74 lines
3.7 KiB
PHP
74 lines
3.7 KiB
PHP
@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>
|