@extends($site->themeView('layout'))

{{-- Editorial selection: original introduction, then each title with the editor's note. --}}
@section('content')
    @php
        $ads = app(\App\Services\AdManager::class);
    @endphp
    <div class="container-site grid max-w-7xl gap-10 py-8 text-white lg:grid-cols-[minmax(0,1fr)_300px]">
        <article class="min-w-0">
            @include($site->themeView('partials.breadcrumbs'))
            <p class="mt-5 text-xs font-bold tracking-widest text-accent uppercase">{{ __('movies.selection') }}</p>
            <h1 class="mt-2 text-3xl font-black tracking-tight text-balance md:text-5xl">{{ $collection->title }}</h1>
            <div class="prose-site cn-prose mt-6">{!! $html !!}</div>

            <ol class="mt-10 space-y-6">
                @foreach ($items as $i => $t)
                    <li class="flex gap-5 rounded-2xl bg-white/5 p-4 ring-1 ring-white/10">
                        <a href="{{ $t['path'] }}" class="w-24 shrink-0 sm:w-32">
                            @if ($t['poster'])<img src="{{ $t['poster'] }}" alt="{{ __('movies.poster_of', ['title' => $t['title']]) }}" width="185" height="278" loading="lazy" class="w-full rounded-xl">@endif
                        </a>
                        <div class="min-w-0">
                            <p class="text-sm font-bold text-accent">{{ $i + 1 }}.</p>
                            <h2 class="text-xl font-bold"><a href="{{ $t['path'] }}" class="hover:underline">{{ $t['title'] }}</a> @if ($t['year'])<span class="font-normal text-white/50">({{ $t['year'] }})</span>@endif</h2>
                            <p class="mt-1 text-sm text-white/60">{{ implode(', ', $t['directors']) }}@if ($t['genres']) · {{ implode(', ', array_slice($t['genres'], 0, 3)) }}@endif</p>
                            @if ($t['note'])<p class="mt-3 leading-relaxed text-white/85">{{ $t['note'] }}</p>@endif
                            <button type="button" data-list-toggle="watchlist" data-item="{{ json_encode(['type' => $t['type'], 'id' => $t['id'], 'title' => $t['title'], 'year' => $t['year'], 'poster' => $t['poster'], 'path' => $t['path'], 'genres' => $t['genre_ids']]) }}" aria-pressed="false" class="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-white/70 hover:text-white aria-pressed:text-accent"><x-site.icon name="bookmark" class="size-4" /> {{ __('movies.watchlist') }}</button>
                        </div>
                    </li>
                @endforeach
            </ol>
            {{ $ads->slot('after_content') }}
        </article>
        <aside><div class="lg:sticky lg:top-24">{{ $ads->slot('sidebar') }}</div></aside>
    </div>
@endsection