{% 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">Welcome</h2>
    <p class="type-body login-card-subtitle">New and existing users &mdash; one step to get in.</p>

    <form method="post" action="/join-or-log-in" class="login-form" onsubmit="submit.disabled = true; return true;">

      <input
          name        = "email2"
          type        = "email"
          id          = "email2_input"
          value       = ""
          placeholder = "Your Email Address" />

      <label for="email_input" class="type-label login-form-label">Email address</label>
      <input
          name        = "email"
          type        = "email"
          id          = "email_input"
          class       = "login-form-input"
          tabindex    = "1"
          value       = ""
          placeholder = "you@example.com"
          required
          autofocus />

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

    </form>

    <div class="login-card-hint">
      <span class="type-body-sm"><strong>What happens next?</strong> We email you a one-time code. Click it to log in &mdash; no password needed.</span>
    </div>

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