<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>
</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-file-cog", Path="/script-manager", Label = "Script Manager", Match = NavLinkMatch.All},
        new(){Icon = "mdi-file-code", Path="/script-editor", Label = "Script Editor", Match = NavLinkMatch.All},
        new(){Icon = "mdi-flag-checkered", Path="/missions", Label = "Missions", Match = NavLinkMatch.All},
        new(){Icon = "mdi-map-legend", Path="/navigation-maps", Label = "Maps", Match = NavLinkMatch.All},
        new(){Icon = "mdi-robot-mower", Path="/robots", Label = "Robots", Match = NavLinkMatch.All},
        new(){Icon = "mdi-robot-industrial", Path="/robots/model", Label = "Robot Models", Match = NavLinkMatch.All},
        new(){Icon = "mdi-monitor-eye", Path="/robots/monitor", Label = "Monitor", Match = NavLinkMatch.All},
        new(){Icon = "mdi-traffic-light", Path="/traffic-manager", Label = "Traffic", Match = NavLinkMatch.All},
        new(){Icon = "mdi-factory", Path="/open-acs", Label = "Open ACS", Match = NavLinkMatch.All},
        new(){Icon = "mdi-math-log", Path="/logs", Label = "Logs", Match = NavLinkMatch.All},
        new(){Icon = "mdi-account", Path="/user", Label = "User", Match = NavLinkMatch.All},
    ];

    private bool collapseNavMenu = true;

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

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