@extends('layouts.frontend')

@section('content')
    @include('frontend.partials.inner-hero', [
        'title' => $page['title'],
        'eyebrow' => $page['eyebrow'],
        'summary' => $page['summary'],
        'image' => $page['heroImage'],
        'breadcrumbs' => [$page['title'] => null],
    ])

    <section class="content-container my-space-xl py-space-md">
        <div class="d-flex flex-column flex-lg-row align-items-lg-end justify-content-between gap-3 mb-space-lg">
            @include('frontend.partials.section-heading', [
                'align' => 'text-start',
                'eyebrow' => $page['eyebrow'],
                'title' => $page['heading'],
                'summary' => $page['intro'],
            ])

            @if (!empty($page['filters']))
                <div class="d-flex flex-wrap gap-2">
                    @foreach ($page['filters'] as $filter)
                        <button class="px-4 py-1.5 rounded-full {{ $loop->first ? 'bg-primary text-on-primary' : 'bg-surface-container hover:bg-surface-container-high text-on-surface' }} font-label-md text-label-md"
                            type="button">{{ $filter }}</button>
                    @endforeach
                </div>
            @endif
        </div>

        @if (!empty($page['dateFilter']))
            <div class="bg-surface-container-lowest rounded-xl p-space-md border border-surface-container shadow-sm mb-space-lg">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-space-md items-end">
                    @include('frontend.partials.form-field', ['id' => 'date_from', 'label' => 'Date From', 'type' => 'date'])
                    @include('frontend.partials.form-field', ['id' => 'date_to', 'label' => 'Date To', 'type' => 'date'])
                    <button class="px-space-lg py-3 bg-primary-container text-on-primary font-title-md text-title-md rounded hover:bg-primary transition-colors shadow-md"
                        type="button">
                        Apply Filter
                    </button>
                </div>
            </div>
        @endif

        @if (!empty($page['search']))
            <div class="bg-surface-container-lowest rounded-xl p-space-md border border-surface-container shadow-sm mb-space-lg">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-space-md">
                    @include('frontend.partials.form-field', ['id' => 'search_title', 'label' => $page['search'][0]])
                    @include('frontend.partials.form-field', ['id' => 'search_author', 'label' => $page['search'][1]])
                </div>
            </div>
        @endif

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-space-lg">
            @foreach ($items as $item)
                @include('frontend.partials.cards', ['item' => $item])
            @endforeach
        </div>
    </section>
@endsection