{% extends "authentication/_base.html" %}
{% load i18n %}
{% load static %}
{% load widget_tweaks %}
{% block heading %}
    <i icon-name="smartphone"></i>
    {% translate "Authentication" %}
{% endblock heading %}
{% block content %}
    <div class="mb-3">
        {% blocktranslate trimmed %}
            Please open your authenticator app on your device and enter the 6-digit code for "{{ BRANDING_TITLE }}" to verify your identity:
        {% endblocktranslate %}
    </div>
    <form method="post"
          autocomplete="off"
          action="{% url 'public:login_totp' %}"
          class="flex flex-nowrap gap-4">
        {% csrf_token %}
        <input autocomplete="false"
               id="totp_code"
               name="totp_code"
               type="text"
               minlength="6"
               maxlength="6"
               pattern="\d{6}"
               autofocus />
        <button class="btn-blue btn">
            {% translate "Confirm" %}
        </button>
    </form>
    {% if can_use_webauthn %}
        <div class="inline-flex items-center justify-center w-full">
            <hr class="w-full h-px my-4 bg-gray-200 border-0 dark:bg-gray-300" />
            <span class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 bg-white left-1/2">{% translate "or" %}</span>
        </div>
        <div class="mb-3 mt-4">
            <a href="{% url 'public:login_webauthn' %}"
               class="btn w-full text-center">
                <i icon-name="key"></i>
                {% translate "Use Security Key" %}
            </a>
        </div>
    {% endif %}
{% endblock content %}
