<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">privacyIDEA</a>
        <button type="button" class="navbar-toggle"
                data-toggle="collapse" data-target=".myMainNavbar"
                aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <div class="navbar-collapse collapse myMainNavbar">
            <ul class="nav navbar-nav">
                <li ng-class="{active: $state.includes('token')}"
                    ng-hide="$state.includes('login')">
                    <a ui-sref="token">
                    <span class="glyphicon glyphicon-phone"
                          aria-hidden="true"></span>
                        Token View</a></li>
                <li ng-class="{active: $state.includes('user')}"
                    ng-show="loggedInUser.role == 'admin'">
                    <a ui-sref="user">
                    <span class="glyphicon glyphicon-user"
                          aria-hidden="true"></span>
                        User View</a></li>
                <li ng-class="{active: $state.includes('config')}"
                    ng-show="loggedInUser.role == 'admin'">
                    <a ui-sref="config">
                        <span class="glyphicon glyphicon-list"
                        <span class="glyphicon glyphicon-list"
                              aria-hidden="true"></span>
                        Config
                    </a>
                </li>
                <li ng-class="{active: $state.includes('audit')}"
                    ng-hide="$state.includes('login')">
                    <a ui-sref="audit">
                        <span class="glyphicon glyphicon-search"
                              aria-hidden="true"></span>
                        Audit
                    </a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a ui-sref="login" ng-hide="loggedInUser.username">Login</a>
                </li>
                <li>
                    <button ng-show="loggedInUser.username"
                            ng-click="logout()"
                            class="btn btn-sm btn-warning">
                        Logout
                        {{ loggedInUser.username }} @{{ loggedInUser.realm }}<br>
                    (Role: {{ loggedInUser.role }})</button>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="alert alert-danger" ng-show="showError">
    {{ restError.error.message }}
	<span class="glyphicon glyphicon-remove"
		ng-click="errorOK()"></span>
</div>
<div class="alert alert-warning" ng-show="logoutWarning">
	You will be logged out in {{ myCountdown }} second(s).
</div>
