{% extends "base/layout.html" %}
{% block content %}
  <div class="max-w-md rounded-2xl bg-white border p-6">
    <h1 class="text-2xl font-semibold">OTP Verification</h1>
    <p class="text-slate-600 mt-1 text-sm">Dev mode: OTP is printed in console.</p>

    <form method="post" class="mt-5 grid gap-3">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />

      <label class="grid gap-1">
        <span class="text-sm text-slate-600">OTP Code</span>
        <input class="border rounded-xl px-3 py-2" name="otp" inputmode="numeric" required />
      </label>

      <button class="rounded-xl bg-slate-900 text-white px-4 py-2 text-sm mt-2" type="submit">Verify</button>
    </form>
  </div>
{% endblock %}