{% extends 'base.html' %}
{% load widget_tweaks %}

{% block title %}OTP verification{% endblock title %}

{% block content %}

{% if messages %}
    {% for message in messages  %}
        {% if 'error' in message.tags %}
            {% include 'components/alert.html' with is_info=False title="Error" body=message %}
        {% endif %}
    {% endfor %}
{% endif %}

{% include 'components/header.html' with title="OTP verification" description="Provide your one time password" %}

<div class="flex justify-center mt-10">
    <div class="border border-slate-300 rounded-lg p-6 w-1/2">
        <form method="POST" autocomplete="off">
            {% csrf_token %}
        
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="{{ form.otp.id_for_label }}">{{ form.otp.label }}</label> 
                {{ form.otp|add_class:"bg-slate-100 dark:bg-slate-300 text-slate-800 rounded-lg p-3 drop-shadow-xl w-full" }} 
            </div> 

            <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Submit</button>
        </form>
    </div>
</div>

{% endblock content %}