@inherits LayoutComponentBase

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

<div class="app-shell">
    <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" 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>

    <main class="page">
        @Body
    </main>
</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},
        new(){Icon = "mdi-application-cog", Path="/robot-config", Label = "Config", Match = NavLinkMatch.All},
    ];

    private bool collapseNavMenu = true;

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

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