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

{% block content %}
    {% block content_header %}{% endblock %}
    {% include "twilio_2fa/_messages.html" %}
    {% if can_change|default_if_none:True %}
    <form class="form" method="post">
        <div class="row mb-4">
            <div class="col-12 m-auto">
                <div class="form-floating has-validation">
                    {% render_field form.phone_number class+="form-control" placeholder="Placeholder" %}
                    <label for="phone_number">Enter your phone number</label>
                    {% include "twilio_2fa/_form_errors.html" with field=form.phone_number %}
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-6 m-auto">
                <button type="submit" class="btn btn-outline-primary" style="width: 100%">
                    Continue
                </button>
            </div>
            {% if is_optional %}
            <div class="col-6">
                <a href="{{ skip_href }}" class="btn btn-outline-secondary" style="width: 100%">
                    Skip
                </a>
            </div>
            {% endif %}
        </div>
        {% csrf_token %}
    </form>
    {% endif %}
{% endblock %}
