{% extends "base.html" %}
{% load i18n %}

{% block content %}
<div class="container py-5">
    <div class="mb-4">
        <a href="{% if purpose == 'registration' %}{% url 'register' %}{% else %}{% url 'login' %}{% endif %}" class="btn btn-outline-secondary btn-sm">
            <i class="fa-solid fa-arrow-left me-1"></i> {% trans "Back" %}
        </a>
    </div>
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-body p-5">
                    <h2 class="text-center mb-4">{% trans "Verify Your Account" %}</h2>
                    <p class="text-muted text-center mb-4">
                        {% if otp_method == 'email' %}
                            {% if purpose == 'registration' %}
                                {% trans "We have sent a verification code to your email address. Please enter it below to complete your registration." %}
                            {% else %}
                                {% trans "We have sent a verification code to your email address. Please enter it below to log in." %}
                            {% endif %}
                        {% else %}
                            {% if purpose == 'registration' %}
                                {% trans "We have sent a verification code to your WhatsApp number. Please enter it below to complete your registration." %}
                            {% else %}
                                {% trans "We have sent a verification code to your WhatsApp number. Please enter it below to log in." %}
                            {% endif %}
                        {% endif %}
                    </p>
                    <form method="post">
                        {% csrf_token %}
                        {% for field in form %}
                            <div class="mb-3">
                                <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                                {{ field }}
                                {% if field.errors %}
                                    {% for error in field.errors %}
                                        <div class="text-danger small">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        {% endfor %}
                        <div class="d-grid gap-2 mt-4">
                            <button type="submit" class="btn btn-primary btn-lg">{% trans "Verify" %}</button>
                        </div>
                    </form>
                    <div class="text-center mt-3">
                        <small>{% trans "Didn't receive the code?" %} <a href="{% if purpose == 'registration' %}{% url 'register' %}{% else %}{% url 'login' %}{% endif %}">{% trans "Try again" %}</a></small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}