{% extends 'default.html' %}
{% set active_page = "setting" %}
{% block title %}
  Manage Security Key
{% endblock %}

{% block head %}
  <script src="{{ url_for('static', filename='node_modules/qrious/dist/qrious.min.js') }}"></script>
{% endblock %}

{% block default_content %}
  <div class="card">
    <div class="card-body">
      <h1 class="h2">Manage Your Security Key</h1>
      <p>Unlink all keys will also disable WebAuthn 2FA.</p>

      <form id="formManageKey" method="post">
        {{ fido_manage_form.csrf_token }}
        {{ fido_manage_form.credential_id(class="form-control", placeholder="") }}
      </form>

      <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Linked At</th>
            <th scope="col" class="text-center">Operation</th>
          </tr>
        </thead>
        <tbody>
          {%for key in keys%} 
          <tr>
            <th scope="row">{{ key.id }}</th>
            <td>{{ key.name }}</td>
            <td>{{key.created_at | dt}}</td>
            <td class="text-center"><button class="btn btn-outline-danger" onclick="$('#credential_id').val('{{ key.credential_id }}'); $('#formManageKey').submit();">Unlink</button></td>
          </tr>
          {%endfor%} 
          <tr>
            <th scope="row">#</th>
            <td>Link a New Key</td>
            <td></td>
            <td class="text-center"><a href="{{ url_for('dashboard.fido_setup') }}"><button class="btn btn-outline-success">Link</button></a></td>
          </tr>
        </tbody>
      </table>



    </div>
  </div>
{% endblock %}