<div class="header rcue">
    <div class="navbar utility">
        <div class="navbar-inner clearfix container">
            <h1><a href="#/"><strong>Keycloak</strong> Central Login</a></h1>
            <ul class="nav pull-right" data-ng-hide="auth.loggedIn">
                <li><a href="/auth/rest/admin/login?path={{fragment}}">Login</a></li>
                <li><a href="/auth/rest/admin/registrations">Register</a></li>
            </ul>
            <ul class="nav pull-right" data-ng-show="auth.loggedIn">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <span class="icon-user">Icon: user</span>{{auth.user.displayName}}<i class="caret"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="/auth/rest/realms/keycloak-admin/account">Manage Account</a></li>
                        <li class="separator"><a href="/auth/rest/admin/logout">Sign Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="navbar primary">
        <div class="navbar-inner clearfix container" data-ng-controller="RealmDropdownCtrl">
            <ul class="nav pull-left">
                <li>
                    <span class="dropdown-label" data-ng-show="showNav()">Realm:</span>
                    <div class="select-rcue" data-ng-show="showNav()">
                        <select ng-change="changeRealm()" ng-model="current.realm" ng-options="r.realm for r in current.realms"></select>
                    </div><a data-ng-click="refresh()" id="refresh" data-ng-show="showNav()" tooltip-placement="bottom" tooltip="Refresh"><span class="icon-spinner6">Icon: spinner</span></a>
                </li>
            </ul>
            <div class="pull-right" data-ng-show="auth.loggedIn">
                <a class="button primary" href="#/create/realm" data-ng-class="path[0] == 'create' && path[1] == 'realm' && 'active'"
                    data-ng-show="auth.loggedIn">Add Realm</a>
            </div>
        </div>
    </div>
</div>

<!-- TODO remove once this page is properly styled -->
<style type="text/css">
    .icon-spinner6 {
        cursor: pointer;
    }
</style>