<div>
    <div class="alert alert-success text-center" ng-hide="!passwordValues.generatedPassword">
        <small>Password has been reset to:</small>
        <br />
        <strong>{{passwordValues.generatedPassword}}</strong>
    </div>
    <div ng-switch="changing">
        <div ng-switch-when="false">
            <a href="" ng-click="doChange()" class="btn btn-small">
                <localize key="general_changePassword">Change password</localize>
            </a>
        </div>
        <div ng-switch-when="true">
            <ng-form name="passwordForm">
                <umb-control-group alias="resetPassword" label="@user_resetPassword" ng-show="$parent.config.enableReset">
                    <input type="checkbox" ng-model="$parent.passwordValues.reset"
                           id="Checkbox1"
                           name="resetPassword"
                           val-server-field="resetPassword" 
                           no-dirty-check
                           ng-change="$parent.$parent.showReset = !$parent.$parent.showReset"/>
                    <span class="help-inline" val-msg-for="resetPassword" val-toggle-msg="valServerField"></span>
                </umb-control-group>

                <!-- we need to show the old pass field when the provider cannot retrieve the password -->
                <umb-control-group alias="oldPassword" label="@user_oldPassword" ng-if="$parent.showOldPass()" required="true">
                    <input type="password" name="oldPassword" ng-model="$parent.passwordValues.oldPassword"
                           class="input-block-level umb-textstring textstring"
                           required
                           val-server-field="oldPassword" 
                           no-dirty-check />
                    <span class="help-inline" val-msg-for="oldPassword" val-toggle-msg="required">Required</span>
                    <span class="help-inline" val-msg-for="oldPassword" val-toggle-msg="valServerField"></span>
                </umb-control-group>

                <umb-control-group alias="password" label="@user_newPassword" ng-if="!$parent.showReset" required="true">
                    <input type="password" name="password" ng-model="$parent.passwordValues.newPassword"
                           class="input-block-level umb-textstring textstring"
                           required
                           val-server-field="password"
                           ng-minlength="{{$parent.config.minPasswordLength}}" 
                           no-dirty-check />
                    <span class="help-inline" val-msg-for="password" val-toggle-msg="required">Required</span>
                    <span class="help-inline" val-msg-for="password" val-toggle-msg="minlength">Minimum {{$parent.config.minPasswordLength}} characters</span>
                    <span class="help-inline" val-msg-for="password" val-toggle-msg="valServerField"></span>
                </umb-control-group>

                <umb-control-group alias="confirmpassword" label="@user_confirmNewPassword" ng-if="!$parent.showReset" required="true">
                    <input type="password" name="confirmpassword" ng-model="$parent.passwordValues.confirm"
                           class="input-block-level umb-textstring textstring"                           
                           val-compare="password" 
                           no-dirty-check />

                    <span class="help-inline" val-msg-for="confirmpassword" val-toggle-msg="valCompare">
                        <localize key="user_passwordMismatch">The confirmed password doesn't match the new password!</localize>
                    </span>
                </umb-control-group>

                <a href="" ng-click="cancelChange()" ng-show="showCancelBtn()" class="btn btn-small">
                    <localize key="general_cancel">Cancel</localize>
                </a>

            </ng-form>
        </div>
    </div>

</div>
