{% extends "mfa/webauthn/base.html" %}
{% load i18n %}
{% load static %}
{% load allauth %}
{% load humanize %}
{% block content %}
<div class="container-fluid bg-light py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10 col-md-12">
                <div class="card shadow border-0">
                    <div class="card-body p-5">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <div>
                                <i class="fas fa-key fa-3x text-success mb-2"></i>
                                <h1 class="h3 fw-bold text-dark d-inline ms-3">{% trans "Security Keys" %}</h1>
                            </div>
                            <div>
                                {% url 'mfa_add_webauthn' as add_url %}
                                <a href="{{ add_url }}" class="btn btn-success">
                                    <i class="fas fa-plus me-2"></i>{% translate "Add" %}
                                </a>
                            </div>
                        </div>

                        {% if authenticators|length == 0 %}
                            <div class="text-center py-5">
                                <i class="fas fa-key fa-5x text-muted mb-3"></i>
                                <p class="text-muted fs-5">
                                    {% blocktranslate %}No security keys have been added.{% endblocktranslate %}
                                </p>
                            </div>
                        {% else %}
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th scope="col">{% translate "Key" %}</th>
                                            <th scope="col">{% translate "Usage" %}</th>
                                            <th scope="col" class="text-end">{% translate "Actions" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for authenticator in authenticators %}
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <i class="fas fa-key text-success me-2"></i>
                                                        <div>
                                                            <strong>{{ authenticator }}</strong>
                                                            {% if authenticator.wrap.is_passwordless is True %}
                                                                <span class="badge bg-primary ms-2">{% translate "Passkey" %}</span>
                                                            {% elif authenticator.wrap.is_passwordless is False %}
                                                                <span class="badge bg-secondary ms-2">{% translate "Security key" %}</span>
                                                            {% else %}
                                                                <span class="badge bg-warning ms-2" title="{% translate 'This key does not indicate whether it is a passkey.' %}">{% translate "Unspecified" %}</span>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="text-muted">
                                                        {% blocktranslate with created_at=authenticator.created_at|date:"SHORT_DATE_FORMAT" %}Added on {{ created_at }}{% endblocktranslate %}.
                                                        {% if authenticator.last_used_at %}
                                                            <br><small>{% blocktranslate with last_used=authenticator.last_used_at|naturaltime %}Last used {{ last_used }}{% endblocktranslate %}</small>
                                                        {% else %}
                                                            <br><small>Not used.</small>
                                                        {% endif %}
                                                    </div>
                                                </td>
                                                <td class="text-end">
                                                    <div class="btn-group" role="group">
                                                        {% url 'mfa_edit_webauthn' pk=authenticator.pk as edit_url %}
                                                        <a href="{{ edit_url }}" class="btn btn-outline-primary btn-sm">
                                                            <i class="fas fa-edit me-1"></i>{% translate "Edit" %}
                                                        </a>
                                                        {% url 'mfa_remove_webauthn' pk=authenticator.pk as remove_url %}
                                                        <a href="{{ remove_url }}" class="btn btn-outline-danger btn-sm">
                                                            <i class="fas fa-trash me-1"></i>{% translate "Remove" %}
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}