{% extends "mfa/webauthn/base.html" %}
{% load i18n %}

{% block title %}
  {% trans "Add Security Key" %}
{% endblock title %}

{% block breadcrumbs %}
  {{ block.super }}
  <c-breadcrumbs.item href="{% url 'mfa_index' %}"
                      text="{% trans 'Two-Factor Authentication' %}" />
  <c-breadcrumbs.item href="{% url 'mfa_list_webauthn' %}"
                      text="{% trans 'Security Keys' %}" />
  <c-breadcrumbs.item text="{% trans 'Add' %}" />
{% endblock breadcrumbs %}

{% block page.content %}
  <c-form.card method="post"
               action="{% url 'mfa_add_webauthn' %}"
               title="{% trans 'Add Security Key' %}">
    {% csrf_token %}
    <c-slot name="actions">
      <c-button type="submit"
                id="mfa_webauthn_add"
                variant="primary"
                text="{% trans 'Register Key' %}" />
    </c-slot>
    {% if form.passwordless %}
      <div class="form-check mb-3">
        <input class="form-check-input"
               type="checkbox"
               id="{{ form.passwordless.auto_id }}"
               name="{{ form.passwordless.html_name }}"
               {% if form.passwordless.value %}checked{% endif %} />
        <label class="form-check-label"
               for="{{ form.passwordless.auto_id }}">{{ form.passwordless.label }}</label>
        <div class="form-text">{{ form.passwordless.help_text }}</div>
      </div>
    {% endif %}
    {{ form.credential }}
  </c-form.card>
{% endblock page.content %}

{% block extra_js %}
  {{ block.super }}
  {% include "mfa/webauthn/snippets/scripts.html" %}
  {{ js_data|json_script:"js_data" }}
  <script data-allauth-onload="allauth.webauthn.forms.addForm" type="application/json">
    {
      "ids": {
        "add": "mfa_webauthn_add",
        "passwordless": "{{ form.passwordless.auto_id }}",
        "credential": "{{ form.credential.auto_id }}",
        "data": "js_data"
      }
    }
  </script>
{% endblock extra_js %}