{% extends 'base.html' %}
{% load i18n static %}
{% block content %}
    <div class="row">
        <div class="row flex-center min-vh-50 py-5">
            <div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
                <a class="d-flex flex-center text-decoration-none mb-4"
                   href="{% url 'home' %}">
                    <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                        <img class="d-dark-none"
                             src="{% static 'images/logos/logo-d.png' %}"
                             alt="{% trans 'home' %}"
                             width="58" />
                        <img class="d-light-none"
                             src="{% static 'images/logos/logo.png' %}"
                             alt="{% trans 'home' %}"
                             width="58" />
                    </div>
                </a>
                <div class="px-xxl-5">
                    <div class="text-center mb-6">
                        <h4 class="text-body-highlight">{{ _("Enter the verification code") }}</h4>
                        <p class="text-body-tertiary mb-0">
                            {{ _("An email containing a 6-digit verification code has been sent to your email.") }}
                        </p>
                        <form class="verification-form" method="POST">
                            {% csrf_token %}
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <input class="form-control px-2 text-center"
                                       type="number"
                                       name="otp_code"
                                       required
                                       maxlength="6" />
                            </div>
                            <button class="btn btn-phoenix-primary w-100 mb-5" type="submit">{{ _("Verify") }}</button>
                            <a class="fs-9" href="">{{ _("Didn’t receive the code") }}</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}