<!-- <div class="s-login-pg"> -->
<!--   <div class="s-login-pg-head">
      <div style="width:100px;"><s-logo></s-logo></div>
      <p style="text-align: center"> Sample app done with SpringBoot backend and Angular frontend </p>
  </div>
  <form class="s-login-pg-form" name="form" (ngSubmit)="login()" #f="ngForm" novalidate>
      <input type="text"     placeholder="Username (demo)" name="username" [(ngModel)]="model.username" #username="ngModel" required/>
      <input type="password" placeholder="Password (demo)" name="password" [(ngModel)]="model.password" #password="ngModel" required/>
      <button type="submit" class="btn btn-primary">LOG IN</button>
  </form>
  <div class="s-login-pg-foot">
      <div *ngIf="errMsg" style="color:indianred; font-weight: bold">{{errMsg}}</div>
  </div> -->

<header class="header-6">
  <div class="branding">
    <a href="javascript://" class="nav-link">
      <a href="#" class="logo">
        <img class="img" src="assets/images/icon/micrologo.png" alt="" height="50" width="50">
      </a>
      <div style="width:40px;margin-right:10px;">

      </div>
      <span class="title">{{ loginEnvironment.loginHeading2 | sanitize}}</span>
    </a>
  </div>
</header>
<div class="container">
  <div class="email_check">
    <h2><b>Try {{ loginEnvironment.loginHeading2 | sanitize}} For Free</b></h2>
    <p style="font-size:15px;">Email Verification</p><br>

    <form class="form" [formGroup]="emailCheckForm" style="text-align: center;">
      <input class="form__field" type="email" formControlName="email" placeholder="example@gmail.com"
        [readOnly]="otpshow" [style.background-color]="otpshow === true ? '#f6f6f6' : 'white'" />
      <div *ngIf="submitted && emailCheckForm.controls.email.errors" class="error_mess">
        <div *ngIf="submitted && emailCheckForm.controls.email.errors.required" class="error_mess">*This field is
          Required</div>
      </div>
      <div *ngIf="emailErrMsg" style="color:indianred; font-weight: bold">{{emailErrMsg}}</div>
      <br>
      <div style="padding: 10px 10px 0px 30px;" *ngIf="!otpshow">
        <clr-checkbox-container style="width: 360px;">
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox name="condition1" [(ngModel)]="conditions.condition1"
              [ngModelOptions]="{standalone: true}" />
            <label>I agree to <a>Terms</a> and <a>Conditions</a>.</label>
          </clr-checkbox-wrapper>
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox name="condition2" [(ngModel)]="conditions.condition2"
              [ngModelOptions]="{standalone: true}" />
            <label>I agree to <a>Privacy Policy</a>.</label>
          </clr-checkbox-wrapper>
          <clr-checkbox-wrapper>
            <input type="checkbox" clrCheckbox name="condition3" [(ngModel)]="conditions.condition3"
              [ngModelOptions]="{standalone: true}" />
            <label>I agree to End User Policy Agreement.</label>
          </clr-checkbox-wrapper>
        </clr-checkbox-container>
        <!-- Commenting out captcha -->

        <!-- <ngx-recaptcha2 #captchaElem style="width: 100%;" [siteKey]="siteKey" (success)="handleSuccess($event)"
          formControlName="recaptcha">
        </ngx-recaptcha2> -->

        <div class="clr-col-sm-12 recaptcha-container">
          <div class="recaptcha-box">
            <b>{{ fieldnameCode }}</b>
            <button class="btn btn-icon btn-primary btn-sm" (click)="generatefieldname()">
              <clr-icon shape="refresh"></clr-icon>
            </button>
          </div>

          <input type="text" formControlName="recaptcha" class="form__field" placeholder="Enter CAPTCHA">

          <div *ngIf="submitted && emailCheckForm.controls.recaptcha.errors?.required" class="error_mess">
            *This field is Required
          </div>

          <div *ngIf="submitted && emailCheckForm.get('recaptcha').errors && emailCheckForm.get('recaptcha').dirty"
            class="error_mess">
            <div *ngIf="submitted && emailCheckForm.controls['recaptcha'].hasError('fieldnameMismatch')"
              class="error_mess">
              Recaptcha not valid.
            </div>
          </div>
        </div>

      </div>
      <!-- <ng-container *ngIf="!otpshow"><br>
        <button type="submit" class="btn new--newprimary btn--inside uppercase"
          [disabled]="!emailCheckForm.valid && !verifyButton  || !(conditions.condition1 && conditions.condition2 && conditions.condition3)"
          (click)="onSubmit()">Verify Email</button>
      </ng-container> -->

      <ng-container *ngIf="!otpshow"><br>
        <button type="submit" class="btn new--newprimary btn--inside uppercase"
          [disabled]="!emailCheckForm.valid && verifyButton || !(conditions.condition1 && conditions.condition2 && conditions.condition3)"
          (click)="onSubmit()">Verify Email</button>
      </ng-container>



      <br>
      <ng-container *ngIf="otpshow">
        <div style="text-align: center; font-weight: bold;">Enter Your OTP</div>
        <div> <input class="form__field" type="text" [(ngModel)]="otpfromuser" name="otpfromuser"
            [ngModelOptions]="{standalone: true}" placeholder="Enter OTP" /> </div>

        <button type="submit" class="btn new--newprimary btn--inside uppercase"
          [disabled]="otpfromuser === '' || otpfromuser.length !== 6" (click)="verifyOTP()">Submit</button>
        <div *ngIf="emailotpMsg" style="color:indianred; font-weight: bold">{{emailotpMsg}}</div>

        <div style="color:rgb(82, 80, 80); font-weight: bold; width: 360px;">We have sent OTP to
          "{{emailCheckForm.value.email}}", please check and enter OTP from your email.</div>

        <button type="submit" class="btn new--newprimary btn--inside uppercase" (click)="sendOTP()">Resend OTP</button>
      </ng-container>
    </form>


  </div>
</div>