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

{% block title %}
  {% trans "Security Keys" %}
{% endblock title %}

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

{% block page.content %}
  <c-card title="{% trans 'Security Keys' %}">
    {% if authenticators %}
      <table class="table mb-3">
        <thead>
          <tr>
            <th>{% trans "Name" %}</th>
            <th>{% trans "Type" %}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for authenticator in authenticators %}
            <tr>
              {% with wrapped=authenticator.wrap %}
                <td>{{ wrapped.name }}</td>
                <td>
                  {% if wrapped.is_passwordless %}
                    <c-badge variant="primary" text="{% trans 'Passkey' %}" />
                  {% elif wrapped.is_passwordless is False %}
                    <c-badge variant="secondary"
                             text="{% trans 'Security key' %}" />
                  {% else %}
                    <c-badge variant="warning"
                             text="{% trans 'Unspecified' %}" />
                  {% endif %}
                </td>
                <td class="text-end">
                  <c-dropdown icon="three-dots" :caret="False" align="end">
                    <c-dropdown.item href="{% url 'mfa_edit_webauthn' authenticator.pk %}"
                                     text="{% trans 'Edit' %}" />
                    <c-dropdown.divider />
                    <c-dropdown.item href="{% url 'mfa_remove_webauthn' authenticator.pk %}"
                                     class="link-danger"
                                     icon="delete"
                                     text="{% trans 'Remove' %}" />
                  </c-dropdown>
                </td>
              {% endwith %}
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <p>{% trans "No security keys have been registered." %}</p>
    {% endif %}
    <c-button href="{% url 'mfa_add_webauthn' %}"
              variant="primary"
              text="{% trans 'Add Security Key' %}" />
  </c-card>
{% endblock page.content %}