{% load i18n %}
<div class="panel">

  <h1>{% trans "Security keys" %}</h1>
  <div class="editable popin help marg-top-15">
    {% blocktrans trimmed %}
    Register your security key and use it as a 2FA method or for password-less login.
    {% endblocktrans %}

    <div class="marg-top-15 alert alert-info">
    <p>
    {% blocktrans trimmed %}
    When using a U2F security key such as <b>yubikeys</b> the initial prompt may show other
    device-internal keys first (such as fingerprint scanners and security pins).
    {% endblocktrans %}
    </p>

    <p>
    {% blocktrans trimmed %}
    If your yubikey is plugged in but does not show up in the list, <b>cancel</b> the initial prompt and a new prompt for your yubikey should appear afterwards.
    {% endblocktrans %}
    </p>
    </div>
  </div>


  <div class="list editable always"
    data-edit-module="security_key_listing"
    data-edit-target="/security_keys"
    data-edit-id="{{ instance.id }}">

    <div class="row header">
      <div class="col-xs-8 col-sm-10 col-md-10">
        <div>{% trans "Name" %}</div>
      </div>
      <div class="col-xs-4 col-sm-2 col-md-2"></div>
    </div>

    <div data-edit-component="list" data-edit-template="security-key-item">
    {%   for key in user.webauthn_security_keys.all %}
      <div class="row marg-top" data-edit-id="{{ key.id }}" data-edit-label="{{ key.name }}">
        <div class="col-xs-8">
          <span data-edit-name="name">{{ key.name }}</span>
          <span>{% if key.passwordless_login%}({% trans "passwordless-login" %}){% endif %}</span>
        </div>
        <div class="col-xs-4 right">
          <a class="btn btn-default" data-edit-action="remove">{% trans "Remove" %}</a>
        </div>
      </div>
    {%   endfor %}
    </div>


    <div class="row marg-top editable" data-edit-component="add">
      <div class="col-xs-4 col-sm-4 col-md-4">
        <div>{% trans "Register security key" %}</div>
      </div>
      <div class="col-xs-6 col-sm-4 col-md-5">
        <div data-edit-type="string" data-edit-name="name" data-edit-placeholder="{% trans "Name" %}"></div>

        <div data-edit-type="bool" data-edit-name="passwordless_login" style="display:inline"></div> <span>{% trans "Password-less login" %}</span>
      </div>
      <div class="col-xs-2 col-sm-4 col-md-3 right">
        <a class="btn btn-default" data-edit-action="register">{% trans "Register" %}</a>
      </div>
    </div>
  </div>

  <div id="editable-templates">
    <div id="security-key-item" class="row item">
      <div class="col-xs-8" data-edit-name="name" data-edit-placeholder="{% trans "Name" %}"></div>
      <div class="col-xs-4 right">
        <a class="btn btn-default" data-edit-action="revoke">{% trans "Remove" %}</a>
      </div>
    </div>

  </div>
</div>
