@model MenuItemCategoryModel

@{
    var areCategoriesInASingleItem = Model.Item.EntityId == 0;
    var hasSubCategories = Model.Categories.Count > 0;
    var hasSublistClass = hasSubCategories ? "has-sublist" : string.Empty;
    var withSubcategoriesClass = hasSubCategories ? "with-subcategories" : string.Empty;
}

<li class="@hasSublistClass @Model.Item.CssClass">

    @if (areCategoriesInASingleItem)
    {
        <span class="@withSubcategoriesClass single-item-categories labelfornextplusbutton">@Model.Item.Title</span>
    }
    else
    {
        <a class="@withSubcategoriesClass" href="@Model.Item.Url"><span>@Model.Item.Title</span></a>
    }

    @if (hasSubCategories)
    {
        <div class="plus-button"></div>
        <div class="sublist-wrap">
            <ul class="sublist">
                <li class="back-button">
                    <span>@T("SevenSpikes.MegaMenu.ResponsiveBackButton")</span>
                </li>
                @await Component.InvokeAsync("MegaMenuListSubCategories", new { subCategories = Model.Categories })
            </ul>
            @if (areCategoriesInASingleItem)
            {
                @await Component.InvokeAsync("Widget", new { widgetZone = "mega_menu_categories_before_dropdown_end" })
            }
            else
            {
                @await Component.InvokeAsync("Widget", new { widgetZone = $"mega_menu_categories_before_dropdown_end_{Model.CategoryMenuItemIndex}" })
            }
        </div>
    }

</li>