<article class="single-product-wrapper">
    <!-- Product Image -->
    <a href="product/product.html" data-v-product-url> </a>
    <div class="product-image">
        <a href="product/product.html" data-v-product-url>

            <img src="demo/img/product.webp" loading="lazy" data-v-product-alt alt="" data-v-size="thumb" loading="lazy" data-v-if="prod.image" data-v-product-image/>
			<img src="/media/placeholder.svg" class="bg-body-tertiary" loading="lazy" alt="" data-v-if-not="prod.image"/>

            <!-- Hover Thumb -->
            <img class="hover-img" src="demo/img/product-2.webp" loading="lazy" data-v-product-alt alt="" loading="lazy" data-v-size="thumb" data-v-product-image-1/>
        </a>


        <!-- Favourite -->
        <div class="product-favourite">
			<a href="product/product.html" class="la la-heart" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url><span></span></a>
		</div>

        <!-- Compare -->
        <div class="product-compare">
			<a href="product/product.html" class="la la-random" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url><span></span></a>
		</div>
		
		<div class="badges">
			<span class="badge text-bg-secondary" data-v-if="prod.old_price > 0">Sale</span>        
		</div>
    </div>

    <!-- Product Description -->
    <div class="product-content">
        
        <a href="product/product.html" class="text-body" data-v-product-url>
            <span data-v-product-name>Product 8</span>
        </a>
        
        <p data-v-if="prod.min_price > 0">
			<span class="text-muted small">From</span>
			<span class="product-price" data-v-product-min_price_tax_formatted>100.0000</span>
        </p>
        
        <div data-v-if-not="prod.min_price">
			<p class="product-price old-price" data-v-if="prod.old_price > 0" data-v-product-old_price_tax_formatted>100.0000</p>        
			<p class="product-price" data-v-if="prod.price > 0" data-v-product-price_tax_formatted>100.0000</p>
        </div>

        <!-- Hover Content -->
        <div class="hover-content" data-v-if="prod.price > 0 && !prod.has_variants">
            <!-- Add to Cart -->
            <div class="add-to-cart-btn">
                <input type="hidden" name="product_id" value="" data-v-product-product_id />
                
                <a href="#" class="btn btn-secondary btn-sm w-100 disabled" data-v-if="prod.stock_quantity < 1">
					<span class="button-text">
                        Out of stock
                    </span>
                </a>
                
                <a href="" class="btn btn-primary btn-sm w-100" data-v-if="prod.stock_quantity > 0" data-v-product-add_cart_url data-v-vvveb-action="addToCart" data-product_id="1">
                
                    <span class="loading d-none">
                        <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
                        <span>Add to cart</span>
                    </span>

                    <span class="button-text">
						<i class="la la-lg la-shopping-bag"></i>
						<span>Add to cart</span>
                    </span>
                    
                </a>
            </div>
        </div>
   
    </div>
</article>
