<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#/">
        <img data-ng-src="{{resourceUrl + '/img/brand.svg'}}" alt="Keycloak" />
    </a>
</div>
<div class="collapse navbar-collapse navbar-collapse-1">
    <ul class="nav navbar-nav navbar-utility">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                {{auth.user.displayName|capitalize}} <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="{{authUrl}}/realms/{{auth.user.realm}}/account?referrer=security-admin-console">Manage Account</a></li>
                <li><a href="#/server-info">Server Info</a></li>
                <li class="divider"></li>
                <li><a href="" ng-click="auth.authz.logout()">Sign Out</a></li>
            </ul>
        </li>
    </ul>

    <ul class="nav navbar-nav navbar-primary" data-ng-controller="RealmDropdownCtrl">
        <li class="dropdown" data-ng-show="current.realm.realm">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                {{current.realm.realm|capitalize}}
                <b class="caret" data-ng-show="current.realms.length > 1"></b>
            </a>
            <ul class="dropdown-menu" data-ng-show="current.realms.length > 1">
                <li data-ng-repeat="realm in current.realms" data-ng-if="realm.realm != current.realm.realm">
                    <a href="" ng-click="changeRealm(realm.realm)">{{realm.realm|capitalize}}</a>
                </li>
            </ul>
        </li>
        <li class="dropdown" data-ng-show="!current.realm.realm">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Select realm...
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li data-ng-repeat="realm in current.realms">
                    <a href="" ng-click="changeRealm(realm.realm)">{{realm.realm}}</a>
                </li>
            </ul>
        </li>

        <li class="pull-right" data-ng-show="auth.user && access.createRealm">
            <a class="button primary" href="#/create/realm" data-ng-class="path[0] == 'create' && path[1] == 'realm' && 'active'"
               data-ng-show="auth.user">Add Realm</a>
        </li>
    </ul>
</div>