{% extends 'public_base.html' %}
{% load static %}
{% block title %}Verify OTP{% endblock %}

{% block content %}
<div class="flex items-center justify-center min-h-screen bg-gray-100 px-4">
  <div class="w-full max-w-md bg-white rounded-xl shadow-md p-6">
    <h4 class="text-2xl font-semibold text-center text-gray-800 mb-6">Verify OTP</h4>

    {% if messages %}
      {% for message in messages %}
        <div class="mb-4 px-4 py-3 rounded text-sm
            {% if message.tags == 'error' %}
              bg-red-100 text-red-700
            {% elif message.tags == 'success' %}
              bg-green-100 text-green-700
            {% else %}
              bg-blue-100 text-blue-700
            {% endif %}
        ">
          {{ message }}
        </div>
      {% endfor %}
    {% endif %}

    <form method="post" novalidate>
      {% csrf_token %}
      <div class="mb-4">
        <label for="otpInput" class="block text-sm font-medium text-gray-700 mb-1">Enter OTP sent to your email</label>
        <input type="text" name="otp" id="otpInput" maxlength="6" pattern="\d{6}"
               class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
               placeholder="Enter 6-digit OTP" required>
      </div>

      <div class="mb-4">
        <button type="submit"
                class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-lg font-medium transition">
          <i class="fas fa-check-circle mr-2"></i>Verify OTP
        </button>
      </div>
    </form>

    <div class="text-center text-sm text-gray-600">
      Didn’t receive the OTP?
      <a href="{% url 'request_otp' %}" class="text-blue-600 hover:underline">Resend</a>
    </div>
  </div>
</div>
{% endblock %}