@extends('front.layout')
@section('title', $title)
@section('content')
<div class="container page-space">
    @include('front.partials.ad', ['slot' => 'list_top'])

    <div class="home-catalogue-layout">
        <section class="home-catalogue-main">
            <div class="section-head">
                <div>
                    <h1>{{ $title }}</h1>
                    <p class="section-subtitle">{{ $sort === 'trending' ? 'Trending this week on TMDB.' : ($sort === 'latest_released' ? 'Newest releases first.' : ($sort === 'most_viewed' ? 'Most viewed titles first.' : 'Latest imported titles first.')) }}</p>
                </div>
                @if($fromDate || $toDate || $sort !== 'trending')
                    <a class="clear-filter-link" href="{{ $filterAction }}">Clear filters</a>
                @endif
            </div>

            <div class="grid cinema-grid" id="infiniteList" data-infinite-catalogue
                data-next-page-url="{{ $items->nextPageUrl() }}"
                data-loading-message="Loading more {{ strtolower($title) }}..."
                data-finished-message="You have reached the end of {{ strtolower($title) }}.">
                @forelse($items as $x)
                    @include('front.partials.card', ['x' => $x, 'type' => $type])
                @empty
                    <div class="empty-state">No items found for these filters.</div>
                @endforelse
            </div>

            @if($items->hasMorePages())
                <div class="infinite-loader" data-infinite-loader aria-live="polite">
                    <span class="infinite-spinner" aria-hidden="true"></span>
                    <span data-loader-text>Scroll down to load more</span>
                </div>
                <div class="infinite-sentinel" data-infinite-sentinel aria-hidden="true"></div>
                <button class="infinite-retry" type="button" data-infinite-retry hidden>Try again</button>
            @elseif($items->isNotEmpty())
                <div class="infinite-finished">You have reached the end of {{ strtolower($title) }}.</div>
            @endif
        </section>

        <aside class="home-filter-sidebar" aria-label="{{ $title }} sorting and date filter">
            @include('front.partials.catalogue-filter')
        </aside>
    </div>

    @include('front.partials.ad', ['slot' => 'list_bottom'])
</div>
@endsection
