{% extends "main_card.html.twig" %}

{% block card_title %}<i class="fas fa-plus-square fa-fw"></i> {% trans %}tfa_u2f.add_key.title{% endtrans %}{% endblock %}

{% block card_content %}
    <p>{% trans %}tfa_u2f.explanation{% endtrans %}</p>
    <p><b>{% trans %}tfa_u2f.add_key.backup_hint{% endtrans %}</b></p>

    {% if not app.request.secure %}
        <p class="text-warning"><b><i class="fas fa-exclamation-triangle fa-fw"></i> {% trans %}tfa_u2f.http_warning{% endtrans %}</b></p>
    {% endif %}

    <form method="post" class="form" action="{{ path('webauthn_register') }}" data-webauthn-tfa-action="register" data-webauthn-tfa-data='{{ registrationRequest|raw }}'>
        <div id="u2fkeyname" class="form-group row">
            <div class="col-9">
                <input type="text" class="form-control " name="keyName" id="keyName" placeholder="Shown key name"/>
            </div>
            <div class="col-3">
                <button type="submit" class="btn btn-success">{% trans %}tfa_u2f.add_key.add_button{% endtrans %}</button>
            </div>
        </div>
        <div id="u2fpressbutton" style="display: none;" class="text-center h4">{{ 'r_u2f_two_factor.pressbutton'|trans }}</div>
        <input type="hidden" name="_auth_code" id="_auth_code" />
        <div id="u2fError" style="display: none;" class="text-center h4"></div>
    </form>

    <a href="{{ path('user_settings') }}">{% trans %}tfa_u2f.add_key.back_to_settings{% endtrans %}</a>
{% endblock %}