@extends('layouts.app')

@section('title', $collection['name'] . ' — ' . config('app.name'))
@section('description', strip_tags($collection['description'] ?? ''))

@push('seo')
    {{-- Filtered / sorted / paged variants all consolidate onto the bare
         category URL; the noindex keeps the near-duplicate variants out of the
         index while still letting crawlers follow through to the products. --}}
    <link rel="canonical" href="{{ route('category.show', ['id' => $collection['id']]) }}">
    @if($listing->isRefined())
        <meta name="robots" content="noindex,follow">
    @endif
@endpush

@section('content')
    <div class="max-w-5xl mx-auto pt-26 pb-12">

        <div class="flex items-end justify-between gap-6 flex-wrap mb-16">
            <h1 class="font-medium text-h2">{{ $collection['name'] }}</h1>

            <x-breadcrumb :items="[
                ['label' => __('storefront.nav.home'), 'href' => route('home')],
                ['label' => $collection['name']],
            ]" />
        </div>

        {{-- Everything that reflects sort / filter / page state lives in this
             frame. A sort link or filter submit inside it navigates the frame;
             the controller re-renders it straight from the query string, and
             data-turbo-action="advance" keeps the address bar in sync so a
             refresh or bookmark reproduces the exact same view. With no JS the
             frame is just a block and the links do full-page navigations to the
             same URLs. --}}
        <turbo-frame
            id="category-listing"
            data-turbo-action="advance"
            data-controller="frame-scroll"
            class="scroll-mt-28"
        >
            @include('shop.partials.listing')
        </turbo-frame>

    </div>
@endsection