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

{{-- Season of a series: episodes with their video when one was uploaded in the back-office. --}}
@section('content')
    @php($ads = app(\App\Services\AdManager::class))
    <div class="container-site max-w-5xl py-8 text-white">
        @include($site->themeView('partials.breadcrumbs'))
        <div class="mt-5 flex gap-5">
            @if ($season['poster'])<img src="{{ $season['poster'] }}" alt="" width="120" height="180" class="hidden w-28 shrink-0 rounded-xl object-cover ring-1 ring-white/10 sm:block">@endif
            <div>
                <p class="text-sm font-bold tracking-widest text-accent uppercase"><a href="{{ $show['path'] }}" class="hover:underline">{{ $show['title'] }}</a></p>
                <h1 class="mt-1 text-3xl font-black tracking-tight md:text-4xl">{{ $season['name'] ?: __('movies.season_n', ['n' => $season['number']]) }}</h1>
                <p class="mt-1 text-white/60">{{ $season['date'] ? substr($season['date'], 0, 4).' · ' : '' }}{{ __('movies.episodes_count', ['count' => count($season['episodes'])]) }}</p>
                @if ($season['overview'])<p class="mt-3 max-w-3xl leading-relaxed text-white/80">{{ $season['overview'] }}</p>@endif
            </div>
        </div>

        @if (count($show['seasons']) > 1)
            <nav class="mt-6 flex gap-2 overflow-x-auto pb-1 [scrollbar-width:none]" aria-label="{{ __('movies.seasons') }}">
                @foreach ($show['seasons'] as $s)
                    <a href="{{ $show['path'] }}/{{ seg('season') }}/{{ $s['number'] }}" @class(['shrink-0 rounded-full px-4 py-1.5 text-sm font-semibold', 'bg-accent text-black' => $s['number'] === $season['number'], 'bg-white/10 text-white/80 hover:bg-white/20' => $s['number'] !== $season['number']]) @if ($s['number'] === $season['number']) aria-current="page" @endif>{{ __('movies.season_short', ['n' => $s['number']]) }}</a>
                @endforeach
            </nav>
        @endif

        <ol class="mt-8 space-y-4" data-episodes>
            @forelse ($season['episodes'] as $e)
                <li id="e{{ $e['number'] }}" class="scroll-mt-24 rounded-2xl bg-white/5 p-4 ring-1 ring-white/10">
                    <div class="flex flex-wrap items-start justify-between gap-3">
                        <div class="min-w-0">
                            <h2 class="font-bold"><span class="text-accent">{{ __('movies.episode_n', ['n' => $e['number']]) }}</span>@if ($e['name']) · {{ $e['name'] }}@endif</h2>
                            <p class="mt-1 flex flex-wrap gap-3 text-xs text-white/50">
                                @if ($e['date'])<time datetime="{{ $e['date'] }}">{{ \Carbon\Carbon::parse($e['date'])->locale(app()->getLocale())->translatedFormat('j F Y') }}</time>@endif
                                @if ($e['runtime'])<span>{{ $e['runtime'] }} min</span>@endif
                            </p>
                        </div>
                        @if ($e['video'])
                            <button type="button" data-episode-play="{{ $e['id'] }}" aria-expanded="false" aria-controls="player-{{ $e['id'] }}" class="btn shrink-0 bg-accent px-4 py-2 text-sm font-bold text-black hover:brightness-110"><x-site.icon name="play" class="size-4" /> {{ __('movies.watch_now') }}</button>
                        @endif
                    </div>
                    @if ($e['overview'])<p class="mt-2 text-sm leading-relaxed text-white/80">{{ $e['overview'] }}</p>@endif
                    @if ($e['video'])
                        {{-- The <video> element is created on demand by cinema.js (nothing preloaded). --}}
                        <div id="player-{{ $e['id'] }}" hidden class="mt-4 overflow-hidden rounded-xl bg-black ring-1 ring-white/10"
                             data-episode-player data-src="{{ $e['video']['url'] }}" data-type="{{ $e['video']['mime'] === 'video/quicktime' ? 'video/mp4' : $e['video']['mime'] }}"></div>
                    @endif
                </li>
            @empty
                <li class="rounded-2xl bg-white/5 p-6 text-white/60 ring-1 ring-white/10">{{ __('movies.no_episodes') }}</li>
            @endforelse
        </ol>
        {{ $ads->slot('after_content') }}
    </div>
@endsection