@using PlanTempus.Application.Features.Menu
@model SideMenuViewModel

<swp-side-menu>
    <swp-side-menu-header>
        <i class="ph ph-squares-four"></i>
        <swp-side-menu-logo localize="sidebar.appName">Salon OS</swp-side-menu-logo>
        <swp-menu-toggle id="menuToggle">
            <i class="ph ph-caret-left"></i>
        </swp-menu-toggle>
    </swp-side-menu-header>

    <swp-side-menu-nav>
        @foreach (var group in Model.Groups)
        {
            <swp-side-menu-group>
                <swp-side-menu-label>@group.Label</swp-side-menu-label>
                @foreach (var item in group.Items)
                {
                    <a href="@item.Url" is="swp-side-menu-item"
                       data-active="@(item.IsActive ? "true" : "false")"
                       data-tooltip="@item.Label">
                        <i class="ph @item.Icon"></i>
                        <span>@item.Label</span>
                    </a>
                }
            </swp-side-menu-group>
        }
    </swp-side-menu-nav>

    <swp-side-menu-footer>
        <swp-side-menu-action class="lock" id="lockScreen" title="Lås skærm">
            <i class="ph ph-lock"></i>
            <span localize="sidebar.lockScreen">Lås skærm</span>
        </swp-side-menu-action>
    </swp-side-menu-footer>
</swp-side-menu>

<!-- Tooltip for collapsed menu -->
<span id="menuTooltip" class="swp-menu-tooltip" popover="manual"></span>