<form id="login-form"
      hx-post="/api/htmx/auth/otp/verify"
      hx-target="#login-form"
      hx-swap="outerHTML"
      class="flex flex-col gap-4">

  <h2 class="text-xl font-semibold text-base-content">{{ check_inbox }}</h2>
  <p class="text-sm text-base-content/70">{{ sent_to | safe }}</p>

  {% if error %}
  <p class="text-error text-sm" role="alert">{{ error }}</p>
  {% endif %}

  <input type="hidden" name="email" value="{{ email }}">
  <input type="hidden" name="lang" value="{{ lang }}">
  {% if return_url %}<input type="hidden" name="return_url" value="{{ return_url }}">{% endif %}

  <input type="text"
         name="code"
         id="auth-otp-code"
         inputmode="numeric"
         autocomplete="one-time-code"
         aria-label="Verification code"
         placeholder="{{ placeholder }}"
         maxlength="6"
         required
         class="input input-bordered w-full text-center tracking-widest text-xl">

  <button type="submit" class="btn btn-primary w-full">{{ verify_btn }}</button>

  <button type="button"
          class="btn btn-sm w-full border border-base-content/20 text-base-content/60 bg-transparent hover:bg-base-content/5"
          hx-post="/api/htmx/auth/otp/request"
          hx-include="[name=email],[name=lang],[name=return_url]"
          hx-target="#login-form"
          hx-swap="outerHTML">{{ resend_btn }}</button>

  <button type="button"
          class="btn btn-ghost btn-xs dark:text-gray-400 text-base-content/50 mt-1"
          hx-get="{{ back_btn_url }}"
          hx-target="#modal-slot"
          hx-swap="outerHTML">{{ back_btn }}</button>
</form>
