{% extends 'administration/base.html.twig' %}

{% block title %}{{ 'admin.two_factor.passkey_register_title'|trans }}{% endblock %}

{% block body %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="admin-card p-4">
                <h1 class="h4 mb-3">{{ 'admin.two_factor.passkey_register_title'|trans }}</h1>
                <p class="text-muted">{{ 'admin.two_factor.passkey_register_intro'|trans }}</p>

                {% for label, messages in app.flashes %}
                    {% for message in messages %}
                        <div class="alert alert-{{ label == 'error' ? 'danger' : (label == 'info' ? 'info' : 'success') }}">{{ message }}</div>
                    {% endfor %}
                {% endfor %}

                <form method="post"
                      action="{{ path('admin_two_factor_passkey_register') }}"
                      class="mt-3"
                      data-webauthn-tfa-action="register"
                      data-webauthn-tfa-data="{{ registrationJson|e('html_attr') }}">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('passkey_register') }}">
                    <input type="hidden" name="_auth_code" id="_auth_code" value="" autocomplete="off" />

                    <div class="mb-3">
                        <label class="form-label" for="passkey_label">{{ 'admin.two_factor.passkey_label_optional'|trans }}</label>
                        <input type="text" name="label" id="passkey_label" class="form-control" maxlength="255" placeholder="{{ 'admin.two_factor.passkey_label_placeholder'|trans }}" autocomplete="off" />
                    </div>

                    <button type="submit" class="btn btn-primary">{{ 'admin.two_factor.passkey_register_submit'|trans }}</button>
                    <a href="{{ path('admin_two_factor') }}" class="btn btn-link">{{ 'admin.two_factor.passkey_register_cancel'|trans }}</a>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascriptBottom %}
<script src="/js/tfa_webauthn.js" defer></script>
{% endblock %}