<div class="iba-page-header">
        <div class="row nonothing">
            <div class="col-md-10 col-sm-10" style="padding-left:0px;">
                <h2 style="font-family:titillium_bold;">USERS</h2>
            </div>
            <div class="col-md-2 col-sm-2 text-right page-toolbar">
                <a title="Add Data Source" data-ng-click="addUser()" class=" btn btn-primary "><i
                        class="fa fa-plus"></i>&nbsp;ADD USER
                </a>
            </div>
        </div>


    </div>


    <div class="row nonothing">
        <div class="col-md-3">
            <ul class="list-group" style="cursor:pointer">
                <li data-ng-class="user.username == user_item.username ? 'active' : ''" data-ng-show="!user.isNew" data-ng-click="loadUser();" class="list-group-item" data-ng-repeat="user_item in users track by $index">
                    {{user_item.username}}
                </li>
                <li data-ng-class="user.username == user_item.username ? 'active' : ''" data-ng-show="user.isNew" data-ng-click="confirm();" class="list-group-item" data-ng-repeat="user_item in users track by $index">
                        {{user_item.username}}
                </li>
            </ul>
            <!--<div data-ng-show="user"><button title="Add Role" data-ng-click="addUser()" class="btn btn-primary pull-right"><i class="fa fa-plus"></i>&nbspAdd User</button></div>-->
        </div>
        <div class="col-md-9">
                <div class="basic-info">
                    <div data-ng-hide="user.isDefault">
                        <div data-ng-show="!user.isNew || roles.length==0"><h3>User: {{user.username}}</h3></div>
                        <div data-ng-show="user.isNew">
                            <h3>Register new user</h3>
                            <div class="form-group">
                                <label>Username : </label>
                                <input type="text" class="form-control" data-ng-model="user.username">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Email : </label>
                            <input type="email" data-ng-model="user.email" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label>First Name : </label>
                            <input type="firstName" data-ng-model="user.firstName" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label>Last Name : </label>
                            <input type="lastName" data-ng-model="user.lastName" class="form-control" />
                        </div>

                        <div><h3 class="titi-bold">Drag & Drop to Move Roles :</h3></div>

                        <div class="row">
                            <!--<multiselect data-ng-model="user.role" options="roles" show-search="true" id-prop="SOURCE_NAME" display-prop="SOURCE_NAME" search-limit="100"></multiselect>-->
                            <div class="col-md-6">
                                <table class="table table-striped" show-filter="true">
                                    <tr style="background-color:#2196F3; color:#ffffff">
                                        <th>Roles not member of:</th>
                                    </tr>
                                    <tbody dnd-list="list.lists.roles" data-ng-style="list.lists.roles.length === 0 ? {'display':'block'} : false">
                                    <tr data-ng-repeat="item in list.lists.roles"
                                        dnd-draggable="item"
                                        dnd-moved="list.lists.roles.splice($index, 1)"
                                        dnd-effect-allowed="move"
                                        dnd-selected="lists.selected = item"
                                        ng-class="{'selected': lists.selected === item}">

                                        <td title="'Name'" sortable="'name'">{{item.name}}</td>

                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-striped" show-filter="true">
                                    <tr style="background-color:#2196F3; color:#ffffff">
                                        <th>Roles member of:</th>
                                    </tr>
                                    <tbody dnd-list="list.lists.selectedRoles" data-ng-style="list.lists.selectedRoles.length === 0 ? {'display':'block'} : false">
                                    <tr data-ng-repeat="item in list.lists.selectedRoles"
                                        dnd-draggable="item"
                                        dnd-moved="list.lists.selectedRoles.splice($index, 1)"
                                        dnd-effect-allowed="move"
                                        dnd-selected="lists.selected = item"
                                        ng-class="{'selected': lists.selected === item}">
                                        <td title="'Name'" sortable="'name'">{{item.name}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>


                        </div>
                    </div>

                    <div class="form-group">
                        <div data-ng-show="user.isNew">
                            <label>Password : </label>
                            <input type="password" data-ng-model="user.password" class="form-control" />
                        </div>
                        <div data-ng-show="!user.isNew">
                            <label>New Password : </label>
                            <input type="password" data-ng-model="user.newPassword" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div data-ng-show="user.isNew">
                            <label>Password (Confirm) : </label>
                            <input type="password" data-ng-model="user.password2" class="form-control" />
                        </div>
                        <div data-ng-show="!user.isNew">
                            <label>New Password (Confirm) : </label>
                            <input type="password" data-ng-model="user.newPassword2" class="form-control" />
                        </div>
                    </div>
                    <!--<div data-ng-hide="user.isDefault">-->
                       <!--Dashboards : <multiselect data-ng-model="user.selectedDashboards" options="dashboardNames" show-search="true" id-prop="SOURCE_NAME" display-prop="SOURCE_NAME" search-limit="100">-->
                       <!--</multiselect><br/>-->
                    <!--</div>-->

                    <div class="well text-right" data-ng-show="!user.isNew">
                        <button class="btn btn-danger" data-ng-click="deleteUser()" data-ng-hide="user.isDefault">Delete User</button>
                        <button class="btn btn-primary" data-ng-click="saveUser()">Save</button>
                    </div>

                    <div class="well text-right" data-ng-show="user.isNew">
                        <button class="btn btn-primary" type="submit" class="btn btn-default" data-ng-click="createUser()">Create user</button>
                    </div>


                </div>
        </div>
    </div>