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

@php($ads = app(\App\Services\AdManager::class))

{{-- Recipe list (all or one category) with filters; filters work without JavaScript (GET form). --}}
@section('content')
    <header class="border-b border-black/[0.06] bg-white">
        <div class="container-site max-w-7xl py-8 md:py-12">
            @include($site->themeView('partials.breadcrumbs'))
            <h1 class="mt-4 font-[family-name:var(--font-heading)] text-3xl font-black tracking-tight text-balance text-ink md:text-5xl">{{ $category?->name ?? __('recipes.all_recipes') }}</h1>
            @if ($category?->description)<p class="mt-3 max-w-3xl text-lg text-slate-600">{{ $category->description }}</p>@endif
        </div>
    </header>

    <div class="container-site grid max-w-7xl gap-8 py-8 lg:grid-cols-[17rem_1fr]">
        <aside>
            <details class="group rounded-[var(--radius-card)] border border-black/[0.08] bg-white p-4 lg:p-5" @if ($filters) open @endif data-filters>
                <summary class="flex cursor-pointer list-none items-center justify-between font-bold text-ink lg:pointer-events-none [&::-webkit-details-marker]:hidden">
                    <span class="inline-flex items-center gap-2"><x-site.icon name="sort" class="size-5 text-brand" /> {{ __('recipes.filters') }}</span>
                    <x-site.icon name="chevron-down" class="size-5 transition group-open:rotate-180 lg:hidden" />
                </summary>
                <form method="get" action="{{ $path }}" class="mt-4 space-y-4 text-sm">
                    <div><label for="f-q" class="label">{{ __('recipes.search_placeholder') }}</label><input id="f-q" type="search" name="q" value="{{ $filters['q'] ?? '' }}" maxlength="80" class="field py-2 text-sm"></div>
                    <div><label for="f-ing" class="label">{{ __('recipes.ingredient') }}</label><input id="f-ing" name="ingredient" value="{{ $filters['ingredient'] ?? '' }}" maxlength="60" placeholder="{{ __('recipes.ingredient_placeholder') }}" class="field py-2 text-sm"></div>
                    @unless ($category)
                        <fieldset><legend class="label">{{ __('recipes.category') }}</legend>
                            <ul class="space-y-1">
                                @foreach ($categories as $c)
                                    <li><a href="{{ $c->path() }}{{ $filters ? '?'.http_build_query($filters) : '' }}" class="flex justify-between rounded-md px-2 py-1 text-slate-700 hover:bg-brand/10 hover:text-brand">{{ $c->name }} <span class="text-slate-400">{{ $c->recipes_count }}</span></a></li>
                                @endforeach
                            </ul>
                        </fieldset>
                    @endunless
                    <div><label for="f-time" class="label">{{ __('recipes.time') }}</label>
                        <select id="f-time" name="time" class="field py-2 text-sm"><option value="">{{ __('recipes.any_time') }}</option>@foreach (array_keys(\App\Models\Recipe::TIME_FILTERS) as $t)<option value="{{ $t }}" @selected(($filters['time'] ?? '') === (string) $t)>{{ __('recipes.time_under', ['n' => $t]) }}</option>@endforeach</select></div>
                    <div><label for="f-diff" class="label">{{ __('recipes.difficulty') }}</label>
                        <select id="f-diff" name="difficulty" class="field py-2 text-sm"><option value="">{{ __('recipes.any_difficulty') }}</option>@foreach (\App\Models\Recipe::DIFFICULTIES as $d)<option value="{{ $d }}" @selected(($filters['difficulty'] ?? '') === $d)>{{ __('recipes.difficulties.'.$d) }}</option>@endforeach</select></div>
                    <div><label for="f-diet" class="label">{{ __('recipes.diet') }}</label>
                        <select id="f-diet" name="diet" class="field py-2 text-sm"><option value="">{{ __('recipes.any_diet') }}</option>@foreach (\App\Models\Recipe::DIETS as $d)<option value="{{ $d }}" @selected(($filters['diet'] ?? '') === $d)>{{ __('recipes.diets.'.$d) }}</option>@endforeach</select></div>
                    <div><label for="f-sort" class="label">{{ __('recipes.sort') }}</label>
                        <select id="f-sort" name="sort" class="field py-2 text-sm"><option value="">{{ __('recipes.sort_latest') }}</option><option value="quick" @selected(($filters['sort'] ?? '') === 'quick')>{{ __('recipes.sort_quick') }}</option><option value="popular" @selected(($filters['sort'] ?? '') === 'popular')>{{ __('recipes.sort_popular') }}</option></select></div>
                    <button class="btn w-full bg-brand py-2.5 text-white hover:brightness-110">{{ __('recipes.apply') }}</button>
                    @if ($filters)<a href="{{ $path }}" class="block text-center text-sm font-medium text-slate-500 hover:text-brand">{{ __('recipes.reset') }}</a>@endif
                </form>
            </details>
        </aside>

        <section aria-labelledby="h-results">
            <h2 id="h-results" class="text-sm font-semibold text-slate-500">{{ trans_choice('recipes.results', $recipes->total(), ['count' => $recipes->total()]) }}</h2>
            @if ($recipes->isEmpty())
                <p class="mt-6 rounded-[var(--radius-card)] bg-white p-8 text-center text-slate-600 ring-1 ring-black/[0.06]">{{ __('recipes.no_results') }}</p>
            @else
                <div class="mt-4 grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
                    @foreach ($recipes as $recipe)
                        @include($site->themeView('recipes.partials.card'), ['recipe' => $recipe])
                        {{-- One in-feed unit after the 6th card, away from the filters. --}}
                        @if ($loop->iteration === 6 && $recipes->count() > 9)
                            <div class="sm:col-span-2 xl:col-span-3">{{ $ads->slot('in_content') }}</div>
                        @endif
                    @endforeach
                </div>
                <div class="mt-10">{{ $recipes->links() }}</div>
            @endif
        </section>
    </div>
@endsection