{% extends "authentication/_base.html" %}
{% load i18n %}
{% load static %}
{% load widget_tweaks %}
{% block heading %}
    {% translate "Authentication" %}
{% endblock heading %}
{% block content %}
    <div data-mfa-login
         data-mfa-login-assert-url="{% url 'public:login_webauthn_assert' %}"
         data-mfa-login-verify-url="{% url 'public:login_webauthn_verify' %}">
        <div class="auth-error bg-red-100 border-l-4 border-red-500 text-red-700 px-4 py-3 mb-5 hidden"
             role="alert">
            <p>
                {% translate "Unable to verify your FIDO key, please try again." %}
            </p>
            <a href="{% url 'public:login' %}" class="text-red-500 underline">{% translate "Back to log in" %}</a>
        </div>
        <div class="mb-3">
            {% translate "Please authenticate using your FIDO key by following your browser instructions" %}
        </div>
    </div>
    {% if has_totp and not passwordless_route %}
        <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_totp' %}" class="btn w-full text-center">
                <i icon-name="smartphone"></i>
                {% translate "Use Authenticator app" %}
            </a>
        </div>
    {% endif %}
{% endblock content %}
