{% extends 'base.html' %}

{% block title %}Verify OTP - Yatra Booking System Testing{% endblock %}

{% block content %}
<div style="max-width: 420px; margin: 0 auto; text-align: center;">
    <h2 style="color:#2c3e50;">📧 Enter your login code</h2>
    <p style="color:#7f8c8d; margin: 10px 0 25px;">
        We emailed a 6-digit code to <strong>{{ email }}</strong>.<br>
        It expires in 5 minutes.
    </p>

    <form method="post" action="{% url 'verify_otp' %}">
        {% csrf_token %}
        <input type="text" name="code" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" required
            placeholder="••••••" autocomplete="one-time-code" style="width:220px; padding:14px; text-align:center; font-size:1.6rem; letter-spacing:8px;
                      border:2px solid #dfe6e9; border-radius:10px;">
        <br>
        <button type="submit" class="btn btn-primary" style="width:220px; margin-top:20px;">Verify &amp; Login</button>
    </form>

    <p style="margin-top: 25px;">
        <a href="{% url 'resend_otp' %}" style="color:#3498db; font-weight:600;">Resend code</a>
        &nbsp;·&nbsp;
        <a href="{% url 'login' %}" style="color:#7f8c8d;">Back to login</a>
    </p>
</div>
{% endblock %}