<clr-main-container>
    <app-app-level-alerts></app-app-level-alerts>
    <navigator
        (showAccountSettingsModal)="openModal($event)"
        (showDialogModalAction)="openModal($event)"></navigator>
    <div class="content-container">
        <div
            #scrollDiv
            class="content-area"
            [class.container-override]="showSearch"
            [class.content-area-override]="!shouldOverrideContent"
            [class.start-content-padding]="shouldOverrideContent"
            (scroll)="publishScrollEvent()">
            <global-message class="global-msg"></global-message>
            <!-- Only appear when searching -->
            <search-result></search-result>
            <router-outlet></router-outlet>
        </div>
        <clr-vertical-nav
            [clrVerticalNavCollapsible]="true"
            *ngIf="isUserExisting">
            <div>
                <a
                    clrVerticalNavLink
                    routerLinkActive="active"
                    routerLink="/harbor/projects">
                    <clr-icon
                        shape="organization"
                        clrVerticalNavIcon></clr-icon>
                    {{ 'SIDE_NAV.PROJECTS' | translate }}
                </a>
                <a
                    clrVerticalNavLink
                    routerLinkActive="active"
                    routerLink="/harbor/logs">
                    <clr-icon shape="list" clrVerticalNavIcon></clr-icon>
                    {{ 'SIDE_NAV.LOGS' | translate }}
                </a>
                <clr-vertical-nav-group
                    *ngIf="isSystemAdmin"
                    routerLinkActive="active">
                    <clr-icon
                        shape="administrator"
                        clrVerticalNavIcon></clr-icon>
                    {{ 'SIDE_NAV.SYSTEM_MGMT.NAME' | translate }}
                    <a routerLink="#" hidden aria-hidden="true"></a>
                    <clr-vertical-nav-group-children *clrIfExpanded="true">
                        <a
                            clrVerticalNavLink
                            routerLink="/harbor/users"
                            routerLinkActive="active">
                            <clr-icon
                                shape="users"
                                clrVerticalNavIcon></clr-icon>
                            {{ 'SIDE_NAV.SYSTEM_MGMT.USER' | translate }}
                        </a>
                        <a
                            clrVerticalNavLink
                            routerLink="/harbor/robot-accounts"
                            routerLinkActive="active">
                            <clr-icon
                                shape="robot-head"
                                clrVerticalNavIcon></clr-icon>
                            {{ 'SYSTEM_ROBOT.ROBOT_ACCOUNT_NAV' | translate }}
                        </a>
                        <a
                            *ngIf="!isDBAuth()"
                            clrVerticalNavLink
                            routerLink="/harbor/groups"
                            routerLinkActive="active">
                            <clr-icon
                                shape="users"
                                clrVerticalNavIcon></clr-icon>
                            {{ 'SIDE_NAV.SYSTEM_MGMT.GROUP' | translate }}
                        </a>
                        <a
                            clrVerticalNavLink
                            routerLink="/harbor/registries"
                            routerLinkActive="active">
                            <clr-icon
                                shape="block"
                                clrVerticalNavIcon></clr-icon>
                            {{ 'SIDE_NAV.SYSTEM_MGMT.REGISTRY' | translate }}
                        </a>
                        <a
                            clrVerticalNavLink
                            routerLink="/harbor/replications"
                            routerLinkActive="active">
                            <clr-icon
                                shape="cloud-traffic"
                                clrVerticalNavIcon></clr-icon>
                            {{ 'SIDE_NAV.SYSTEM_MGMT.REPLICATION' | translate }}
                        </a>
                        <a
                            clrVerticalNavLink
                            routerLink="/harbor/distribution/instances"
                            routerLinkActive="active">
                            <clr-icon
                                shape="share"
                                clrVerticalNavIcon></clr-icon>
                            {{ 'SIDE_NAV.DISTRIBUTIONS.NAME' | translate }}
                        </a>
                        <a
                            clrVerticalNavLink
                            routerLink="/harbor/labels"
                            routerLinkActive="active">
                            <clr-icon shape="tag" clrVerticalNavIcon></clr-icon>
                            {{ 'CONFIG.LABEL' | translate }}
                        </a>
                        <a
                            clrVerticalNavLink
                            routerLink="/harbor/project-quotas"
                            routerLinkActive="active">
                            <clr-icon
                                shape="resource-pool"
                                clrVerticalNavIcon></clr-icon>
                            {{ 'CONFIG.PROJECT_QUOTAS' | translate }}
                        </a>
                        <a
                            clrVerticalNavLink
                            routerLink="/harbor/interrogation-services"
                            routerLinkActive="active">
                            <clr-icon
                                shape="shield"
                                clrVerticalNavIcon></clr-icon>
                            {{
                                'SIDE_NAV.SYSTEM_MGMT.INTERROGATION_SERVICES'
                                    | translate
                            }}
                        </a>
                        <a
                            clrVerticalNavLink
                            *ngIf="hasAdminRole"
                            routerLink="/harbor/clearing-job"
                            routerLinkActive="active">
                            <clr-icon
                                shape="trash"
                                clrVerticalNavIcon></clr-icon>
                            {{ 'CLEARANCES.CLEARANCES' | translate }}
                        </a>
                        <a
                            clrVerticalNavLink
                            *ngIf="hasAdminRole"
                            routerLink="/harbor/job-service-dashboard"
                            routerLinkActive="active">
                            <clr-icon
                                shape="dashboard"
                                clrVerticalNavIcon></clr-icon>
                            {{
                                'JOB_SERVICE_DASHBOARD.JOB_SERVICE_DASHBOARD'
                                    | translate
                            }}
                        </a>
                        <a
                            clrVerticalNavLink
                            routerLinkActive="active"
                            routerLink="/harbor/configs">
                            <clr-icon shape="cog" clrVerticalNavIcon></clr-icon>
                            {{ 'SIDE_NAV.SYSTEM_MGMT.CONFIG' | translate }}
                        </a>
                    </clr-vertical-nav-group-children>
                </clr-vertical-nav-group>
            </div>
            <div class="mb-1">
                <ng-container *ngFor="let theme of themeArray; let i = index">
                    <ng-container *ngIf="theme.showStyle === styleMode">
                        <a
                            class="pointer"
                            clrVerticalNavLink
                            (click)="themeChanged(theme)">
                            <clr-icon
                                clrVerticalNavIcon
                                size="20"
                                *ngIf="styleMode === 'DARK'"
                                shape="sun"
                                class="is-solid"></clr-icon>
                            <clr-icon
                                clrVerticalNavIcon
                                size="20"
                                *ngIf="styleMode === 'LIGHT'"
                                shape="moon"
                                class="is-solid"></clr-icon>
                            {{ theme.text | translate }}
                        </a>
                    </ng-container>
                </ng-container>
                <a
                    rel="noopener noreferrer"
                    clrVerticalNavLink
                    routerLinkActive="active"
                    target="_blank"
                    routerLink="/devcenter-api-2.0">
                    <clr-icon
                        shape="network-globe"
                        clrVerticalNavIcon></clr-icon>
                    {{ 'SIDE_NAV.HARBOR_API_MANAGEMENT' | translate }}
                </a>
            </div>
        </clr-vertical-nav>
        <hbr-operation-model *ngIf="isUserExisting"></hbr-operation-model>
    </div>
</clr-main-container>
<account-settings-modal></account-settings-modal>
<preference-settings></preference-settings>
<password-setting></password-setting>
<global-confirmation-dialog></global-confirmation-dialog>
<about-dialog></about-dialog>
