<form name="changePasswordForm" novalidate ng-submit="verifyChangePassword(changePasswordForm.$valid)">
    <div class="modal-header text-white bg-698-blue">
        <h4 class="modal-title text-white" id="modal-title">{{'USER.CHANGE_PASSWORD.TITLE' | translate}}</h4>
        <button ng-click="onClose()" type="button" class="close text-white" data-dismiss="modal"
                aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body bg-white" id="modal-body">
        <div class="row mx-0">
            <div class="col-12 form-group">
                <label class="small mb-1 required">{{'USER.CHANGE_PASSWORD.CURRENT_PASSWORD' | translate}}</label>
                <input type="password" ng-model="dataChange.currentPass" name="currentPass" class="form-control"
                       required
                       ng-class="{'is-invalid' : changePasswordForm.currentPass.$touched && changePasswordForm.currentPass.$invalid}">
                <div class="invalid-feedback">
                    <div ng-show="changePasswordForm.currentPass.$error.required">
                        {{'INPUT_ERROR.REQUIRED' | translate}}
                    </div>
                </div>
            </div>

            <div class="col-12 form-group">
                <label class="small mb-1 required">{{'USER.CHANGE_PASSWORD.NEW_PASSWORD' | translate}}</label>
                <input type="password" disallow-space ng-trim="false"
                       ng-model="dataChange.newPass" name="newPass" class="form-control" id="input_pass"
                       ng-class="{'is-invalid' : (changePasswordForm.newPass.$touched || changePasswordForm.newPass.$dirty) && changePasswordForm.newPass.$invalid}"
                       required
                       ng-pattern="password_pattern">
                <div class="invalid-feedback">
                    <div ng-show="changePasswordForm.newPass.$error.required">
                        {{'INPUT_ERROR.REQUIRED' | translate}}
                    </div>
                    <div ng-show="changePasswordForm.newPass.$error.pattern">{{notificationError}}</div>
                </div>
            </div>

            <div class="col-12 form-group">
                <label class="small mb-1 required">{{'USER.CHANGE_PASSWORD.CONFIRM_PASSWORD' | translate}}</label>
                <input type="password" disallow-space ng-trim="false"
                       ng-model="dataChange.confirmPass" name="confirmPass" class="form-control"
                       ng-class="{'is-invalid' : (changePasswordForm.confirmPass.$touched || changePasswordForm.confirmPass.$dirty)  &&  changePasswordForm.confirmPass.$invalid}"
                       compare-to="changePasswordForm.newPass"
                       required>
                <div class="invalid-feedback">
                    <div ng-show="changePasswordForm.confirmPass.$error.required">
                        {{'INPUT_ERROR.REQUIRED' | translate}}
                    </div>
                    <div ng-show="changePasswordForm.confirmPass.$error.repeat">
                        {{'USER.CHANGE_PASSWORD.INVALID_CONFIRM_PASSWORD' | translate}}
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="modal-footer">
        <div class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 text-right">
            <button class="btn btn-outline-dark" type="button" ng-click="onClose()">
                {{'COMMON.BUTTON_CANCEL' | translate}}
            </button>
            <button ng-disabled="!changePasswordForm.$valid"
                    ng-class="{'cursor-disabled': !changePasswordForm.$valid}"
                    class="btn btn-primary"
                    type="submit">
                {{'COMMON.BUTTON_SAVE' | translate}}
            </button>
        </div>
    </div>
</form>
