@props(['product'])

@php($productUrl = route('storefront.product.show', $product->slug))

<div class="sm-product-card">
    <a class="sm-product-link" href="{{ $productUrl }}">
        <span class="sm-product-thumb">
            @if ($product->card_tag || $product->discount_percent)
                <span class="sm-card-tags">
                    @if ($product->card_tag)
                        <span class="sm-card-tag">{{ $product->card_tag }}</span>
                    @endif
                    @if ($product->discount_percent)
                        <span class="sm-discount-tag">-{{ $product->discount_percent }}%</span>
                    @endif
                </span>
            @endif
            <i class="bi {{ $product->category?->icon_class ?? 'bi-box-seam' }}" aria-hidden="true"></i>
        </span>
        <span class="sm-product-name">{{ $product->name }}</span>
        <x-storefront.price :product="$product" />
    </a>

    {{-- Outside the card link, because a button cannot sit inside a link. --}}
    <div class="sm-card-wish-spot">
        @guest
            <a class="sm-card-wish" href="{{ route('login') }}" title="Sign in to save to wishlist" aria-label="Sign in to save {{ $product->name }} to your wishlist"><i class="bi bi-heart" aria-hidden="true"></i></a>
        @elseif (isset($wishlistProductIds[$product->id]))
            <a class="sm-card-wish is-saved" href="{{ route('storefront.wishlist') }}" title="In your wishlist" aria-label="{{ $product->name }} is in your wishlist"><i class="bi bi-heart-fill" aria-hidden="true"></i></a>
        @else
            <form method="POST" action="{{ route('storefront.wishlist.store') }}" data-saruar-wishlist data-saved-label="{{ $product->name }} is in your wishlist">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}">
                <button class="sm-card-wish" type="submit" title="Save to wishlist" aria-label="Save {{ $product->name }} to your wishlist"><i class="bi bi-heart" aria-hidden="true"></i></button>
            </form>
        @endguest
    </div>

    @if (! $product->is_available)
        <span class="badge text-bg-secondary align-self-start">Out of stock</span>
    @elseif ($product->variants->isNotEmpty())
        {{-- A size or colour has to be chosen first, and only the product page offers that. --}}
        <div class="sm-card-actions">
            <a class="btn btn-outline-secondary sm-card-cart" href="{{ $productUrl }}" title="Choose options" aria-label="Choose options for {{ $product->name }}"><i class="bi bi-cart-plus" aria-hidden="true"></i></a>
            <a class="btn sm-btn-primary" href="{{ $productUrl }}" aria-label="Buy {{ $product->name }} now">Buy Now</a>
        </div>
    @else
        <form method="POST" action="{{ route('storefront.cart.store') }}" class="sm-card-actions">
            @csrf
            <input type="hidden" name="product_id" value="{{ $product->id }}">
            <input type="hidden" name="quantity" value="1">
            <button class="btn btn-outline-secondary sm-card-cart" type="submit" title="Add to cart" data-saruar-add-to-cart aria-label="Add {{ $product->name }} to cart"><i class="bi bi-cart-plus" aria-hidden="true"></i></button>
            <button class="btn sm-btn-primary" type="submit" name="buy_now" value="1" aria-label="Buy {{ $product->name }} now">Buy Now</button>
        </form>
    @endif
</div>