@model MenuModel
@await Component.InvokeAsync("Widget", new { widgetZone = "header_menu_before" })
@if (Model.DisplayHomePageMenu)
{
    <li>
        <a href="@Url.RouteUrl("HomePage")">
            <span class="title">@Loc["HomePage"]</span>
        </a>
    </li>
}
@{
    var rootCategories = Model.Categories.ToList();
}
@foreach (var category in rootCategories)
{
    var categoryLineModel = new MenuModel.CategoryLineModel
    {
        Category = category
    };
    <partial name="Components/Menu/Partials/CategoryLine.Menu" model="categoryLineModel" />
}

@foreach (var mpage in Model.Pages)
{
    <li>
        <a href="@Url.RouteUrl("Page", new { SeName=mpage.SeName })">
            <span class="title">@mpage.Name</span>
        </a>
    </li>
}
@if (Model.Brands.Any())
{

    <li class="-hasSubmenu" text="@Loc["Brands.Menu"]">
        <a href="#">
            <span class="title">@Loc["Brands.Menu"]</span>
        </a>
        <ul>
            <li class="back">
                <a>
                    <b-icon icon="chevron-left"></b-icon>
                    <span>@Loc["Mobile.Categories.Back"]</span>
                </a>
            </li>
            <li class="sub-cat-name-container">
                <a class="text-info" href="@Url.RouteUrl("BrandList")">
                    <span>@Loc["Mobile.Category.Show"] @Loc["Brands.List"]</span>
                </a>
            </li>
            @foreach (var brand in Model.Brands)
            {
                <li>
                    <a href="@Url.RouteUrl("Brand", new { SeName = brand.SeName })">
                        <span class="title">@brand.Name</span>
                        @if (!string.IsNullOrEmpty(brand.Icon))
                        {
                            <span class="category-icon @brand.Icon"></span>
                        }

                    </a>
                </li>
            }
        </ul>
    </li>
}
@if (Model.Collections.Any())
{

    <li class="-hasSubmenu" text="@Loc["Collections.Menu"]">
        <a href="#">
            <span class="title">@Loc["Collections.Menu"]</span>
        </a>
        <ul>
            <li class="back">
                <a>
                    <b-icon icon="chevron-left"></b-icon>
                    <span>@Loc["Mobile.Categories.Back"]</span>
                </a>
            </li>
            <li class="sub-cat-name-container">
                <a class="text-info" href="@Url.RouteUrl("CollectionList")">
                    <span>@Loc["Mobile.Category.Show"] @Loc["Collections.List"]</span>
                </a>
            </li>
            @foreach (var collect in Model.Collections)
            {
                <li>
                    <a href="@Url.RouteUrl("Collection", new { SeName = collect.SeName })">
                        <span class="title">@collect.Name</span>
                        @if (!string.IsNullOrEmpty(collect.Icon))
                        {
                            <span class="category-icon @collect.Icon"></span>
                        }

                    </a>
                </li>
            }
        </ul>
    </li>
}
@if (Model.DisplaySearchMenu | Model.DisplayNewProductsMenu | Model.DisplayCustomerMenu | Model.DisplayBlogMenu | Model.DisplayContactUsMenu)
{
    @if (Model.NewProductsEnabled && Model.DisplayNewProductsMenu)
    {
        <li>
            <a href="@Url.RouteUrl("NewProducts")">
                <span class="title">@Loc["Products.NewProducts"]</span>
            </a>
        </li>
    }
    @if (Model.DisplaySearchMenu)
    {
        <li>
            <a href="@Url.RouteUrl("ProductSearch")">
                <span class="title">@Loc["Search"]</span>
            </a>
        </li>
    }
    @if (Model.DisplayCustomerMenu)
    {
        <li>
            <a href="@Url.RouteUrl("CustomerInfo")">
                <span class="title">@Loc["Account.MyAccount"]</span>
            </a>
        </li>
    }
    @if (Model.BlogEnabled && Model.DisplayBlogMenu)
    {
        <li>
            <a href="@Url.RouteUrl("Blog")">
                <span class="title">@Loc["Blog"]</span>
            </a>
        </li>
    }
    @if (Model.DisplayContactUsMenu)
    {
        <li>
            <a href="@Url.RouteUrl("ContactUs")">
                <span class="title">@Loc["ContactUs"]</span>
            </a>
        </li>
    }
}
@await Component.InvokeAsync("Widget", new { widgetZone = "header_menu_after" })

@{
    var rootCategoriesResponsive = Model.Categories.ToList();
    //name it "Categories" if we have only categories. Otherwise, "Menu"
    var responsiveMenuTitle = (rootCategoriesResponsive.Any() && Model.Pages.Any()) ? Loc["Categories"] : Loc["Menu"];
}
