@props(['product', 'showSale' => false])
<article class="mw-card">
    <a href="{{ route('product.show', $product) }}" class="mw-card-img">
        @if($showSale && $product->is_on_sale)
            <span class="mw-sale">Sale</span>
        @endif
        <img src="{{ $product->image_url }}" alt="{{ $product->name }}" loading="lazy"
             onerror="this.src='{{ asset('images/placeholder-product.svg') }}'">
    </a>
    <div class="mw-card-body">
        <h3 class="mw-card-title">
            <a href="{{ route('product.show', $product) }}">{{ $product->name }}</a>
        </h3>
        @unless(auth()->check() && in_array(auth()->user()->role, ['business', 'supplier'], true))
        <div class="mw-card-price">
            @if($product->is_on_sale)
                <del>₹{{ number_format($product->regular_price, 2) }}</del>
            @endif
            <ins>₹{{ number_format($product->price, 2) }}</ins>
        </div>
        @endunless
        <form action="{{ route('cart.add', $product) }}" method="POST">
            @csrf
            <button class="mw-card-btn" type="submit">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="9" cy="20" r="1"/><circle cx="17" cy="20" r="1"/>
                    <path d="M3 3h2l2.2 11.2a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.6L21 8H7"/>
                </svg>
                ADD TO CART
            </button>
        </form>
    </div>
</article>