<div id="verticalNavLayout" class="layout-pf layout-pf-fixed faux-layout">
    <pfng-vertical-navigation
        #pfVerticalNav
        [brandSrc]="resourceUrl + '/app/assets/img/keycloak-logo-min.png'"
        [contentContainer]="contentContainer"
        [items]="navigationItems"
        [persistentSecondary]="false"
        [pinnableMenus]="false"
        [showBadges]="true"
        [showIcons]="true"
        [updateActiveItemsOnClick]="true">

        <div>
            <ul class="nav navbar-nav navbar-right navbar-iconic">
                <li *ngIf="referrer.exists()">
                    <a class="nav-item-iconic" href="{{referrer.getUri()}}"><span class="pficon-arrow"></span> {{'backTo' | translate:referrer.getName()}}</a>
                </li>
                <li class="dropdown" >
                    <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <span title="Username" class="fa pficon-user"></span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                        <li><a href="#" (click)="logout()">{{'doSignOut' | translate}}</a></li>
                        <li *ngIf="isShowLocales()" class="dropdown-submenu pull-left">
                            <a class="test" tabindex="-1" href="#">Change language</a>
                            <ul class="dropdown-menu">
                                <li *ngFor="let locale of availableLocales" (click)="changeLocale(locale.locale)"><a tabindex="-1" href="#">{{ locale.label }}</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </pfng-vertical-navigation>

    <div #contentContainer
        class="container-fluid container-cards-pf container-pf-nav-pf-vertical example-page-container">
        <div class="row">
            <div class="col-sm-12">
                <inline-notification></inline-notification>
                <router-outlet></router-outlet>
            </div>
        </div>
    </div>

</div>
