{% 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-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 %}