<div class="backImg">

<div class="c-wrapper">
    
    <div class="container">

        <div class="container" style="margin-top:50px;">

            <div class="row">
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <mat-card *ngIf="!forgotCard" card="card-style" class="mainCard">
                        <mat-card-subtitle style="text-align: center;">
                            <div class="row" style="margin-bottom: 20px;">
    
                                
                                <span class="resetSpan">{{ 'forgotYourPass' | translate }}</span><br>
    
                            </div>
    
                            <div class="row">
    
                                <img class="forgotImage" src="assets/img/forgot.jpg">
                            </div>
    
                            <div class="row" style="margin-top: 20px;margin-bottom: 20px;">
                                <button  mat-raised-button class="verifyOtpButton"  type="submit" (click)="forgotCard = !forgotCard"> {{
                                    'resetPassword' | translate }}
                                </button>
                            </div>
                        
                            </mat-card-subtitle>
                    </mat-card>
                    <mat-card *ngIf="forgotCard" card="card-style" class="mainCard">
                        <!-- <mat-card-title>
                            <div class="row">
                                <img mat-card-image src="assets/accurate/images/salesapp.png" alt="logo">
                            </div>
                        </mat-card-title> -->
                        <mat-card-subtitle style="text-align: center;">
                        <div class="row" >

                            <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                            <span class="resetSpan">{{ 'forgotYourPass' | translate }}</span>

                        </div>

                        </div>
                        </mat-card-subtitle>

                        <mat-card-content>
                            <form *ngIf="!isNewPasswordScreen" [formGroup]="loginForm" (ngSubmit)="onVerifyOtp()">
                                <p>
                                    <mat-form-field style="margin-top: 30px;">
                                        <input type="text" matInput placeholder="{{ 'email' | translate }}"
                                        [disabled]="!isVisibleOtp"
                                            formControlName="username" [(ngModel)]="user.username" style="width:100%">
                                    </mat-form-field>
                                </p>
                                <p *ngIf="isVisibleOtp">

                                    <mat-label> Passcode </mat-label>
                                    <ng-otp-input (onInputChange)="onOtpChange($event)" [config]="config">
                                    </ng-otp-input>
                                </p>

                                <div class="button">
                                    <button *ngIf="!isVisibleOtp" mat-raised-button class="sendOTP"  type="button"
                                        (click)="sendOTP()"> {{ 'sendOtp' | translate }}
                                    </button>
                                    <button *ngIf="isVisibleOtp" mat-raised-button class="verifyOtpButton"  type="submit"> {{
                                        'verifyOtp' | translate }}
                                    </button>
                                    <button *ngIf="isVisibleOtp" mat-raised-button class="resendOtpButton"  type="button"
                                        style="margin-left: 5px;" (click)="resendOTP()"> {{ 'resendOtp' | translate }}
                                    </button>
                                </div>
                                <div style="text-align: center;padding-top: 20px;">
                                    <a [routerLink]=""  style="color: #234442;font-family: nucleo;" (click)="goToLogin()">{{ 'login' | translate }}</a>
                                </div>
                            </form>

                            <form *ngIf="isNewPasswordScreen" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
                                
                                <p>
                                    <mat-form-field>
                                        <input type="password" matInput placeholder="{{ 'password' | translate }}"
                                            formControlName="password" [(ngModel)]="user.password" style="width:100%">
                                    </mat-form-field>
                                </p>

                                <p>
                                    <mat-form-field>
                                        <input type="password" matInput
                                            placeholder="{{ 'confirmPassword' | translate }}" formControlName="confpassword"
                                            [(ngModel)]="user.confpassword" style="width:100%">
                                    </mat-form-field>
                                </p>

                                <div class="button">
                                    <button mat-raised-button class="changePassButton" type="submit"> {{ 'changePassword' |
                                        translate }}
                                    </button>
                                </div>
                                <div style="text-align: center;padding-top: 20px;">
                                    <a [routerLink]="" style="color: #234442;font-family: nucleo;" (click)="goToLogin()">{{ 'login' | translate }}</a>
                                </div>
                            </form>
                        </mat-card-content>
                    </mat-card>
                </div>
            </div>
      

        </div>
    </div>

</div>