@model ProductDetailsModel

@using Nop.Core
@using Nop.Core.Domain.Catalog
@using Nop.Core.Domain.Seo
@using Nop.Services.Html

@inject IHtmlFormatter htmlFormatter
@inject IWebHelper webHelper
@inject SeoSettings seoSettings

@{
    Layout = "_ColumnsOne";

    //title
    NopHtml.AddTitleParts(!string.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
    //meta
    NopHtml.AddMetaDescriptionParts(Model.MetaDescription);
    NopHtml.AddMetaKeywordParts(Model.MetaKeywords);
    //page class
    NopHtml.AppendPageCssClassParts("html-product-details-page");

    //canonical URL
    if (seoSettings.CanonicalUrlsEnabled)
    {
        var productUrl = Url.RouteUrl<Product>(new { SeName = Model.SeName }, webHelper.GetCurrentRequestProtocol()).ToLowerInvariant();
        NopHtml.AddCanonicalUrlParts(productUrl, seoSettings.QueryStringInCanonicalUrlsEnabled);
    }

    //open graph META tags
    if (seoSettings.OpenGraphMetaTags)
    {
        NopHtml.AddHeadCustomParts("<meta property=\"og:type\" content=\"product\" />");
        NopHtml.AddHeadCustomParts("<meta property=\"og:title\" content=\"" + Html.Encode(Model.Name) + "\" />");
        NopHtml.AddHeadCustomParts("<meta property=\"og:description\" content=\"" + Html.Encode(htmlFormatter.StripTags(Model.MetaDescription)) + "\" />");
        NopHtml.AddHeadCustomParts("<meta property=\"og:image\" content=\"" + Model.DefaultPictureModel.ImageUrl + "\" />");
        NopHtml.AddHeadCustomParts("<meta property=\"og:image:url\" content=\"" + Model.DefaultPictureModel.ImageUrl + "\" />");
        NopHtml.AddHeadCustomParts("<meta property=\"og:url\" content=\"" + webHelper.GetThisPageUrl(false) + "\" />");
        NopHtml.AddHeadCustomParts("<meta property=\"og:site_name\" content=\"" + Html.Encode(Model.CurrentStoreName) + "\" />");
    }

    //Twitter META tags
    if (seoSettings.TwitterMetaTags)
    {
        NopHtml.AddHeadCustomParts("<meta property=\"twitter:card\" content=\"summary\" />");
        NopHtml.AddHeadCustomParts("<meta property=\"twitter:site\" content=\"" + Html.Encode(Model.CurrentStoreName) + "\" />");
        NopHtml.AddHeadCustomParts("<meta property=\"twitter:title\" content=\"" + Html.Encode(Model.Name) + "\" />");
        NopHtml.AddHeadCustomParts("<meta property=\"twitter:description\" content=\"" + Html.Encode(htmlFormatter.StripTags(Model.MetaDescription)) + "\" />");
        NopHtml.AddHeadCustomParts("<meta property=\"twitter:image\" content=\"" + Model.DefaultPictureModel.ImageUrl + "\" />");
        NopHtml.AddHeadCustomParts("<meta property=\"twitter:url\" content=\"" + webHelper.GetThisPageUrl(false) + "\" />");
    }
}
<!--product breadcrumb-->
<div class="breadcrumb-wrapper">
    @await Html.PartialAsync("_ProductBreadcrumb", Model.Breadcrumb)
</div>
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsAfterBreadcrumb, additionalData = Model })
<div class="page product-details-page">
    <div class="page-body">
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsTop, additionalData = Model })
        <form asp-route="Product" asp-route-sename="@Model.SeName" method="post" id="product-details-form">
            @if (seoSettings.MicrodataEnabled)
            {
                <script type="application/ld+json">
                    @Html.Raw(Model.JsonLd)
                </script>
            }
            <div data-productid="@Model.Id">
                <div class="product-essential">
                    <div class="row">
                        <div class="col-md-4">
                            @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsEssentialTop, additionalData = Model })
                            <div class="gallery">
                                <!--product pictures-->
                                @await Html.PartialAsync("_ProductDetailsPictures", Model)
                                <!--product videos-->
                                @await Html.PartialAsync("_ProductDetailsVideos", Model)
                            </div>
                        </div>
                        <div class="col-md-8">
                            @await Html.PartialAsync("_Discontinued", Model)
                            <div class="overview">
                                <div class="product-name panel-heading">
                                    <h1>
                                        @Model.Name
                                    </h1>
                                </div>
                                <!--short description-->
                                @if (!string.IsNullOrEmpty(Model.ShortDescription))
                                {
                                <div class="short-description">
                                    @Html.Raw(Model.ShortDescription)
                                </div>
                                }
                                @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsOverviewTop, additionalData = Model })
                                <!--product reviews-->
                                @await Html.PartialAsync("_ProductReviewOverview", Model.ProductReviewOverview)
                                <!--availability-->
                                @await Html.PartialAsync("_Availability", Model)
                                <!--product manufacturers-->
                                @await Html.PartialAsync("_ProductManufacturers", Model.ProductManufacturers)
                                <!--SKU, MAN, GTIN, vendor-->
                                @await Html.PartialAsync("_SKU_Man_GTIN_Ven", Model)
                                <!--delivery-->
                                @await Html.PartialAsync("_DeliveryInfo", Model)
                                <!--sample download-->
                                @await Html.PartialAsync("_DownloadSample", Model)
                                <!--rental info-->
                                @{
                                    var dataDictRental = new ViewDataDictionary(ViewData);
                                    dataDictRental.TemplateInfo.HtmlFieldPrefix = $"rental_{Model.Id}";
                                    @await Html.PartialAsync("_RentalInfo", Model, dataDictRental)
                                }
                                <!--product price-->
                                @{
                                    var dataDictPrice = new ViewDataDictionary(ViewData);
                                    dataDictPrice.TemplateInfo.HtmlFieldPrefix = $"price_{Model.Id}";
                                    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductPriceTop, additionalData = Model })
                                    @await Html.PartialAsync("_ProductPrice", Model.ProductPrice, dataDictPrice)
                                    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductPriceBottom, additionalData = Model })
                                }
                                <!--product attributes-->
                                @{
                                    var dataDictAttributes = new ViewDataDictionary(ViewData);
                                    dataDictAttributes.TemplateInfo.HtmlFieldPrefix = $"attributes_{Model.Id}";
                                    @await Html.PartialAsync("_ProductAttributes", Model, dataDictAttributes)
                                }
                                <!--gift card-->
                                @{
                                    var dataDictGiftCard = new ViewDataDictionary(ViewData);
                                    dataDictGiftCard.TemplateInfo.HtmlFieldPrefix = $"giftcard_{Model.Id}";
                                    @await Html.PartialAsync("_GiftCardInfo", Model.GiftCard, dataDictGiftCard)
                                }
                                <!--addtocart & estimate shipping -->
                                @{
                                    var dataDictAddToCart = new ViewDataDictionary(ViewData);
                                    dataDictAddToCart.TemplateInfo.HtmlFieldPrefix = $"addtocart_{Model.Id}";
                                    @await Html.PartialAsync("_AddToCart", Model.AddToCart, dataDictAddToCart)
                                    @await Html.PartialAsync("_ProductEstimateShipping", Model.ProductEstimateShipping)
                                }
                                <div class="overview-buttons">
                                    <!--wishlist, compare, email a friend-->
                                    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsInsideOverviewButtonsBefore, additionalData = Model })
                                    @{
                                        var dataDictAddToWishlist = new ViewDataDictionary(ViewData);
                                        dataDictAddToWishlist.TemplateInfo.HtmlFieldPrefix = $"addtocart_{Model.Id}";
                                        @await Html.PartialAsync("_AddToWishlist", Model.AddToCart, dataDictAddToWishlist)
                                    }
                                    @await Html.PartialAsync("_CompareProductsButton", Model)
                                    @await Html.PartialAsync("_ProductEmailAFriendButton", Model)
                                    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsInsideOverviewButtonsAfter, additionalData = Model })
                                </div>
                                @await Html.PartialAsync("_ShareButton", Model)
                                @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsOverviewBottom, additionalData = Model })
                            </div>
                        </div>
                        <div class="col-md-12 product-details-tabs">
                            <ul class="nav nav-tabs">
                                @if (!string.IsNullOrEmpty(Model.FullDescription))
                                {
                                <li class="active"><a href="#description" data-toggle="tab">@T("account.vendorinfo.description")</a></li>
                                }
                                @if (!string.IsNullOrEmpty(@Html.PartialAsync("_ProductSpecifications", Model).ToString()))
                                {
                                <li><a href="#specification" data-toggle="tab">@T("Products.Specs")</a></li>
                                }
                                @if (Model.ProductTags.Count > 0)
                                {
                                <li><a href="#tags" data-toggle="tab">@T("Products.Tags")</a></li>
                                }
                                @if (Model.TierPrices.Count > 0)
                                {
                                <li><a href="#tierprices" data-toggle="tab">@T("admin.catalog.products.tierprices")</a></li>
                                }
                            </ul>
                            <div class="tab-content">
                                @if (!string.IsNullOrEmpty(Model.FullDescription))
                                {
                                <div class="full-description tab-pane fade in active" id="description">
                                    @Html.Raw(Model.FullDescription)
                                </div>
                                }
                                <div class="product-specification tab-pane fade" id="specification">
                                    @await Html.PartialAsync("_ProductSpecifications", Model.ProductSpecificationModel)
                                </div>
                                <div class="product-tags tab-pane fade" id="tags">
                                    @await Html.PartialAsync("_ProductTags", Model.ProductTags)
                                </div>
                                <div class="product-tierprices tab-pane fade" id="tierprices">
                                    @await Html.PartialAsync("_ProductTierPrices", Model.TierPrices)
                                </div>
                                @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsEssentialBottom, additionalData = Model })
                            </div>
                        </div>
                    </div>
                </div>
                @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsBeforeCollateral, additionalData = Model })
                <div class="product-collateral">
                    <div class="row">
                        @await Component.InvokeAsync(typeof(ProductsAlsoPurchasedViewComponent), new { productId = Model.Id })
                        @await Component.InvokeAsync(typeof(RelatedProductsViewComponent), new { productId = Model.Id })
                    </div>
                </div>
            </div>
        </form>
        <!--product reviews-->
        @if (Model.ProductReviewOverview.AllowCustomerReviews)
        {
            @await Html.PartialAsync("_ProductReviews", Model.ProductReviews)
        }
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsBottom, additionalData = Model })
    </div>
</div>