<clr-modal
    [(clrModalOpen)]="opened"
    [clrModalStaticBackdrop]="true"
    [clrModalClosable]="false">
    <h3 class="modal-title">{{ 'RESET_PWD.TITLE' | translate }}</h3>
    <div class="modal-body body-format password-body">
        <inline-alert></inline-alert>
        <label>{{ 'RESET_PWD.CAPTION' | translate }}</label>
        <form #forgotPasswordFrom="ngForm" clrForm>
            <clr-input-container>
                <label class="required">{{
                    'RESET_PWD.EMAIL' | translate
                }}</label>
                <input
                    clrInput
                    [disabled]="isSuccess"
                    name="reset_pwd_email"
                    type="text"
                    #eamilInput="ngModel"
                    [(ngModel)]="email"
                    required
                    email
                    id="reset_pwd_email"
                    size="50"
                    (input)="handleValidation(true)"
                    (blur)="handleValidation(false)" />
                <clr-control-error *ngIf="!validationState">
                    {{ 'TOOLTIP.EMAIL' | translate }}
                </clr-control-error>
            </clr-input-container>
        </form>
    </div>
    <div class="modal-footer">
        <span
            class="spinner spinner-inline loading-top"
            [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"
            id="submit-btn"
            class="btn btn-primary"
            [disabled]="!isValid || showProgress"
            (click)="send()">
            {{ 'BUTTON.SEND' | translate }}
        </button>
    </div>
</clr-modal>
