{% extends "base.html" %}
{% block title %}Enter code{% endblock %}
{% block content %}
<div class="card" style="max-width:400px;margin:70px auto">
  <h2 style="margin-top:0">Enter your code</h2>
  <p style="margin-top:0;color:#555">If <strong>{{ email }}</strong> is registered, we sent it a 6-digit code. It expires in {{ minutes }} minutes.</p>
  <form method="post" action="{{ url_for('otp_verify') }}">
    <input type="hidden" name="csrf" value="{{ csrf_token }}">
    <label for="code" style="margin-top:0">6-digit code</label>
    <input name="code" id="code" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9 ]{6,7}" maxlength="7" required autofocus
           style="width:100%;font-size:1.6rem;letter-spacing:.5rem;text-align:center;font-family:Consolas,monospace">
    <p style="margin:14px 0 0"><button class="btn" style="width:100%">Verify and sign in</button></p>
  </form>
  <div style="display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:.9rem">
    <form method="post" action="{{ url_for('otp_resend') }}" style="margin:0">
      <input type="hidden" name="csrf" value="{{ csrf_token }}">
      <button class="btn small ghost">Send a new code</button>
    </form>
    <a href="{{ url_for('otp_change') }}">Use a different email</a>
  </div>
</div>
{% endblock %}