{#
  "hidden" is used to include both login and register forms in main.html while only showing either/or
#}

<div id="login-form" class="login-register" {{ "hidden" if hidden }}>
  <form
    data-loading-disable
    hx-trigger="submit throttle:1s"
    hx-post="/auth/login/webauthn/options">
      <fieldset>
        <label for="webauthn-login">Who is going to login?</label>
        <input type="text" id="webauthn-login" name="login"
          autocomplete="webauthn"
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false"
          required>
        <small>You will be asked for your passkey.</small>
      </fieldset>
      <fieldset>
        <button type="submit" id="authenticate">Login</button>
      </fieldset>
      <hr>
      <section>
        ❔ <a href="" class="no-text-decoration" hx-on:click="event.preventDefault();document.getElementById('auth-options').toggleAttribute('hidden')">Other authentication options</a>
        <div id="auth-options" hidden>
          <hr>
          <p>Use an alternative authentication method:</p>
          <ol>
            <li>
              <a href="#" class="no-text-decoration" id="token-authentication"
              hx-post="/auth/login/request/start"
              hx-target="#body-main"
              hx-swap="innerHTML">
                Send a login request to this user, if logged in
              </a>
            </li>
            <li>
              <a href="#" class="no-text-decoration"
              _="on click
              halt the event
              set value of #token-login to value of #webauthn-login
              take @hidden from <form/> in #login-form for closest <form/>
              end">Use a terminal to confirm a generated token
              </a>
            </li>
          </ol>
        </div>
      </section>
  </form>
  <form
    data-loading-disable
    hx-trigger="submit throttle:1s"
    hx-target="#login-form"
    hx-post="/auth/login/token" hidden>
      <fieldset>
        <label for="token-login">Who is going to login?</label>
        <input type="text" id="token-login" name="login"
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false"
          required>
      </fieldset>
      <button type="submit">
          Start authentication
      </button>
      <p>
        A token will be generated and needs to be validated via command line:
        <code class="pointer" hx-on:click="!window.s?s=this.textContent:null;navigator.clipboard.writeText(s);this.textContent='Copied';setTimeout(()=>{this.textContent=s}, 1000)">./ctrl -t</code>
      </p>
      <hr>
      <p>
        <a href="#"
          _="on click
            halt the event
            set value of #webauthn-login to value of #token-login
            take @hidden from <form/> in #login-form for closest <form/>
          end">↩ Back to <mark>passkey</mark> authentication
        </a>
      </p>
  </form>
</div>