<div class="well" ng-controller="userController">

    <div class="row">
        <div class="col-lg-3">
            <div class="pa-sidebar panel">
                <ul class="nav nav-pills nav-stacked"
                    ng-show="loggedInUser.role === 'user' &&
                        checkRight('userlist')">
                   <li role="presentation" ng-class=
                           "{active: $state.includes('user.password')}">
                       <a ui-sref="user.password">
                        <translate>Your details</translate>
                       </a>
                   </li>
                </ul>
                <ul class="nav nav-pills nav-stacked"
                    ng-show="loggedInUser.role == 'admin'">
                    <li role="presentation"
                        ng-class="{active: $state.includes('user.list')}"><a
                            ui-sref="user.list"
                            translate>All users</a> </li>
                    <li role="presentation"
                            ng-show="$state.includes('user.list')">
                            <translate>Select Realm</translate>
                        <select class="form-control"

                                ng-change="changeRealm()"
                                ng-model="selectedRealm">
                            <option ng-repeat="(realmname, realm) in realms"
                                    ng-selected="realm.default">{{ realmname }}</option>
                        </select>
                    </li>
                    <li role="presentation"
                        ng-class="{active: $state.includes('user.details')}"
                        ng-show="$state.includes('user.details')"><a>User
                    {{ $stateParams.username }}</a></li>
                    <li role="presentation"
                        ng-class="{active:$state.includes('user.add')}"
                            ng-show="checkRight('adduser')">
                        <a ui-sref="user.add"
                                translate>Add user
                        </a>
                    </li>
                    <li translate>Quick links</li>
                    <li>
                        <a ui-sref="config.realms.list"
                                translate>Edit realms</a>
                    </li>
                    <li translate>total users: {{ usercount }}</li>
                </ul>
            </div>

        </div>

        <div ui-view class="col-lg-9 slide panel">
        </div>
    </div>

</div>
