{{template "header" .}}

    <form action="{{.URLMap.URLFor "/login/otp"}}" method="post">
      {{.CSRFField}}
      {{.NextURL.InputField}}

      {{if .SiteLogo}}
      <img class="mb-4" src="{{.URLMap.URLFor "/static/img/site_logo"}}">
      {{end}}

      <h1 class="h1 mb-3 fw-normal">Sign In</h1>

      {{if .Error}}
      <p class="error">
        Authentication failed.
      </p>
      {{end}}

      <!-- OTP by Neha Shinde from the Noun Project -->
      <img class="img-2fa" src="{{.URLMap.URLFor "/static/noun-otp.svg"}}">

      <div class="form-floating">
        <input type="text" id="inputOTP" name="otp" size="6"
               class="form-control" required pattern="\d{6}" autofocus autocomplete="off">
        <label for="inputOTP">OTP</label>
      </div>
      
      <button type="submit" class="w-100 btn btn-lg btn-primary">Sign in</button>

      {{if .Session.AuthResponse.Has2FAMethod "u2f"}}
      <p class="mt-5 mb-3 text-muted">
        <a href="{{.URLMap.URLFor (.NextURL.AddParam "/login/u2f")}}">
          Use a hardware token instead.
        </a>
      </p>
      {{end}}

    </form>

{{template "footer" .}}