@using Microsoft.AspNetCore.Components.Routing

<script>
    function toggleSidebar() {
        let sidebar = document.querySelector(".sidebar");
        sidebar.classList.toggle("collapsed");
    }
</script>

<div class="sidebar collapsed">
    <div class="flex-grow-1 d-flex flex-column">
        <div class="title">
            <img src="images/logoLight.svg" alt="PhenikaaX" style="height: 35px;" onclick="toggleSidebar()" />
            <button class="btn button" onclick="toggleSidebar()">
                <i class="mdi mdi-menu" style="color: white; font-size: 35px"></i>
            </button>
        </div>
        <hr />
        @foreach (var nav in Navs)
        {
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="@nav.Path" Match="@nav.Match">
                    <div class="d-flex align-items-center">
                        <div class="nav-icon">
                            <span class="mdi @nav.Icon mdi-36px" aria-hidden="true"></span>
                        </div>
                        <span class="nav-label">@nav.Label</span>
                    </div>
                </NavLink>
            </div>
        }
    </div>
    <div class="user">
        <div>
            <span class="mdi mdi-account mdi-36px text-white "></span>
        </div>
        <AuthorizeView>
            <Authorized>
                <div class="nav-label">
                    <MudText Class="text-white name" Typo="Typo.subtitle1">@context.User.Identity?.Name</MudText>
                </div>
            </Authorized>
        </AuthorizeView>
        <MudSpacer />
        <form action="Account/Logout" method="post">
            <AntiforgeryToken />
            <input type="hidden" name="ReturnUrl" value="" />
            <button class="btn button">
                <i class="mdi mdi-logout" style="color: white; font-size: 35px"></i>
            </button>
            @* <MudIconButton Class="text-white" ButtonType="@ButtonType.Submit" Icon="@Icons.Material.Filled.Logout" /> *@
        </form>
    </div>
</div>

@code {
    public class NavModel
    {
        public string Icon { get; set; } = "";
        public string Path { get; set; } = "";
        public string Label { get; set; } = "";
        public NavLinkMatch Match { get; set; }
    }

    public NavModel[] Navs = [
        new(){Icon = "mdi-view-dashboard", Path="/", Label = "Dashboard", Match = NavLinkMatch.All},
        new(){Icon = "mdi-map-legend", Path="/Maps-manager", Label = "Mapping", Match = NavLinkMatch.All},
    ];

    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}