@extends('layouts.app')

@section('title', __('storefront.shop.all_products') . ' — ' . config('app.name'))

@push('seo')
    {{-- The bare listing is indexable; filtered / sorted / paged variants
         consolidate onto it and are kept out of the index. --}}
    <link rel="canonical" href="{{ route('products') }}">
    @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="max-w-7xl mx-auto px-4 sm:px-8 pt-26 pb-12">

        <div class="flex items-end justify-between gap-6 flex-wrap mb-16">
            <h1 class="font-medium text-h2">{{ __('storefront.shop.all_products') }}</h1>

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

        {{-- Same reloadable listing body as the category page; sort/filter/page
             navigate this frame and advance the URL. --}}
        <turbo-frame
            id="products-listing"
            data-turbo-action="advance"
            data-controller="frame-scroll"
            class="scroll-mt-28"
        >
            @include('shop.partials.listing')
        </turbo-frame>

    </div>
@endsection