@model CategoryModel
@using Nop.Core.Domain.Catalog
@using Nop.Core.Domain.Common
@using Nop.Core.Domain.Seo
@inject Nop.Core.IWebHelper webHelper
@inject SeoSettings seoSettings
@inject CommonSettings commonSettings
@{
    Layout = "_ColumnsTwo";

    //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-category-page");

    if (seoSettings.CanonicalUrlsEnabled)
    {
        var categoryUrl = Url.RouteUrl<Category>(new { SeName = Model.SeName }, webHelper.GetCurrentRequestProtocol()).ToLowerInvariant();
        NopHtml.AddCanonicalUrlParts(categoryUrl, seoSettings.QueryStringInCanonicalUrlsEnabled);
    }

    var breadcrumbDelimiter = commonSettings.BreadcrumbDelimiter;
}
@*category breadcrumb*@
@if (Model.DisplayCategoryBreadcrumb)
{
    <div class="breadcrumb-wrapper">
        <ul class="breadcrumb">
            <li>
                <a href="@Url.RouteUrl("Homepage")" title="@T("Categories.Breadcrumb.Top")"><i class="fa fa-home"></i></a>
                @*<span class="delimiter">@breadcrumbDelimiter</span> </li>*@
                @{ int position = 1; }
                @foreach (var cat in Model.CategoryBreadcrumb)
                {
                    var isLastCategory = cat.Id == Model.Id;
                    <li>
                        @if (isLastCategory)
                        {
                            <strong class="current-item active">@cat.Name</strong>
                            <span id="@(Url.RouteUrl<Category>(new { SeName = cat.SeName }))"></span>
                        }
                        else
                        {
                            <a href="@(Url.RouteUrl<Category>(new { SeName = cat.SeName }))" title="@cat.Name"><span>@cat.Name</span></a>
                            @*<span class="delimiter">@breadcrumbDelimiter</span>*@
                        }
                    </li>
                    position++;
                }
        </ul>
        @if (seoSettings.MicrodataEnabled)
        {
            <script type="application/ld+json">
                @Html.Raw(Model.JsonLd)
            </script>
        }
    </div>
    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsAfterBreadcrumb, additionalData = Model })
}
@section CatalogFilters {
    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsBeforeFilters, additionalData = Model })@await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.CategoryDetailsTop, additionalData = Model })
    @await Html.PartialAsync("_CatalogFilters", Model.CatalogProductsModel)
}
<div class="page category-page">
    <div class="page-title panel-heading">
        <h1>@Model.Name</h1>
    </div>
    <div class="page-body">
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsTop, additionalData = Model })
        @*description*@
        @if (!string.IsNullOrWhiteSpace(Model.Description))
        {
            <div class="category-description">
                @Html.Raw(Model.Description)
            </div>
        }
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsBeforeSubcategories, additionalData = Model })
        @*subcategories*@
        @if (Model.SubCategories.Count > 0)
        {
            <div class="sub-category-grid row">
                @if (Model.SubCategories.Count <= 3)
                {
                    foreach (var item in Model.SubCategories)
                    {
                        <div class="item-box col-xs-12 col-sm-4 col-md-4">
                            <div class="sub-category-item product-category-item">
                                <div class="picture">
                                    <a href="@Url.RouteUrl("Category", new { SeName = item.SeName })" title="@item.PictureModel.Title" class="product-img">
                                        <img alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl" title="@item.PictureModel.Title" />
                                    </a>
                                    <div class="title">
                                        <a href="@(Url.RouteUrl<Category>(new { SeName = item.SeName }))" title="@item.PictureModel.Title"> @item.Name</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                }
                else
                {
                    <div id="sub-category-slider" class="sub-category-slider owl-carousel owl-theme">
                        @foreach (var item in Model.SubCategories)
                        {
                            <div class="item-box col-xs-12 col-sm-12 col-md-12">
                                <div class="sub-category-item product-category-item">
                                    <div class="picture">
                                        <a href="@Url.RouteUrl("Category", new { SeName = item.SeName })" title="@item.PictureModel.Title" class="product-img">
                                            <img class="owl-lazy" data-src="@item.PictureModel.ImageUrl" alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl" title="@item.PictureModel.Title" />
                                        </a>
                                        <div class="title">
                                            <a href="@(Url.RouteUrl<Category>(new { SeName = item.SeName }))" title="@item.PictureModel.Title"> @item.Name</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        }
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsBeforeFeaturedProducts, additionalData = Model })
        @*featured products*@
        @if (Model.FeaturedProducts.Count > 0)
        {
            <div class="featured-product-grid">
                <div class="page-title panel-heading">
                    <h1>@T("Products.FeaturedProducts")</h1>
                </div>
                <div class="product-grid">
                    <div class="row item-grid">
                        @foreach (var item in Model.FeaturedProducts)
                        {
                            <div class="item-box col-xs-12 col-sm-4 col-md-4 product-align">
                                <div class="thumbnail">
                                    @await Html.PartialAsync("_ProductBox", item)
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        }
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsAfterFeaturedProducts, additionalData = Model })
        @await Html.PartialAsync("_CatalogSelectors", Model.CatalogProductsModel)
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsBeforeProductList, additionalData = Model })
        @*product grid and list*@
        <div class="pager clearfix">
            @{
                var catalogProductsViewData = new ViewDataDictionary(ViewData);
                catalogProductsViewData["fetchUrl"] = Html.Raw(Url.RouteUrl("GetCategoryProducts", new { categoryId = Model.Id }));
            }
            @await Html.PartialAsync("_CatalogProducts", Model.CatalogProductsModel, catalogProductsViewData)
            @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsBottom, additionalData = Model })
        </div>
    </div>
</div>
