{% extends "mfa/webauthn/base.html" %}
{% load i18n %}
{% load static %}
{% load allauth %}
{% load humanize %}
{% block content %}
    {% element h1 %}
        {% trans "Security Keys" %}
    {% endelement %}
    {% if authenticators|length == 0 %}
        {% element p %}
            {% blocktranslate %}No security keys have been added.{% endblocktranslate %}
        {% endelement %}
    {% else %}
        {% element table %}
            {% element thead %}
                {% element th %}
                    {% translate "Key" %}
                {% endelement %}
                {% element th %}
                    {% translate "Usage" %}
                {% endelement %}
                {% element th %}
                {% endelement %}
            {% endelement %}
            {% element tbody %}
                {% for authenticator in authenticators %}
                    {% element tr %}
                        {% element td %}
                            <div class="flex items-center gap-2">
                                {{ authenticator }}
                                {% if authenticator.wrap.is_passwordless is True %}
                                    {% element badge tags="mfa,key,primary" %}
                                        {% translate "Passkey" %}
                                    {% endelement %}
                                {% elif authenticator.wrap.is_passwordless is False %}
                                    {% element badge tags="mfa,key,secondary" %}
                                        {% translate "Security key" %}
                                    {% endelement %}
                                {% else %}
                                    {% element badge title=_("This key does not indicate whether it is a passkey.") tags="mfa,key,warning" %}
                                        {% translate "Unspecified" %}
                                    {% endelement %}
                                {% endif %}
                            </div>
                        {% endelement %}
                        {% element td %}
                            {% blocktranslate with created_at=authenticator.created_at|date:"SHORT_DATE_FORMAT" %}Added on {{ created_at }}{% endblocktranslate %}.
                            {% if authenticator.last_used_at %}
                                {% blocktranslate with last_used=authenticator.last_used_at|naturaltime %}Last used {{ last_used }}{% endblocktranslate %}
                            {% else %}
                                Not used.
                            {% endif %}
                        {% endelement %}
                        {% element td align="right" %}
                            <div class="flex items-center justify-end gap-2">
                                {% url 'mfa_edit_webauthn' pk=authenticator.pk as edit_url %}
                                {% element button href=edit_url icon="pencil" tags="mfa,authenticator,edit,tool" %}
                                    {% translate "Edit" %}
                                {% endelement %}
                                {% url 'mfa_remove_webauthn' pk=authenticator.pk as remove_url %}
                                {% element button href=remove_url icon="trash-2" tags="mfa,authenticator,danger,delete,tool" %}
                                    {% translate "Remove" %}
                                {% endelement %}
                            </div>
                        {% endelement %}
                    {% endelement %}
                {% endfor %}
            {% endelement %}
        {% endelement %}
    {% endif %}
    {% url 'mfa_add_webauthn' as add_url %}
    {% element button href=add_url icon="user-key" %}
        {% translate "Add" %}
    {% endelement %}
{% endblock %}