<div class="mx-auto max-w-md">
  <div class="bg-white py-8 px-6 shadow rounded-lg sm:px-10 dark:bg-gray-900">
    <div class="mb-8">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Two-Factor Authentication</h2>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        Enter the 6-digit code from your authenticator app to complete sign in.
      </p>
    </div>

    <%= form_with url: totp_verification_path, method: :post, class: "space-y-6", data: {
      controller: "form-submit-protection",
      turbo: false
    } do |form| %>
    <%= hidden_field_tag :rd, params[:rd] if params[:rd].present? %>
      <div>
        <%= label_tag :code, "Verification Code", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
        <%= text_field_tag :code,
            nil,
            placeholder: "000000",
            maxlength: 8,
            required: true,
            autofocus: true,
            autocomplete: "off",
            class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-center text-2xl tracking-widest font-mono sm:text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" %>
        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
          Enter your 6-digit authenticator code or an 8-character backup code
        </p>
      </div>

      <div>
        <%= form.submit "Verify",
            data: { form_submit_protection_target: "submit" },
            class: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900" %>
      </div>
    <% end %>

    <% if @user_has_webauthn %>
      <div data-controller="webauthn" data-webauthn-check-url-value="/webauthn/check">
        <input type="hidden" name="webauthn_email" value="<%= @pending_email %>">
        <div class="mt-4">
          <div class="relative my-4">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
            </div>
            <div class="relative flex justify-center text-sm">
              <span class="px-2 bg-white text-gray-500 dark:bg-gray-900 dark:text-gray-400">Or</span>
            </div>
          </div>
          <button type="button"
                  data-action="click->webauthn#authenticate"
                  class="w-full rounded-md px-3.5 py-2.5 bg-green-600 hover:bg-green-500 text-white font-medium cursor-pointer flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
            </svg>
            Use Passkey Instead
          </button>
          <div data-webauthn-target="error" class="mt-2 text-sm text-red-600" style="display: none;"></div>
        </div>
      </div>
    <% end %>

    <div class="mt-6">
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white text-gray-500 dark:bg-gray-900 dark:text-gray-400">Need help?</span>
        </div>
      </div>

      <div class="mt-4 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Lost access to your authenticator?
        </p>
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
          Contact an administrator for assistance.
        </p>
      </div>

      <div class="mt-4 text-center">
        <%= link_to "Cancel and sign in again", signin_path, class: "text-sm text-blue-600 hover:text-blue-500" %>
      </div>
    </div>
  </div>
</div>
