<div ng-controller="Umbraco.PropertyEditors.ChangePasswordController">
    <div class="alert alert-success text-center" ng-hide="!model.value.generatedPassword">
        <small>Password has been reset to:</small>
        <br/>
        <strong>{{model.value.generatedPassword}}</strong>
    </div>
    <div ng-switch="changing">
        <div ng-switch-when="false">        
            <a href="" ng-click="doChange()" class="btn btn-small">Change password</a>         
        </div>
        <div ng-switch-when="true">
        
            <umb-control-group alias="resetPassword" label="Reset password?" ng-show="$parent.showReset()">
                <input type="checkbox" ng-model="$parent.model.value.reset" 
                       id="Checkbox1" 
                       name="resetPassword"
                       val-server="resetPassword"/>     
                <span class="help-inline" val-msg-for="resetPassword" val-toggle-msg="valServer"></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="Old password" ng-show="$parent.showOldPass()">            
                <input type="text" name="oldPassword" ng-model="$parent.model.value.oldPassword"
                       class="input-large umb-textstring textstring" 
                       ng-required="$parent.showOldPass()"
                       val-server="oldPassword" />    
                <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="valServer"></span>
            </umb-control-group>

            <umb-control-group alias="password" label="New password" ng-show="$parent.showNewPass()">            
                <input type="text" name="password" ng-model="$parent.model.value.newPassword"
                       class="input-large umb-textstring textstring" 
                       ng-required="!$parent.model.value.reset"
                       val-server="value" 
                       ng-minlength="{{$parent.model.config.minPasswordLength}}" />    
                <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.model.config.minPasswordLength}} characters</span>    
                <span class="help-inline" val-msg-for="password" val-toggle-msg="valServer"></span>     
            </umb-control-group>

            <umb-control-group alias="confirmpassword" label="Confirm password" ng-show="$parent.showConfirmPass()">
                <input type="text" name="confirmpassword" ng-model="$parent.model.confirm"
                       class="input-large umb-textstring textstring"
                       val-compare="password" />

                <span class="help-inline" val-msg-for="confirmpassword" val-toggle-msg="valCompare">Passwords must match</span>     
            </umb-control-group> 

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