{% extends "mfa_auth_base.html" %}
{% load static %}

{% block content %}


    <div class="col-lg-8 col-md-8 col-12 mx-auto">
    <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
      <span class="mask  bg-gradient-primary  opacity-6"></span>
    </div>
    <div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom "  >
                <div class="card-header pb-0 p-3 ">
                    <h6 class="mb-0">One Time Password</h6>
                </div>
                <div class="card-body">
                    <form METHOD="POST" ACTION="{% url 'totp_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
                        {% csrf_token %}
                            {%  if invalid %}
                            <div class="alert alert-danger">
                                Sorry, The provided token is not valid.
                            </div>
                            {% endif %}
                        {% if quota %}
                            <div class="alert alert-warning">
                                {{ quota }}
                            </div>
                        {% endif %}
                        <fieldset>

                            <div class=" text-left">
                              <p>Enter the 6-digits on your authenticator</p>
                            </div>


                                  <div class="form-group">
                                    <div class="input-group input-group-dynamic mb-3">
                                        <span class="input-group-addon input-group-text">
                                            <i class="glyphicon glyphicon-lock bi bi-lock"></i>
                                        </span>
                                        <input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp"  type="text"  id="otp" autofocus>
                                    </div>
                                  </div>
                              
                                  <div class="form-group d-grid gap-2">
                                      <input type="{% if mode == "auth" %}submit{% elif mode == 'recheck'  %}button{% endif %}" {% if mode ==       "recheck" %}onclick="send_totp()" {% endif %} class="btn btn-lg btn-success btn-block" value="Sign in">
                                  </div>


                        </fieldset>
                    </form>
                    

                    <div class="">
                        {% if request.session.mfa_methods|length > 1 %}
                            <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
                        {% endif %}
                    </div>

                </div>
    </div>
</div>

{% include "modal.html" %}
{% endblock %}