<div class="row mx-0 pt-5">
    <div class="col-md-7 col-lg-5 mx-auto">
        <div class="card">
            <div class="card-body">
                <div class="col-12 text-center">
                    <img class="form-group" width="170" height="150" src="images/689Cloud-large.png"
                         alt="689Cloud Secure Mail LOGO">
                </div>
                <form name="changeEmailForm" novalidate ng-submit="changeEmailUser(changeEmailForm.$valid)">
                    <!-- new email -->
                    <div class="form-group col-12">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white"><i class="fa fa-envelope"
                                                                           aria-hidden="true"></i></span>
                            </div>
                            <input type="text"
                                   name="mailAddress"
                                   ng-model="mail_address"
                                   class="form-control rounded-right"
                                   ng-class="{'is-invalid' : (changeEmailForm.mailAddress.$touched || changeEmailForm.mailAddress.$dirty)  &&  changeEmailForm.mailAddress.$invalid}"
                                   placeholder="{{'LOGIN.NEW_EMAIL' | translate}}"
                                   ng-pattern="email_pattern"
                                   ng-maxlength="64"
                                   required/>
                            <div class="invalid-feedback text-left">
                                <div ng-show="changeEmailForm.mailAddress.$error.required">{{'INPUT_ERROR.REQUIRED' |
                                    translate}}
                                </div>
                                <div ng-show="changeEmailForm.mailAddress.$error.pattern">{{'COMMON.INVALID_EMAIL' |
                                    translate}}
                                </div>
                                <div ng-show="changeEmailForm.mailAddress.$error.maxlength">{{'INPUT_ERROR.MAX_LENGTH' |
                                    translate
                                    :'{value: "64" }'}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Back to login page -->
                    <div class="col-12 text-center">
                        <button class="btn btn-warning" type="button" ng-click="doBack()">
                            {{'COMMON.BUTTON_BACK' | translate}}
                        </button>
                        <button ng-disabled="!changeEmailForm.$valid"
                                ng-class="{'cursor-disabled': !changeEmailForm.$valid}"
                                class="btn btn-primary"
                                type="submit">
                            {{'COMMON.BUTTON_SAVE' | translate}}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
