<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <a class="navbar-brand" ui-sref="token.list">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-show="loggedInUser.role">
                    <a ui-sref="token.list">
                    <span class="glyphicon glyphicon-phone"
                          aria-hidden="true"></span>
                        <translate>Tokens</translate></a></li>
                <li ng-class="{active: $state.includes('user')}"
                    ng-show="loggedInUser.role == 'admin'">
                    <a ui-sref="user.list">
                    <span class="glyphicon glyphicon-user"
                          aria-hidden="true"></span>
                        <translate>Users</translate></a></li>
                <li ng-class="{active: $state.includes('user')}"
                    ng-show="loggedInUser.role == 'user'">
                    <a ui-sref="user.password">
                    <span class="glyphicon glyphicon-user"
                          aria-hidden="true"></span>
                        <translate>User</translate></a></li>
                <li ng-class="{active: $state.includes('machine')}"
                    ng-show="loggedInUser.role == 'admin'">
                    <a ui-sref="machine.list">
                    <span class="glyphicon glyphicon-tasks"
                          aria-hidden="true"></span>
                        <translate>Machines</translate></a></li>
                <li ng-class="{active: $state.includes('config')}"
                    ng-show="loggedInUser.role == 'admin'">
                    <a ui-sref="config.system">
                        <span class="glyphicon glyphicon-cog"
                              aria-hidden="true"></span>
                        <translate>Config</translate>
                    </a>
                </li>
                <li ng-class="{active: $state.includes('audit')}"
                    ng-show="loggedInUser.role">
                    <a ui-sref="audit">
                        <span class="glyphicon glyphicon-search"
                              aria-hidden="true"></span>
                        <translate>Audit</translate>
                    </a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a ui-sref="login" ng-hide="loggedInUser.username" translate
                        >Login</a>
                </li>
                <li>
                    <button ng-show="loggedInUser.username"
                            ng-click="logout()"
                            class="btn btn-sm btn-warning">
                        <translate>Logout
                        {{ loggedInUser.username }} @{{ loggedInUser.realm }}
                        </translate>
                        <br>
                    (<translate>Role</translate>: {{ loggedInUser.role }})
                    </button>
                </li>
            </ul>
        </div>
    </div>
</div>

<div inform class="inform-fixed inform-shadow"></div>

<div class="alert alert-warning" ng-show="logoutWarning" translate>
	You will be logged out in {{ myCountdown }} second(s).
</div>
