<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="config.enableReset">
                    <input type="checkbox" ng-model="passwordValues.reset"
                           id="Checkbox1"
                           name="resetPassword"
                           val-server-field="resetPassword"
                           no-dirty-check
                           ng-change="showReset = !showReset" />
                    <span ng-messages="passwordForm.resetPassword.$error" show-validation-on-submit >
                        <span class="help-inline" ng-message="valServerField">{{passwordForm.resetPassword.errorMsg}}</span>
                    </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="showOldPass()" required="true">
                    <input type="password" name="oldPassword" ng-model="passwordValues.oldPassword"
                           class="input-block-level umb-textstring textstring"
                           required
                           val-server-field="oldPassword"
                           no-dirty-check />
                    <span ng-messages="passwordForm.oldPassword.$error" show-validation-on-submit >
                        <span class="help-inline" ng-message="required">Required</span>
                        <span class="help-inline" ng-message="valServerField">{{passwordForm.oldPassword.errorMsg}}</span>
                    </span>
                </umb-control-group>

                <umb-control-group alias="password" label="@user_newPassword" ng-if="!showReset" required="true">
                    <input type="password" name="password" ng-model="passwordValues.newPassword"
                           class="input-block-level umb-textstring textstring"
                           required
                           val-server-field="password"
                           ng-minlength="{{config.minPasswordLength}}"
                           no-dirty-check />
                    <span ng-messages="passwordForm.password.$error" show-validation-on-submit >
                        <span class="help-inline" ng-message="required">Required</span>
                        <span class="help-inline" ng-message="minlength">Minimum {{config.minPasswordLength}} characters</span>
                        <span class="help-inline" ng-message="valServerField">{{passwordForm.password.errorMsg}}</span>
                    </span>
                </umb-control-group>

                <umb-control-group alias="confirmpassword" label="@user_confirmNewPassword" ng-if="!showReset" required="true">
                    <input type="password" name="confirmpassword" ng-model="passwordValues.confirm"
                           class="input-block-level umb-textstring textstring"
                           val-compare="password"
                           no-dirty-check />
                    <span ng-messages="passwordForm.confirmpassword.$error" show-validation-on-submit >
                        <span class="help-inline" ng-message="valCompare"><localize key="user_passwordMismatch">The confirmed password doesn't match the new password!</localize></span>
                    </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>
