<div class="modal fade userModal" tabindex="-1" role="dialog" aria-labelledby="userLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" data-ng-controller="UserFormSettingsCtrl">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true" class="fa fa-times"></span>
                    <span class="sr-only">Close</span>
                </button>
                <h3 class="modal-title" id="userLabel" data-ng-if="userFormData.isAdd">Add User</h3>
                <h3 class="modal-title" id="userLabel" data-ng-if="!userFormData.isAdd">Edit User</h3>
            </div>
            <div class="modal-body">
                <form role="form" novalidate data-ng-submit="">
                    <fieldset data-ng-disabled="userFormData.isSaving">
                        <div class="form-group" data-ng-class="{ 'has-error': userFormData.usernameError }">
                            <h5><span data-ng-if="!userFormData.isAdd">Change </span>Username</h5>
                            <input class="form-control" type="text" placeholder="Username" data-ng-model="userFormData.username">
                        </div>
                        <div class="form-group" data-ng-class="{ 'has-error': userFormData.passError }">
                            <h5><span data-ng-if="!userFormData.isAdd">Change </span>Password</h5>
                            <input class="form-control" type="password" placeholder="Password" data-ng-model="userFormData.password">
                        </div>
                        <div class="form-group" data-ng-class="{ 'has-error': userFormData.passError }">
                            <input class="form-control" type="password" placeholder="Verify Password" data-ng-model="userFormData.verifyPass">
                        </div>
                        <div class="form-group" data-ng-if="boardNames.length">
                            <h5><span data-ng-if="!userFormData.isAdd">Select </span>Default Board
                                <span style="cursor:pointer;" class="fa fa-question-circle popover-dismiss"
                                      data-toggle="popover" data-placement="top"
                                      data-content="Selecting a default board adds the user to that board."
                                      data-ng-if="userFormData.isAdd">
                                </span>
                            </h5>
                            <select class="form-control" data-ng-model="userFormData.defaultBoard" data-ng-options="board.id as board.name for board in boardNames">
                                <option value="">None</option>
                            </select>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" data-ng-model="userFormData.isAdmin">
                                Administrator
                            </label>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" id="modalAddUser" class="btn btn-info" data-ng-click="addUser(userFormData)" data-ng-if="userFormData.isAdd">Add User</button>
                            <button type="submit" id="modalEditUser" class="btn btn-info" data-ng-click="editUser(userFormData)" data-ng-if="!userFormData.isAdd">Edit User</button>
                            <a class="btn btn-default" data-ng-click="userFormData.cancel()">Cancel</a>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
