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

{{-- Favourites and watch list, stored in the visitor's browser (no account needed). --}}
@section('content')
    <div class="container-site max-w-7xl py-8 text-white" data-mylist
         data-i18n="{{ json_encode(['empty' => __('movies.list_empty'), 'remove' => __('movies.remove')]) }}">
        <h1 class="text-3xl font-black tracking-tight md:text-4xl">{{ __('movies.my_list') }}</h1>
        <p class="mt-2 max-w-2xl text-sm text-white/60">{{ __('movies.my_list_note') }}</p>
        <div class="mt-6 flex gap-2" role="tablist">
            <button type="button" role="tab" data-list-tab="favorites" aria-selected="true" class="cn-tab">{{ __('movies.favorites') }} <span data-count="favorites"></span></button>
            <button type="button" role="tab" data-list-tab="watchlist" aria-selected="false" class="cn-tab">{{ __('movies.watchlist') }} <span data-count="watchlist"></span></button>
        </div>
        <div data-list-grid class="mt-8 grid grid-cols-2 gap-x-4 gap-y-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"></div>
        <p data-list-empty hidden class="mt-8 text-white/60"></p>
    </div>
@endsection