- var page_Title = 'Two Factor';
- var modal                 = true;
- var theme_customizer      = true;
- var tooltip               = true;
- var sidebar               = true;
- var verification_code     = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Two Factor
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Form Layout
                    li.breadcrumb-item.active  Two Factor
          // Container-fluid starts
          .container
            .grid.grid-cols-12
              div(class="col-span-12")
                .card
                  .card-body.authentication-body
                    .authentication-wrapper.text-center
                      h5 Two-factor Authentication
                      p Click on the authentication button below and scan the QR code
                      img(src="../assets/images/forms/qr-scan.png", alt="qr-scan")
                    button.btn.btn-primary.mt-5.text-white(data-bs-toggle='modal' data-bs-target='#exampleModalToggle' role='button') 2 Factor Authentication
                    #exampleModalToggle.modal.fade(aria-hidden='true' aria-labelledby='exampleModalToggle' tabindex='-1')
                      .modal-dialog.modal-dialog-centered
                        .modal-content
                          .modal-header
                            h5#exampleModalLongTitle.modal-title Two-factor Authentication
                            button.btn-close.py-0(type='button', data-bs-dismiss='modal', aria-label='Close')
                          .modal-body
                            .modal-toggle-wrapper
                              p.mb-4 To log into your account, you'll also need to enter your username, password, and a code that was sent
                                |  to you through SMS or an app.
                              .authentication-options
                                .form-check.radio.radio-primary.ps-0
                                  ul.radio-wrapper
                                    li
                                      input#radioOptionWizard1.form-check-input(type='radio', name='radio2', value='option2')
                                      label.form-check-label.mb-0(for='radioOptionWizard1')
                                        i.fa-solid.fa-gear.fa-spin
                                        span.flex.flex-col
                                          span 2FA Authenticator
                                          span Obtain codes from a authy/google authenticator/ios 15 etc.
                                    li 
                                      input#radioOptionWizard2.form-check-input(type='radio', name='radio2', value='option2' checked='')
                                      label.form-check-label.mb-0(for='radioOptionWizard2')
                                        i.fa-solid.fa-comments
                                        span.flex.flex-col
                                          span SMS
                                          span The backup login method will be sent to you via SMS if you require it.
                              button.btn.btn-dark.w-full.mt-3.text-white(data-bs-target='#exampleModalToggle2' data-bs-toggle='modal' data-bs-dismiss='modal' class='!rounded-full') Next
                              button.btn.rounded-full.w-full.pb-0.dark-toggle-btn(type='button', data-bs-dismiss='modal') Cancel
                    #exampleModalToggle2.modal.fade(aria-hidden='true' aria-labelledby='exampleModalToggle2' tabindex='-1' )
                      .modal-dialog.modal-dialog-centered
                        .modal-content
                          .modal-header
                            h5#exampleModalLongTitle1.modal-title Scan QR code
                            button.btn-close.py-0(type='button', data-bs-dismiss='modal', aria-label='Close')
                          .modal-body.main-qr-code
                            .modal-toggle-wrapper
                              p.mb-4 Scan the QR code using an authenticator app and website such as abc 
                                | authenticator, OTP xyz, or pqr authenticator. You must input the six-digit code it generates below.
                              .modal-img 
                                div.qr-img
                                  img(src="../assets/images/forms/qr-code.png", alt="qr-code")
                                .qr-content
                                  .alert.alert-light-dark.light.alert-dismissible.fade.show.text-dark.border-left-wrapper(role='alert')
                                    i.fa-solid.fa-triangle-exclamation
                                    div
                                      span If your qr code is not working then enter this code in your input field.
                                      span.font-medium TYU78DE29OLAAWCVNTYFGESWQ31098QW
                                    button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
                              form.needs-validation(novalidate='')
                                input#AccountName.form-control(type='text' required='' placeholder="Enter QR Code")
                              button.btn.btn-primary.text-white(type='button') Submit
              div(class="col-span-12")
                .card
                  .card-body.email-verify
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-6 md:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full
                          .grid.grid-cols-12.gap-4 
                            div(class="col-span-4 xxl:col-span-12 box-col-12")
                              .authenticate
                                img.max-w-full(src="../assets/images/forms/email.png", alt="")
                            div(class="col-span-8 xxl:col-span-12 box-col-12 text-center")
                              h5 Email Verification
                              p A verification code has been sent to your email. This code will be valid for 15 minutes.
                              .input-group.mb-3(class="!flex-nowrap flex gap-0 [@media(max-width:320px)]:w-[200px] [@media(max-width:320px)]:left-[30px] [@media(max-width:320px)]:rtl:right-[30px]")
                                input.form-control(type='text' placeholder="Please enter the code here" class="!rounded-l-md !rounded-none" aria-label="basic-addon2" aria-describedby='basic-addon2')
                                span#basic-addon2.input-group-text.bg-primary.text-white Verify
                      div(class="col-span-6 md:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full
                          .authenticate
                            h5.pb-2 Verification Code
                            img.max-w-full(src="../assets/images/forms/authenticate.png", alt="authenticate")
                            span.text-center We've sent a verification code to
                            span +91********70
                            form.grid.grid-cols-12.gap-3  
                              div(class="col-span-12") 
                                h5 Your OTP Code here:
                              div(class="col-span-12").otp-generate
                                input.form-control.code-input(type="text" maxlength="1" pattern="[0-9]" required)
                                input.form-control.code-input(type="text" maxlength="1" pattern="[0-9]" required)
                                input.form-control.code-input(type="text" maxlength="1" pattern="[0-9]" required)
                                input.form-control.code-input(type="text" maxlength="1" pattern="[0-9]" required)
                                input.form-control.code-input(type="text" maxlength="1" pattern="[0-9]" required)
                                input.form-control.code-input(type="text" maxlength="1" pattern="[0-9]" required)
                              div(class="col-span-12") 
                                button.btn.btn-primary.text-white.w-100(type="submit") Verify
                              div(class="col-span-12") 
                                span.m-0.text-center Not received your code?
                                span.text-center
                                  a(href="#!") Resend 
                                  | OR 
                                  a(href="#!") Call  
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
