@php
    $showAddToCart = $showAddToCart ?? true;
    $url = $product->slug
        ? route('storefront.product', ['slug' => $sfStore->slug, 'product_slug' => $product->slug])
        : route('storefront.product.legacy', ['slug' => $sfStore->slug, 'id' => $product->id]);
    $quickViewUrl = route('storefront.product.quick-view', ['slug' => $sfStore->slug, 'id' => $product->id]);
    $thumb = $product->thumbnail ? asset('storage/' . $product->thumbnail) : null;
    $initial = strtoupper(\Illuminate\Support\Str::substr($product->name, 0, 1));
@endphp
<article class="sf-card sf-card--product">
    <a class="sf-card__media sf-card__media-link" href="{{ $url }}">
        @if($thumb)
            <img src="{{ $thumb }}" alt="{{ $product->name }}" loading="lazy" width="400" height="300">
        @else
            <div class="sf-card__placeholder" aria-hidden="true">{{ $initial }}</div>
        @endif
    </a>
    <div class="sf-card__body">
        @if($product->category)
            <span class="sf-card__cat">{{ $product->category->name }}</span>
        @endif
        <div class="sf-card__title-row">
            <h2 class="sf-card__title">
                <a class="sf-card__title-link" href="{{ $url }}">{{ $product->name }}</a>
            </h2>
            <span class="sf-card__price">{{ $product->formatted_price }}</span>
        </div>
        <div class="sf-card__meta sf-card__meta--with-actions">
            <div class="sf-card__actions">
                <button type="button" class="sf-btn sf-btn--outline sf-btn--sm sf-quick-view-btn" data-quick-view-url="{{ $quickViewUrl }}">Quick view</button>
                @if($showAddToCart && !($product->is_variant && $product->variants->isNotEmpty()))
                    <form class="sf-card__cart-form" method="post" action="{{ route('storefront.cart.add', ['slug' => $sfStore->slug]) }}">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <input type="hidden" name="qty" value="1">
                        <button type="submit" class="sf-btn sf-btn--accent sf-btn--sm">Add to cart</button>
                    </form>
                @elseif($showAddToCart)
                    <button type="button" class="sf-btn sf-btn--accent sf-btn--sm sf-variant-toggle-btn" data-target="#sfVariantPanel{{ $product->id }}" aria-expanded="false">Add variant</button>
                @endif
            </div>
        </div>
        @if($showAddToCart && ($product->is_variant && $product->variants->isNotEmpty()))
            <div class="sf-card__variant-block">
                <div class="sf-variant-quick-picker__menu sf-variant-panel" id="sfVariantPanel{{ $product->id }}" hidden>
                    @foreach($product->variants as $variant)
                        <form class="sf-variant-quick-picker__row" method="post" action="{{ route('storefront.cart.add', ['slug' => $sfStore->slug]) }}">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                            <input type="hidden" name="variant_id" value="{{ $variant->id }}">
                            <input type="hidden" name="qty" value="1">
                            <span class="sf-variant-quick-picker__name">{{ $variant->name }}</span>
                            <span class="sf-variant-quick-picker__price">{{ format_currency((float) $variant->price) }}</span>
                            <button type="submit" class="sf-variant-quick-picker__add" aria-label="Add {{ $variant->name }}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none">
                                    <path d="M3 4h2l2.2 10.2a1 1 0 0 0 1 .8h8.9a1 1 0 0 0 1-.8L20 7H7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                    <circle cx="10" cy="19" r="1.5" fill="currentColor"/>
                                    <circle cx="17" cy="19" r="1.5" fill="currentColor"/>
                                </svg>
                            </button>
                        </form>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</article>