{% extends 'unfold/layouts/unauthenticated.html' %}

{% load i18n unfold %}

{% block title %}
    {{ title }} | {{ site_title }}
{% endblock %}

{% block content %}
    {% include "unfold/helpers/unauthenticated_title.html" with title=site_title subtitle=_('Two-factor authentication') %}

    {% include "unfold/helpers/messages.html" %}

    {% if error %}
        <div class="flex flex-col gap-4 mb-8 *:mb-0">
            {% include "unfold/helpers/messages/error.html" with errors=error %}
        </div>
    {% endif %}

    <form method="post">
        {% csrf_token %}

        {% include "unfold/helpers/field.html" with field=form.code %}

        <div class="flex flex-col gap-3 mt-6">
            {% component "unfold/components/button.html" with submit=1 variant="primary" class="w-full" %}
                {% translate 'Verify' %} <span class="material-symbols-outlined relative right-0 transition-all group-hover:-right-1 text-sm">check</span>
            {% endcomponent %}
        </div>
    </form>
{% endblock %}