@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
@using Dynamicweb.Frontend
@using Dynamicweb.Frontend.Navigation
@using Dynamicweb.Content
@using Dynamicweb.Ecommerce.Common
@using Dynamicweb.Security.UserManagement
@{
	int myAccountPageId = GetPageIdByNavigationTag("CustomerCenter") != 0 ? GetPageIdByNavigationTag("CustomerCenter") : Pageview?.ID ?? 0;
	if (Model.Item?.TryGetLink("MyAccountPage", out var linkPage) ?? false)
	{
		myAccountPageId = linkPage.PageId;
	}
}

<div class="nav-wrapper" data-swift-menu="@Model.ID">
	<div class="nav-item position-static">
		
		@if(Pageview?.User is null)
		{
			<a href="@(SearchEngineFriendlyURLs.GetFriendlyUrl(myAccountPageId))" class="hstack me-auto p-1 position-relative nav-link" role="button">
        
				<div class="btn btn-primary rounded-circle hstack justify-content-center p-0 me-2" style="height:2rem; aspect-ratio:1;" data-dw-button>
					@if ((Model.Item?.TryGetString("Icon", out var icon) ?? false) && icon.EndsWith(".svg", StringComparison.OrdinalIgnoreCase))
					{
						<span class="icon-2 pe-none">@ReadFile(icon)</span>
					}
				</div>

				@if (Model.Item?.TryGetString("Title", out string? title) ?? false)
				{
					<div class="text-nowrap">@title</div>
				}
				
			</a>
		}
		else 
		{
			<button type="button" class="nav-link text-decoration-underline-hover p-2 hstack" data-bs-toggle="offcanvas" data-bs-target="#offcanvas_@Model.ID" aria-controls="offcanvas_@Model.ID" aria-label="@Translate("Open navigation")">
				@RenderPartial("Users/UserView/Detail/UserAvatar.cshtml", ContentViewModelFactory.CreateUserViewModel(Pageview?.User))
			</button>
			
			<aside class="offcanvas offcanvas-end border-0" tabindex="-1" id="offcanvas_@Model.ID" data-dw-colorscheme="light">
		
				<div class="offcanvas-header">
					<h5 class="offcanvas-title">@(Model.Item.GetString("Title"))</h5>
					<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="@Translate("Close navigation")"></button>
				</div>

				<div class="offcanvas-body position-relative pt-0">
					
					@if (Pageview?.User is not null)
					{
						@RenderPartial("Users/UserView/Detail/UserInfo.cshtml", ContentViewModelFactory.CreateUserViewModel(Pageview?.User))
					}

					@{						
						var nav = Navigation.GetNavigationViewModel(new() {
							RootPageId = myAccountPageId,
							ExpandMode = ExpandMode.All
						});

						if(nav?.Nodes?.Any() ?? false)
						{
							<nav class="list-group gap-1 fs-7 pt-1" role="navigation" style="--bs-list-group-border-width: 0;">
								@foreach (var node in nav.Nodes)
								{
									await RenderNavItem(node, (nav.Nodes.Count(n => (n.Nodes.Any())) > 0));
								}
							</nav>
						}
					}
					
					<span class="border-top d-block mb-3"></span>
					<nav class="list-group gap-1 fs-7 pt-1" role="navigation" style="--bs-list-group-border-width: 0;">

						@if (UserContext.Current.ImpersonatingUser is not null)
						{
							<a href="Default.aspx?ID=@(Pageview?.ID ?? 0)&DwExtranetRemoveSecondaryUser=1" class="list-group-item list-group-item-action rounded hstack gap-2">
								<span class="icon-2">@ReadFile("/Files/Images/Icons/arrows-repeat.svg")</span>
								<span>
									@Translate("Switch back to") @(UserContext.Current.ImpersonatingUser.Name)
								</span>
							</a>
						}
						<a href="/Admin/Public/ExtranetLogoff.aspx?redirect=no" class="list-group-item list-group-item-action rounded hstack gap-2">
							<span class="icon-2">@ReadFile("/Files/Images/Icons/arrow-left-from-bracket.svg")</span>
							@Translate("Sign out")
						</a>
					</nav>

				</div>
			</aside>
		}	

	</div>
</div>

@{
	async Task RenderNavItem(NavigationTreeNodeViewModel node, bool isGroupNode = false)
	{
		var pageIcon = string.Empty;
		var nodePage = Dynamicweb.Content.Services.Pages.GetPage(node.PageId);
		if (nodePage?.PropertyItem?.TryGetValue("Icon", out object? pageIconValue) ?? false)
		{
			pageIcon = Dynamicweb.Core.Converter.ToString(pageIconValue);
		}
		bool isGroupHeader = isGroupNode && node.Nodes.Any();
		
		if (isGroupHeader)
		{
			<h6 class="fs-8 mb-2 text-muted mt-3 text-uppercase"><a class="text-muted @(node.IsClickable ? "text-decoration-underline" : "text-decoration-none") @(node.IsActive ? "active fw-bold" : null)" aria-current="@(node.IsActive)" href="@(node.IsClickable ? node.Link : null)">@(node.Name)</a></h6>
			
			foreach (var subnode in node.Nodes)
			{
				await RenderNavItem(subnode);
			}

			<span class="d-block mt-3"></span>			
		}
		
		else
		{
			<div class="list-group-item list-group-item-action hstack rounded @(node.IsActive || node.InPath ? "active" : null)" style="@(node.IsActive || node.InPath ? "z-index:initial;" : null)" @(node.Nodes.Any() ? $"x-data=\"{{ open: {(node.IsActive || node.InPath ? "true" : "false")} }}\"" : string.Empty)>

				<a class="hstack flex-fill text-decoration-none" aria-current="@(node.IsActive)" @(node.IsClickable ? $"href=\"{node.Link}\"" : null)>
					@if (pageIcon.EndsWith(".svg", StringComparison.OrdinalIgnoreCase))
					{
						<span class="icon-2 me-2">@ReadFile(pageIcon)</span>
					}
					<span class="@(!node.IsClickable ? "pe-none" : null)">@node.Name</span>
				</a>
				
				@if (node.Nodes.Any())
				{	
					<button class="btn btn-link hstack p-2 position-absolute end-0 top-50 translate-middle-y" data-dw-button type="button" @@click="open = ! open">
						<span class="icon-2">@ReadFile("/Files/Images/Icons/chevron-right.svg")</span>
					</button>

					<aside class="offcanvas offcanvas-end border-0" x-bind:class="open ? 'offcanvas-animate-in visible' : 'offcanvas-animate-out visible'" tabindex="-1" data-dw-colorscheme="light">
						<div class="offcanvas-header px-4 hstack justify-content-between">
							<button type="button" class="btn btn-link hstack p-2" data-dw-button @@click="open = ! open">
								<span class="icon-2">@ReadFile("/Files/Images/Icons/chevron-left.svg")</span>
							</button>
							<h5 class="offcanvas-title">@(node.Name)</h5>	
							<button type="button" class="btn-close ms-0" data-bs-dismiss="offcanvas" data-bs-target="#offcanvas_@(Model.ID)" aria-label="@Translate("Navigation close button")"></button>
						</div>
						<div class="offcanvas-body pt-0">
							<nav class="list-group gap-1 fs-7 rounded-0 pt-1" role="navigation" style="--bs-list-group-border-width: 0;">
								@foreach (var subnode in node.Nodes)
								{
									await RenderNavItem(subnode);
								}           
							</nav>
						</div>
					</aside>
				}
			</div>
		}

	}
}