{{define "title"}}{{ tr "Two-factor code" }} · {{ tr "Volumen admin" }}{{end}}
{{define "login_content"}}
  <div class="login__card">
    <h1 class="login__title">{{ tr "Two-factor code" }}</h1>
    <p class="login__pitch">{{ tr "The password is accepted; answer the second question." }}</p>

    {{if .Error}}
      <div class="status status--error" role="alert"
           {{if .RetryAfter}}id="login-lockout"{{end}}>
        <svg aria-hidden="true"><use href="/admin/assets/graphis.svg#alert-circle"></use></svg>
        <div>
          <span class="lockout-msg">{{ .Error }}</span>
          {{if .RetryAfter}}<span class="lockout-count" id="lockout-countdown" data-seconds="{{ .RetryAfter }}"></span>{{end}}
        </div>
      </div>
    {{end}}

    <form method="post" action="/admin/twofactor" class="stack">
      <input type="hidden" name="_csrf" value="{{ .CSRFToken }}">
      <div class="field">
        <label class="field__label" for="code">{{ tr "Verification code" }}</label>
        <input id="code" class="control mono" type="text" name="code"
               inputmode="numeric" autocomplete="one-time-code"
               placeholder="{{ tr "six digits, or a recovery code" }}" required autofocus>
        <p class="field__hint">{{ tr "Six digits from your application, or one of your recovery codes." }}</p>
      </div>
      <button type="submit" class="btn btn--primary login__submit">
        {{ tr "Continue" }}
        <svg aria-hidden="true"><use href="/admin/assets/graphis.svg#arrow-right"></use></svg>
      </button>
    </form>

    <p class="login__alt"><a href="/admin/login">{{ tr "Back to sign in" }}</a></p>
  </div>
{{end}}