{{--
    Reloadable body of the search results page — result count + sort, product
    grid, pagination. Re-rendered on full load and on every
    <turbo-frame id="search-listing"> navigation, straight from ?q= and ?sort=.

    Vars: $query (non-empty string), $products (LengthAwarePaginator), $sortOptions (array)
--}}

@if ($products->isEmpty())
    <p class="text-neutral-500">{{ __('storefront.shop.no_products') }}</p>
@else
    <div class="flex items-center justify-between gap-6 flex-wrap mb-7">
        <x-shop.result-count :paginator="$products" />
        <x-shop.sort :options="$sortOptions" id="search-sort" />
    </div>

    <x-product-grid :products="$products->items()" cols="4" />

    <div class="mt-12">
        <x-ui.pagination :paginator="$products" />
    </div>
@endif