<div>
    <div class="alert alert-success text-center" ng-hide="!vm.passwordValues.generatedPassword">
        <small>Password has been reset to:</small>
        <br />
        <strong>{{vm.passwordValues.generatedPassword}}</strong>
    </div>
    <div ng-switch="vm.changing">
        <div ng-switch-when="false">
            <a href="" ng-click="vm.doChange()" class="btn btn-small">
                <localize key="general_changePassword">Change password</localize>
            </a>
        </div>
        <div ng-switch-when="true">

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

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

                <umb-control-group alias="confirmpassword" label="@user_confirmNewPassword" ng-if="!vm.showReset" required="true">
                    <input type="password" name="confirmpassword" ng-model="vm.passwordValues.confirm"
                           class="input-block-level umb-textstring textstring"
                           val-compare="password"
                           no-dirty-check />
                    <span ng-messages="vm.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="vm.cancelChange()" ng-show="vm.showCancelBtn()" class="btn btn-small">
                    <localize key="general_cancel">Cancel</localize>
                </a>

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

</div>
