{% extends "authentication/_base.html" %}
{% load i18n %}
{% load static %}
{% load widget_tweaks %}
{% block heading %}
    {% translate "Add FIDO key" %}
{% endblock heading %}
{% block content %}
    <form id="add-mfa-key"
          data-mfa-challenge-url="{% spaceless %} {% if request.region %} {% url 'get_mfa_challenge' region_slug=request.region.slug %} {% else %} {% url 'get_mfa_challenge' %} {% endif %} {% endspaceless %}">
        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 px-4 py-3 mb-5 hidden add-mfa-error"
             role="alert">
            <p>
                {% translate "Something went wrong during FIDO registration" %}:
            </p>
            <p class="add-mfa-error-msg">
            </p>
        </div>
        <div class="mb-6">
            <p>
                {% translate "Please enter a name for your new key. This name can be used to find the correct key in case you need to revoke authentication." %}
            </p>
        </div>
        <div class="mb-4">
            <label class="block text-gray-600 text-sm font-bold mb-2"
                   for="{{ form.name.id_for_label }}">
                {{ form.name.label }}
            </label>
            {% translate "Enter key name here" as name_placeholder %}
            {% render_field form.name|add_error_class:"border-red-500" placeholder=name_placeholder class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-600 leading-tight focus:outline-none focus:shadow-outline" %}
        </div>
        <div class="flex items-center justify-between">
            <button class="btn w-full">
                {% translate "Add FIDO key" %}
            </button>
        </div>
    </form>
    <div class="mfa-not-supported mb-6 hidden">
        <p>
            {% translate "It seems like your browser does not support Webauthn" %}
        </p>
    </div>
{% endblock content %}
