{{-- Poster card. $c = catalogue card; $size: grid | row --}}
@php
    $item = ['type' => $c['type'], 'id' => $c['id'], 'title' => $c['title'], 'year' => $c['year'], 'poster' => $c['poster'], 'path' => $c['path'], 'genres' => $c['genre_ids'] ?? []];
@endphp
<article class="cn-card group relative {{ ($size ?? 'grid') === 'row' ? 'w-36 shrink-0 snap-start sm:w-44' : '' }}">
    <a href="{{ $c['path'] }}" class="block">
        <div class="relative aspect-[2/3] overflow-hidden rounded-xl bg-white/5 ring-1 ring-white/10">
            @if ($c['poster'])
                <img src="{{ $c['poster'] }}" alt="{{ __('movies.poster_of', ['title' => $c['title']]) }}" loading="lazy" decoding="async" width="342" height="513"
                     class="size-full object-cover transition duration-500 group-hover:scale-105">
            @else
                <div class="grid size-full place-items-center bg-gradient-to-br from-brand/40 to-accent/10 p-3 text-center text-sm font-semibold text-white/70">{{ $c['title'] }}</div>
            @endif
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-transparent opacity-0 transition group-hover:opacity-100"></div>
            @if ($c['rating'])
                <span class="absolute start-2 top-2 inline-flex items-center gap-1 rounded-md bg-black/70 px-1.5 py-0.5 text-xs font-bold text-amber-300 backdrop-blur"><x-site.icon name="star" class="size-3 fill-current" /> {{ number_format($c['rating'], 1) }}</span>
            @endif
            @if (! empty($c['has_video']))
                <span class="absolute start-2 bottom-2 inline-flex items-center gap-1 rounded-md bg-accent px-1.5 py-0.5 text-[10px] font-bold text-black uppercase"><x-site.icon name="play" class="size-3" /> {{ __('movies.available') }}</span>
            @endif
            <span class="absolute end-2 top-2 rounded-md bg-black/70 px-1.5 py-0.5 text-[10px] font-bold tracking-wide text-white/80 uppercase backdrop-blur">{{ $c['type'] === 'tv' ? __('movies.tv_short') : __('movies.movie_short') }}</span>
        </div>
        <h3 class="mt-2 line-clamp-2 text-sm leading-snug font-semibold text-white/90 group-hover:text-white">{{ $c['title'] }}</h3>
        @if ($c['year'])<p class="text-xs text-white/50">{{ $c['year'] }}</p>@endif
        @if (! empty($c['role']))<p class="line-clamp-1 text-xs text-accent/90">{{ $c['role'] }}</p>@endif
    </a>
    <button type="button" data-list-toggle="favorites" data-item="{{ json_encode($item) }}" aria-pressed="false" title="{{ __('movies.add_favorite') }}"
            class="cn-fav absolute end-2 bottom-14 grid size-8 place-items-center rounded-full bg-black/70 text-white/80 opacity-0 backdrop-blur transition group-hover:opacity-100 focus:opacity-100 aria-pressed:text-rose-400 aria-pressed:opacity-100">
        <x-site.icon name="heart" class="size-4" /><span class="sr-only">{{ __('movies.add_favorite') }}</span>
    </button>
</article>