<div class="page login-bg1">
  <div class="page-single">
    <div class="container">
      <div class="row justify-content-center py-4">
        <div class="col-sm-12">
          <div class="card authentication-card mx-auto">
            <div class="pt-0 pb-2 pt-4 text-center">

              @if (!title) {
                <span class="icon-skeleton rounded-circle mb-1 header-brand"></span>
              }
              @if (title) {
                <a class="header-brand ms-0" routerLink="/">
                  @if (title?.logoimage != null) {
                    <img [src]="title?.logoimage" class="header-brand-img custom-logo-dark" alt="logo" loading="lazy" decoding="async">
                  }
                  @if (title?.logoimage1 != null;) {
                    <img [src]="title?.logoimage1" class="header-brand-img custom-logo" alt="logo" loading="lazy" decoding="async">
                  }
                </a>
              }
            </div>
            <div class="px-5 my-2 pt-0 text-center">
              <h3 class="mb-2">{{'Guest Authentication' | translate}}</h3>
              <p class="text-muted fs-13 mb-1">{{'Sign In to your account' | translate}}</p>
            </div>

            <form #verify="ngForm" (ngSubmit)="verifyOtp(verify, 'verifyOtp')">
              <div class="card-body pt-2">
                <table class="table mb-0 border-0 table-borderless">
                  <tbody>
                    <tr>
                      <td class="w-100">
                        <span class="w-50">{{'Ticket ID' | translate}}</span>
                      </td>
                      <td>:</td>
                      <td>
                        <span class="font-weight-semibold">{{ticketData?.ticket_id}}</span>
                      </td>
                    </tr>
                    <tr>
                      <td class="w-100">
                        <span class="w-50">{{'Email' | translate}}</span>
                      </td>
                      <td>:</td>
                      <td>
                        <span class="font-weight-semibold">{{ticketData?.cust?.email}}</span>

                      </td>
                    </tr>
                    <tr>
                      <td class="w-100">
                        <span class="w-50">{{'Verify OTP' | translate}}</span>
                      </td>
                      <td>:</td>
                      <td>
                        <input class="form-control mb-2" placeholder="{{'OTP' | translate}}"
                          type="password" maxlength="6" name="verifyguestotp"
                          id="guestsprukoverifyotp" ngModel>
                        <button [disabled]="waitForSomeTime" type="button" (click)="getOtp($event.target)"
                          class="btn btn-primary w-100 sprukobtnverifyemail">{{'Get OTP' |
                        translate}}</button>
                      </td>
                    </tr>

                  </tbody>
                </table>


              </div>
              <div class="card-footer">
                <button type="submit" class="btn btn-primary w-100 sprukobtnverifyemail">{{'Submit' |
                  translate}} @if (sendingResponse['verifyOtp']) {
                  <i class="fa fa-spinner fa-spin mx-1"></i>
                }</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>