<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
    <h3 class="modal-title">{{'RESET_PWD.TITLE' | translate}}</h3>
    <label class="modal-title reset-modal-title-override">{{'RESET_PWD.CAPTION' | translate}}</label>
    <inline-alert class="modal-title"></inline-alert>
    <div class="modal-body" style="overflow-y: hidden; min-height: 130px;">
        <form #forgotPasswordFrom="ngForm" class="form">
            <section class="form-block">
                <div class="form-group form-group-override">
                    <label for="reset_pwd_email" class="required form-group-label-override">{{'RESET_PWD.EMAIL' | translate}}</label>
                    <label for="reset_pwd_email" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]="!validationState">
                      <input [disabled]="isSuccess" name="reset_pwd_email" type="text" #eamilInput="ngModel" [(ngModel)]="email" 
                      required 
                      email
                      id="reset_pwd_email" 
                      size="30"
                      (input)="handleValidation(true)" 
                      (blur)="handleValidation(false)">
                      <span class="tooltip-content">
                          {{'TOOLTIP.EMAIL' | translate}}
                      </span>
                    </label>
                </div>
            </section>
        </form>
    </div>
    <div class="modal-footer">
        <span class="spinner spinner-inline" style="top:8px;" [hidden]="showProgress === false"></span>
        <button type="button" class="btn" [class.btn-outline]="!isSuccess" [class.btn-primary]="isSuccess" (click)="close()">{{btnCancelCaption | translate}}</button>
        <button *ngIf="!isSuccess" type="button" class="btn btn-primary" [disabled]="!isValid || showProgress" (click)="send()">{{'BUTTON.SEND' | translate}}</button>
    </div>
</clr-modal>