<clr-modal
    [(clrModalOpen)]="opened"
    [clrModalStaticBackdrop]="true"
    [clrModalClosable]="false">
    <h3 class="modal-title">{{ 'CHANGE_PWD.TITLE' | translate }}</h3>
    <div class="modal-body body-format">
        <inline-alert (confirmEvt)="confirmCancel($event)"></inline-alert>
        <form #changepwdForm="ngForm" class="clr-form clr-form-horizontal">
            <div class="clr-form-control">
                <label for="oldPassword" class="clr-control-label required">{{
                    'CHANGE_PWD.CURRENT_PWD' | translate
                }}</label>
                <div
                    class="clr-control-container"
                    [class.clr-error]="
                        oldPassInput.invalid &&
                        (oldPassInput.dirty || oldPassInput.touched)
                    ">
                    <div class="clr-input-wrapper">
                        <input
                            class="clr-input pwd-input"
                            [type]="showOldPwd ? 'text' : 'password'"
                            id="oldPassword"
                            required
                            name="oldPassword"
                            [(ngModel)]="oldPwd"
                            #oldPassInput="ngModel"
                            size="40" />
                        <clr-icon
                            *ngIf="!showOldPwd"
                            shape="eye"
                            class="pw-eye"
                            (click)="showOldPwd = !showOldPwd"></clr-icon>
                        <clr-icon
                            *ngIf="showOldPwd"
                            shape="eye-hide"
                            class="pw-eye"
                            (click)="showOldPwd = !showOldPwd"></clr-icon>
                        <clr-icon
                            class="clr-validate-icon"
                            shape="exclamation-circle"></clr-icon>
                    </div>
                    <clr-control-error
                        *ngIf="
                            oldPassInput.invalid &&
                            (oldPassInput.dirty || oldPassInput.touched)
                        ">
                        <span id="oldPassword-error">{{
                            'TOOLTIP.CURRENT_PWD' | translate
                        }}</span>
                    </clr-control-error>
                </div>
            </div>
            <div class="clr-form-control">
                <label for="newPassword" class="clr-control-label required">{{
                    'CHANGE_PWD.NEW_PWD' | translate
                }}</label>
                <div
                    class="clr-control-container"
                    [class.clr-error]="!getValidationState('newPassword')">
                    <div class="clr-input-wrapper">
                        <input
                            class="clr-input pwd-input"
                            [type]="showNewPwd ? 'text' : 'password'"
                            id="newPassword"
                            required
                            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
                            name="newPassword"
                            [(ngModel)]="newPwd"
                            #newPassInput="ngModel"
                            size="40"
                            (input)="handleValidation('newPassword', false)"
                            (blur)="handleValidation('newPassword', true)" />
                        <clr-icon
                            *ngIf="!showNewPwd"
                            shape="eye"
                            class="pw-eye"
                            (click)="showNewPwd = !showNewPwd"></clr-icon>
                        <clr-icon
                            *ngIf="showNewPwd"
                            shape="eye-hide"
                            class="pw-eye"
                            (click)="showNewPwd = !showNewPwd"></clr-icon>
                        <clr-icon
                            class="clr-validate-icon"
                            shape="exclamation-circle"></clr-icon>
                    </div>
                    <clr-control-error
                        *ngIf="!getValidationState('newPassword')">
                        <span id="newPassword-error">{{
                            'TOOLTIP.PASSWORD' | translate
                        }}</span>
                    </clr-control-error>
                </div>
            </div>
            <div class="clr-form-control">
                <label for="reNewPassword" class="clr-control-label required">{{
                    'CHANGE_PWD.CONFIRM_PWD' | translate
                }}</label>
                <div
                    class="clr-control-container"
                    [class.clr-error]="!getValidationState('reNewPassword')">
                    <div class="clr-input-wrapper">
                        <input
                            class="clr-input pwd-input"
                            [type]="showReNewPwd ? 'text' : 'password'"
                            id="reNewPassword"
                            required
                            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
                            name="reNewPassword"
                            [(ngModel)]="reNewPwd"
                            #reNewPassInput="ngModel"
                            size="40"
                            (input)="handleValidation('reNewPassword', false)"
                            (blur)="handleValidation('reNewPassword', true)" />
                        <clr-icon
                            *ngIf="!showReNewPwd"
                            shape="eye"
                            class="pw-eye"
                            (click)="showReNewPwd = !showReNewPwd"></clr-icon>
                        <clr-icon
                            *ngIf="showReNewPwd"
                            shape="eye-hide"
                            class="pw-eye"
                            (click)="showReNewPwd = !showReNewPwd"></clr-icon>
                        <clr-icon
                            class="clr-validate-icon"
                            shape="exclamation-circle"></clr-icon>
                    </div>
                    <clr-control-error
                        *ngIf="!getValidationState('reNewPassword')">
                        <span id="reNewPassword-error">{{
                            'TOOLTIP.CONFIRM_PWD' | translate
                        }}</span>
                    </clr-control-error>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <span
            class="spinner spinner-inline loading-top"
            [hidden]="showProgress === false"></span>
        <button
            type="button"
            class="btn btn-outline"
            id="cancel-btn"
            (click)="close()">
            {{ 'BUTTON.CANCEL' | translate }}
        </button>
        <button
            type="button"
            class="btn btn-primary"
            id="ok-btn"
            [disabled]="!isValid || showProgress"
            (click)="doOk()">
            {{ 'BUTTON.OK' | translate }}
        </button>
    </div>
</clr-modal>
