{% extends "twilio_2fa/_base.html" %}
{% load widget_tweaks %}

{% block content %}
    <form class="form" method="post">
        <div class="row mb-3">
            <div class="col-12 text-center">
                    Please enter the token we
                    {% if method == "sms" %}text to you
                    {% elif method == "call" %}called you with
                    {% elif method == "email" %}e-mailed to you
                    {% elif method == "whatsapp" %}sent to you in WhatsApp
                    {% else %}sent to you{% endif %}
                    at <strong>{{ obfuscated_phone_number }}</strong> in the field below.
            </div>
        </div>
        {% include "twilio_2fa/_messages.html" %}
        <div class="row mb-4">
            <div class="col-10 m-auto">

                <div class="row">
                    <div class="col-8">
                        {% render_field form.token class+="form-control text-center" placeholder="Enter your token here" style="width: 100%" %}
                    </div>
                    <div class="col-4">
                        <button type="submit" class="btn btn-outline-primary" style="width: 100%">
                            Verify
                        </button>
                    </div>
                    {% if form.token.errors %}
                    <div class="col-12 invalid-feedback">
                        {{ form.token.errors }}
                    </div>
                    {% endif %}
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-12 text-center small text-muted">
                <a href="{% url 'twilio_2fa:start' %}?action=retry" class="text-reset">
                    Haven't received the
                    {% if method == "sms" %}text
                    {% elif method == "call" %}call
                    {% elif method == "whatsapp" %}message
                    {% elif method == "email" %}e-mail
                    {% else %}code{% endif %}?
                </a>
            </div>
        </div>
        {% csrf_token %}
    </form>
{% endblock %}
