{{--
    The wishlist grid (or its empty state), shared by the account page
    (account/wishlist) and the guest page (wishlist/guest). Expects $products
    from WishlistController::products().
--}}
@if ($products->isEmpty())
    <div class="flex max-w-2xl flex-col items-start gap-8">
        <p>{{ __('storefront.wishlist.empty') }}</p>
        <x-ui.button :href="route('products')" size="md">{{ __('storefront.orders.shop_now') }}</x-ui.button>
    </div>
@else
    <ul class="grid grid-cols-2 gap-9 md:grid-cols-3 2xl:grid-cols-4">
        @foreach ($products as $product)
            <li class="flex flex-col gap-4">
                <x-ui.product-card
                    :name="$product['name']"
                    :price="$product['price']"
                    :image="$product['image']"
                    :href="$product['href']"
                    :variant-id="$product['variantId']"
                    :has-custom-fields="$product['hasCustomFields']"
                    :product-id="$product['id']"
                    :wishlist="true"
                />

                {{-- Plain post (no fetch): the page reloads without the product. --}}
                <form method="POST" action="{{ route('wishlist.toggle', ['productId' => $product['id']]) }}">
                    @csrf
                    <button
                        type="submit"
                        class="cursor-pointer text-sm underline hover:no-underline"
                        aria-label="{{ __('storefront.wishlist.remove_named', ['name' => $product['name']]) }}"
                    >{{ __('storefront.wishlist.remove_short') }}</button>
                </form>
            </li>
        @endforeach
    </ul>
@endif