<div class="container">
    <!-- Outer Row -->
    <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-12 col-md-9">
            <div class="card o-hidden border-0 shadow-lg my-5">
                <div class="card-body">
                    <!-- Nested Row within Card Body -->
                    <div class="row">
                        <div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                            <div class="text-center form-group">
                                <img alt="" class="d-inline-block align-top" height="auto"
                                     src="images/logo1.png"
                                     width="170"/>
                            </div>

                            <form name="resetPasswordForm" novalidate ng-submit="resetPass(resetPasswordForm.$valid)">
                                <div class="pt-3">
                                    <!-- new password -->
                                    <div class="form-group col-12">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-white">
                                                    <i aria-hidden="true" class="fas fa-lock style-lock"></i>
                                                </span>
                                            </div>
                                            <input type="password" ng-model="newPass" name="newPass"
                                                   class="form-control rounded-right"
                                                   id="input_pass"
                                                   ng-class="{'is-invalid' : (resetPasswordForm.newPass.$touched
                                                        || resetPasswordForm.newPass.$dirty) && resetPasswordForm.newPass.$invalid}"
                                                   ng-minlength="{{passwordPolicies.min}}"
                                                   ng-maxlength="{{passwordPolicies.max}}"
                                                   required
                                                   placeholder="{{'USER.CHANGE_PASSWORD.NEW_PASSWORD' | translate}}"
                                                   ng-pattern="password_pattern"
                                                   disallow-space ng-trim="false">
                                            <div class="invalid-feedback text-left">
                                                <div ng-show="resetPasswordForm.newPass.$error.required">
                                                    {{'INPUT_ERROR.REQUIRED' | translate}}
                                                </div>
                                                <div ng-show="resetPasswordForm.newPass.$error.pattern">
                                                    {{notificationError}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- confirm password -->
                                    <div class="form-group col-12">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-white">
                                                    <i aria-hidden="true" class="fas fa-keyboard"></i>
                                                </span>
                                            </div>
                                            <input type="password" ng-model="confirmPass" name="confirmPass"
                                                   class="form-control rounded-right"
                                                   ng-class="{'is-invalid' : (resetPasswordForm.confirmPass.$touched
                                                        || resetPasswordForm.confirmPass.$dirty) && resetPasswordForm.confirmPass.$invalid}"
                                                   compare-to="resetPasswordForm.newPass"
                                                   required
                                                   disallow-space ng-trim="false"
                                                   placeholder="{{'USER.CHANGE_PASSWORD.CONFIRM_PASSWORD' | translate}}">
                                            <div class="invalid-feedback">
                                                <div ng-show="resetPasswordForm.confirmPass.$error.required">
                                                    {{'INPUT_ERROR.REQUIRED' | translate}}
                                                </div>
                                                <div ng-show="resetPasswordForm.confirmPass.$error.repeat">
                                                    {{'USER.CHANGE_PASSWORD.INVALID_CONFIRM_PASSWORD' | translate}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- SAVE -->
                                    <div class="form-group col-12">
                                        <button class="btn btn-block btn-primary"
                                                ng-disabled="!resetPasswordForm.$valid || submit"
                                                ng-class="{'cursor-disabled': !resetPasswordForm.$valid}"
                                                type="submit">
                                            {{'COMMON.BUTTON_SAVE' | translate}}
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <!-- FOOTER -->
                            <hr>
                            <div class="text-center">
                                <a class="small opacity-5">{{'LOGIN.ALREADY_HAVE_ACCOUNT' | translate}}</a>
                                <a class="small" ui-sref="login">{{'LOGIN.LOGIN_LINK' | translate}}</a>
                            </div>
                            <div class="text-center">
                                <a class="small opacity-5">{{'LOGIN.DONT_HAVE_ACCOUNT' | translate}}</a>
                                <a class="small" ui-sref="signUp">{{'LOGIN.SIGN_UP_LINK' |
                                    translate}}</a>
                            </div>
                            <div class="text-center" ng-show="submitting">
                                <div class="lds-facebook">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

