<div class="modal modal-form" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <form name="userForm" class="form-horizontal group-border-dashed" novalidate>
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" ng-click="$hide()">&times;</button>
                    <h4 class="modal-title" ng-bind="title"></h4>
                </div>
                <div class="modal-body">
                    <div class="content">
                        <div class="form-group"
                             ng-class="{'has-error': userForm.username.$invalid && !userForm.username.$pristine}">
                            <label class="col-sm-3 control-label">Username</label>
                            <div class="col-sm-6">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
                                    <input type="text" name="username" class="form-control" ng-model="user.username" required>
                                </div>
                                <p ng-show="userForm.username.$invalid && !userForm.username.$pristine" class="help-block">
                                    Please enter a valid username.
                                </p>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-class="{'has-error': userForm.password.$invalid}">
                            <label class="col-sm-3 control-label">Password</label>
                            <div class="col-sm-6">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                                    <input type="password" name="password" class="form-control" ng-model="user.password">
                                </div>
                                <p ng-show="userForm.password.$invalid" class="help-block">
                                    Please enter a valid password.
                                </p>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-class="{'has-error': userForm.password_confirm.$invalid}">
                            <label class="col-sm-3 control-label">Confirm</label>
                            <div class="col-sm-6">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                                    <input type="password" name="password_confirm" class="form-control" ng-model="user.password_confirm">
                                </div>
                                <p ng-show="userForm.password_match.$invalid" class="help-block">
                                    Please re-enter a valid matching password.
                                </p>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-class="{'has-error': userForm.first_name.$invalid && !userForm.first_name.$pristine}">
                            <label class="col-sm-3 control-label">First Name</label>
                            <div class="col-sm-6">
                                <input type="text" name="first_name" class="form-control" ng-model="user.first_name" required>
                                <p ng-show="userForm.first_name.$invalid && !userForm.first_name.$pristine" class="help-block">
                                    Please enter a valid First Name.
                                </p>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-class="{'has-error': userForm.last_name.$invalid && !userForm.last_name.$pristine}">
                            <label class="col-sm-3 control-label">Last Name</label>
                            <div class="col-sm-6">
                                <input type="text" name="last_name" class="form-control" ng-model="user.last_name" required>
                                <p ng-show="userForm.last_name.$invalid && !userForm.last_name.$pristine"
                                   class="help-block">
                                    Please enter a valid Last Name.
                                </p>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-class="{'has-error': userForm.billing.address.$invalid && !userForm.billing.address.$pristine}">
                            <label class="col-sm-3 control-label">Address</label>
                            <div class="col-sm-6">
                                <input type="text" name="billing_address" class="form-control" ng-model="user.address" required>
                                <p ng-show="userForm.billing.address.$invalid && !userForm.billing.address.$pristine"
                                   class="help-block">
                                    Please enter a valid address.
                                </p>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-class="{'has-error': userForm.billing.address_2.$invalid && !userForm.billing.address_2.$pristine}">
                            <label class="col-sm-3 control-label">Address 2</label>
                            <div class="col-sm-6">
                                <input type="text" name="billing_address_2" class="form-control" ng-model="user.address_2">
                                <p ng-show="userForm.billing.address_2.$invalid" class="help-block">
                                    Please enter a valid address 2.
                                </p>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-class="{'has-error': userForm.billing.city.$invalid && !userForm.billing.city.$pristine}">
                            <label class="col-sm-3 control-label">City</label>
                            <div class="col-sm-6">
                                <input type="text" name="city" class="form-control" ng-model="user.city" required>
                                <p ng-show="userForm.billing.city.$invalid && !userForm.billing.city.$pristine" class="help-block">
                                    Please enter a valid city.
                                </p>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-class="{'has-error': userForm.billing.state.$invalid && !userForm.billing.state.$pristine}">
                            <label class="col-sm-3 control-label">State/Province</label>
                            <div class="col-sm-6">
                                <select ng-required="true" ui-select2 ng-model="user.state"
                                        name="billing_state" id="billing_user_states" data-placeholder="Select State">
                                    <option value=""></option>
                                    <option ng-repeat="state in states" value="{{state.id}}">{{state.name}}</option>
                                </select>
                                <p ng-show="userForm.billing.state.$invalid && !userForm.billing.state.$pristine"
                                   class="help-block">
                                    Please choose a valid state.
                                </p>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-class="{'has-error': userForm.postal_code.$invalid && !userForm.postal_code.$pristine}">
                            <label class="col-sm-3 control-label">Postal Code</label>
                            <div class="col-sm-6">
                                <input type="text" name="billing_postal_code" class="form-control" ng-model="user.postal_code" required>
                                <p ng-show="userForm.billing.postal_code.$invalid && !userForm.postal_code.billing.$pristine"
                                   class="help-block">
                                    Please enter a valid postal code.
                                </p>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-class="{'has-error': userForm.telephone.$invalid && !userForm.telephone.$pristine}">
                            <label class="col-sm-3 control-label">Telephone</label>
                            <div class="col-sm-6">
                                <input type="phone" name="telephone" class="form-control" ng-model="user.telephone">
                                <p ng-show="userForm.telephone.$invalid && !userForm.telephone.$pristine" class="help-block">
                                    Please enter a valid phone number.
                                </p>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-class="{'has-error': userForm.mobile.$invalid}">
                            <label class="col-sm-3 control-label">Mobile</label>
                            <div class="col-sm-6">
                                <input type="phone" name="mobile" class="form-control" ng-model="user.mobile">

                                <p ng-show="userForm.mobile.$invalid"
                                   class="help-block">
                                    Please enter a valid phone number.
                                </p>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-class="{'has-error': userForm.group.$invalid && !userForm.group.$pristine}">
                            <label class="col-sm-3 control-label">Group</label>
                            <div class="col-sm-6">
                                <select ng-required="true" ui-select2 ng-model="user.group" multiple
                                        name="group" id="user_group" data-placeholder="Select Group">
                                    <option ng-repeat="group in groups" value="{{group.id}}">{{group.name}}</option>
                                </select>
                                <p ng-show="userForm.group.$invalid && !userForm.group.$pristine" class="help-block">
                                    Please enter a valid group for this user.
                                </p>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-class="{'has-error': userForm.active.$invalid && !userForm.active.$pristine}">
                            <label class="col-sm-3 control-label">Active</label>
                            <div class="col-sm-6">
                                <input icheck class="icheck" data-size="small" ng-model="user.active" type="checkbox" name="is_active" checked/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button ng-click="createUser(user)" type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Save</button>
                    <button ng-click="$hide()" class="btn btn-default">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>