<div id="wrapper" class="container">
    <div class="row">
        <aside class="span3" data-ng-include data-src="'partials/' + path[0].slice(0, -1) + '-menu.html'"></aside>

        <div id="actions-bg"></div>

        <div id="container-right" class="span9">
            <h1>
                <span class="gray" data-ng-hide="create">{{realm.name}}</span> role mapping
            </h1>

            <ul class="nav nav-tabs">
                <li data-ng-class="path[3] == r && 'active'" data-ng-repeat="r in (realm.roles|orderBy:'toString()')"><a
                        href="#/{{path[0]}}/{{realm.id}}/roles/{{r}}">{{r}}</a></li>
            </ul>

            <div data-ng-show="role">
                <select style="width: auto;" id="realm" name="realm" data-ng-model="newUser" data-ng-click="addUser(u)">
                    <option data-ng-repeat="u in (allUsers|remove:users:'userId')" value="{{u.userId}}">{{u.userId}}
                    </option>
                </select>

                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th>Username</th>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Email</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tr data-ng-repeat="user in users">
                        <td>{{user.userId}}</td>
                        <td>{{user.firstName}}</td>
                        <td>{{user.lastName}}</td>
                        <td>{{user.email}}</td>
                        <td>
                            <button data-ng-click="removeUser(user.userId)">
                                <i class="icon-remove"></i>
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div id="container-right-bg"></div>
    </div>
</div>