{% extends "base.html" %}
{% block title %}Enter code{% endblock %}
{% block content %}
<div class="auth-wrap">
  <div class="auth-top"><span class="logo">{{ icon('cap') }}</span><div><strong>College KT Portal</strong><small>Knowledge Transfer</small></div></div>
  <div class="auth-card">
    <h2>{{ icon('mail') }} Enter your code</h2>
    <p class="sub">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 }}">
      <div class="field">
        <label for="code" class="req">6-digit code</label>
        <input name="code" id="code" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9 ]{6,7}" maxlength="7" required autofocus placeholder="000000"
               style="font-size:1.7rem;letter-spacing:.55rem;text-align:center;font-family:Consolas,monospace;padding:10px">
      </div>
      <button class="btn block" style="margin-top:16px">{{ icon('check') }} Verify and sign in</button>
    </form>
    <div style="display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2)">
      <form method="post" action="{{ url_for('otp_resend') }}" style="margin:0">
        <input type="hidden" name="csrf" value="{{ csrf_token }}">
        <button class="btn small ghost">{{ icon('reset') }} Send a new code</button>
      </form>
      <a href="{{ url_for('otp_change') }}" style="font-size:.9rem">{{ icon('arrow-left') }} Use a different email</a>
    </div>
  </div>
</div>
{% endblock %}