{% extends 'base.html' %}
{% load i18n static %}
{% block content %}
    <div class="row">
        <div class="row flex-center min-vh-100 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">
                        <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>
                    </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 OTP has been sent to your email. Please enter it below") }}</p>
                        <form class="verification-form" method="post">
                            <div class="d-flex align-items-center mb-3">
                                {% csrf_token %}
                                <div class="form-floating mb-3">
                                    <input class="form-control form-control-sm"
                                           type="text"
                                           id="otp_token"
                                           placeholder="{{ _("Enter OTP") }}"
                                           required>
                                    <label class="form-label" for="otp_token">{{ _("OTP") }}</label>
                                </div>
                            </div>
                            <button class="btn btn-phoenix-primary w-100 mb-5"
                                    type="submit"
                                    disabled="disabled">{{ _("Verify") }}</button>
                            <a class="fs-9" href="">{{ _("Didn’t receive the code") }}?</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}