@model ProductOverviewModel

@using Nop.Core
@using Nop.Core.Domain.Catalog
@using Nop.Core.Domain.Orders
@using Nop.Core.Domain.Tax

@inject CatalogSettings catalogSettings
@inject IWorkContext workContext

@{
    //prepare "Add to cart" AJAX link
    var addtocartlink = "";
    var shoppingCartTypeId = (int)ShoppingCartType.ShoppingCart;
    var quantity = 1;
    if (Model.ProductPrice.ForceRedirectionAfterAddingToCart)
    {
        addtocartlink = Url.RouteUrl("AddProductToCart-Catalog", new { productId = Model.Id, shoppingCartTypeId = shoppingCartTypeId, quantity = quantity, forceredirection = Model.ProductPrice.ForceRedirectionAfterAddingToCart });
    }
    else
    {
        addtocartlink = Url.RouteUrl("AddProductToCart-Catalog", new { productId = Model.Id, shoppingCartTypeId = shoppingCartTypeId, quantity = quantity });
    }

    var addtowishlistlink = Url.RouteUrl("AddProductToCart-Catalog", new { productId = Model.Id, shoppingCartTypeId = (int)ShoppingCartType.Wishlist, quantity = quantity });
    var addtocomparelink = Url.RouteUrl("AddProductToCompare", new { productId = Model.Id });
}
<div class="product-item" data-productid="@Model.Id">
    <div class="picture">
        @if (Model.PictureModels.Count > 1)
        {
            <div class="swiper" id="swiper-@Model.Id" dir="@Html.GetUIDirection(!await Html.ShouldUseRtlThemeAsync())">
                <div class="swiper-wrapper">
                    @foreach (var picture in Model.PictureModels)
                    {
                        <a class="swiper-slide" href="@(Url.RouteUrl<Product>(new { SeName = Model.SeName }))" title="@picture.Title">
                            <img alt="@picture.AlternateText" src="@picture.ImageUrl" title="@picture.Title" />
                        </a>
                    }
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>

            <script asp-location="Footer">
                new Swiper('#swiper-@(Model.Id)', {
                    pagination: {
                        clickable: true,
                        el: '.swiper-pagination',
                    },
                });
            </script>
        }
        else
        {
            var picture = Model.PictureModels.FirstOrDefault();
            <a href="@(Url.RouteUrl<Product>(new { SeName = Model.SeName }))" title="@picture?.Title">
                <img alt="@picture?.AlternateText" src="@picture?.ImageUrl" title="@picture?.Title" />
            </a>
        }
    </div>
    <div class="details">
        <h2 class="product-title">
            <a href="@(Url.RouteUrl<Product>(new {SeName = Model.SeName }))">@Model.Name</a>
        </h2>
        @if (catalogSettings.ShowSkuOnCatalogPages && !string.IsNullOrEmpty(Model.Sku))
        {
            <div class="sku">
                @Model.Sku
            </div>
        }
        @if (Model.ReviewOverviewModel.AllowCustomerReviews)
        {
            var ratingPercent = 0;
            if (Model.ReviewOverviewModel.TotalReviews != 0)
            {
                ratingPercent = ((Model.ReviewOverviewModel.RatingSum * 100) / Model.ReviewOverviewModel.TotalReviews) / 5;
            }
            <div class="product-rating-box" title="@string.Format(T("Reviews.TotalReviews").Text, Model.ReviewOverviewModel.TotalReviews)">
                <div class="rating">
                    <div style="width: @(ratingPercent)%">
                    </div>
                </div>
            </div>
        }
        <div class="description" @(catalogSettings.ShowShortDescriptionOnCatalogPages ? "" : "data-short-description=none")>
            @Html.Raw(Model.ShortDescription)
        </div>
        <div class="add-info">
            @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductBoxAddinfoBefore, additionalData = Model })
            <div class="prices">
                @if (!string.IsNullOrEmpty(Model.ProductPrice.OldPrice))
                {
                    <span class="price old-price">@Model.ProductPrice.OldPrice</span>
                }
                <span class="price actual-price">@Model.ProductPrice.Price</span>
                @if (Model.ProductPrice.DisplayTaxShippingInfo)
                {
                    var inclTax = await workContext.GetTaxDisplayTypeAsync() == TaxDisplayType.IncludingTax;
                    //tax info is already included in the price (incl/excl tax). that's why we display only shipping info here
                    //of course, you can modify appropriate locales to include VAT info there
                    <span class="tax-shipping-info">
                        @T(inclTax ? "Products.Price.TaxShipping.InclTax" : "Products.Price.TaxShipping.ExclTax", Url.RouteTopicUrl("shippinginfo"))
                    </span>
                }
                @if (!string.IsNullOrEmpty(Model.ProductPrice.BasePricePAngV))
                {
                    <div class="base-price-pangv">
                        @Model.ProductPrice.BasePricePAngV
                    </div>
                }
            </div>
            @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductBoxAddinfoMiddle, additionalData = Model })
            <div class="buttons">
                @if (!Model.ProductPrice.DisableBuyButton)
                {
                    var addToCartText = T("ShoppingCart.AddToCart").Text;
                    if (Model.ProductPrice.IsRental)
                    {
                        addToCartText = T("ShoppingCart.Rent").Text;
                    }
                    if (Model.ProductPrice.AvailableForPreOrder)
                    {
                        addToCartText = T("ShoppingCart.PreOrder").Text;
                    }
                    <button type="button" class="button-2 product-box-add-to-cart-button" onclick="AjaxCart.addproducttocart_catalog('@addtocartlink');return false;">@(addToCartText)</button>
                }
                @if (!Model.ProductPrice.DisableAddToCompareListButton)
                {
                    <button type="button" class="button-2 add-to-compare-list-button" title="@T("ShoppingCart.AddToCompareList")" onclick="AjaxCart.addproducttocomparelist('@addtocomparelink');return false;">@T("ShoppingCart.AddToCompareList")</button>
                }
                @if (!Model.ProductPrice.DisableWishlistButton)
                {
                    <button type="button" class="button-2 add-to-wishlist-button" title="@T("ShoppingCart.AddToWishlist")" onclick="AjaxCart.addproducttocart_catalog('@addtowishlistlink');return false;">@T("ShoppingCart.AddToWishlist")</button>
                }
            </div>
            @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductBoxAddinfoAfter, additionalData = Model })
        </div>
    </div>
</div>