{% 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">
                <p>For the security of your account, we require verification before you can continue on to our site.</p>
                <p>We will be verifying via <strong>{{ obfuscated_phone_number }}</strong>.</p>
            </div>
        </div>
        {% include "twilio_2fa/_messages.html" %}
        <div class="row">
            <div class="col-8 border-top my-2 py-2 m-auto"></div>
        </div>
        <div class="row">
            <div class="col-12 mb-2 text-center">
                Choose a verification method:
            </div>
            {% for method in methods %}
            <div class="col-12 my-2 text-center">
                <button type="submit" name="method" value="{{ method.value }}" class="btn btn-outline-primary" style="width: 60%">
                    {% if method.icon %}
                    <i class="{{ method.icon }} pe-1"></i>
                    {% endif %}
                    {{ method.label }}
                </button>
            </div>
            {% endfor %}
        </div>
        {% csrf_token %}
    </form>
{% endblock %}
