{% extends "base.j2" -%}
{% block content -%}
<section class="one-column">
  <section class="login-card elevation-3 animate-fade-in-up">

    <h2 class="type-headline-3 login-card-title">Verification Code</h2>
    <p class="type-body login-card-subtitle">Enter the 6 digit code we emailed you to log in.</p>

    <form method="post" action="/verification-challenge" class="login-form">

      <label for="raw-otp" class="type-label login-form-label">Verification code</label>
      <input
          name        = "raw-otp"
          type        = "number"
          id          = "raw-otp"
          class       = "login-form-input"
          tabindex    = "1"
          value       = "{% if raw_otp %}{{ raw_otp }}{% endif %}"
          placeholder = "6 digit code"
          required
          autofocus />

      <button type="submit" name="submit" id="submit" class="mps-button mps-button-green login-form-submit">
        Verify code
      </button>

    </form>

    <div class="login-card-hint">
      <span class="type-body-sm"><strong>Didn't get a code?</strong> Check your spam folder, or <a href="/join-or-log-in">try again</a> with a different email address.</span>
    </div>

  </section>
</section>
{%- endblock -%}
