<div class="navbar-container">
    <div class="navbar-logo">
        <a [routerLink]="dashboardPath">
            <h1>Peek Admin Dashboard</h1>
        </a>
    </div>

    <ul nz-menu nzMode="horizontal" nzTheme="dark">
        <li
            nz-menu-item
            [routerLink]="dashboardPath"
            [routerLinkActiveOptions]="{ exact: true }"
            routerLinkActive="ant-menu-item-selected"
        >
            <span nz-icon nzType="dashboard"></span>
            <span>Dashboard</span>
        </li>

        <li nz-menu-item>
            <a href="/docs/index.html" target="_blank">
                <span nz-icon nzType="question-circle"></span>
                <span>Documentation</span>
            </a>
        </li>

        <li nz-submenu nzTitle="Platform" nzIcon="appstore">
            <ul>
                <li
                    nz-menu-item
                    *ngFor="let item of platformMenuData"
                    [routerLink]="item.resourcePath"
                    routerLinkActive="ant-menu-item-selected"
                >
                    {{ item.title }}
                </li>
            </ul>
        </li>

        <li nz-submenu nzTitle="Plugins" nzIcon="api">
            <ul>
                <li
                    nz-menu-item
                    *ngFor="let item of pluginsMenuData"
                    [routerLink]="item.resourcePath"
                    routerLinkActive="ant-menu-item-selected"
                >
                    {{ item.title }}
                </li>
            </ul>
        </li>
    </ul>

    <div class="navbar-right">
        <nz-alert
            *ngIf="!vortexIsOnline"
            nzType="error"
            nzMessage="Offline"
            [nzIcon]="offlineIcon"
        ></nz-alert>
        <ng-template #offlineIcon>
            <span nz-icon nzType="disconnect"></span>
        </ng-template>

        <div class="version-info">
            <span>v{{ appVersion }}</span>
        </div>

        <button
            nz-button
            nzType="text"
            nzGhost
            nz-dropdown
            [nzDropdownMenu]="menu"
            nzPlacement="bottomRight"
            nzTrigger="click"
        >
            <div class="user-dropdown-trigger">
                <span nz-icon nzType="user"></span>
                <span>{{ user.username }}</span>
                <span nz-icon nzType="down"></span>
            </div>
        </button>
        <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu>
                <li nz-menu-item (click)="logoutClicked()">
                    <span nz-icon nzType="logout"></span>
                    <span>Logout</span>
                </li>
            </ul>
        </nz-dropdown-menu>
    </div>
</div>
