{% extends "base.html" %}
{% from "components/page-header.html" import page_header %}
{% from "components/components/button/macro.njk" import usaButton %}
{% from "components/components/back-link/macro.njk" import usaBackLink %}
{% from "components/table.html" import edit_field, mapping_table, row, field, row_heading %}
{% from "components/webauthn-api-check.html" import webauthn_api_check %}
{% from "components/components/error-message/macro.njk" import usaErrorMessage %}

{% set page_title = 'Security keys' %}
{% set credentials = current_user.webauthn_credentials %}

{% block extra_javascripts_before_body %}
  {{ webauthn_api_check() }}
{% endblock %}

{% block per_page_title %}
  {{ page_title }}
{% endblock %}

{% block backLink %}
  {{ usaBackLink({ "href": url_for('.user_profile') }) }}
{% endblock %}

{% block maincolumn_content %}

{% set webauthn_button %}
  {{ usaButton({
    "element": "button",
    "text": "Register a key",
    "classes": "govuk-button--secondary webauthn__api-required",
    "attributes": {
      "data-module": "register-security-key",
      "data-csrf-token": csrf_token(),
    }
  }) }}

  {{ usaErrorMessage({
    "classes": "webauthn__api-missing",
    "text": "Your browser does not support security keys. Try signing in to Notify using a different browser."
  }) }}

  {{ usaErrorMessage({
    "classes": "webauthn__no-js",
    "text": "JavaScript is not available for this page. Security keys need JavaScript to work."
  }) }}
{% endset %}

  <div class="grid-row">

    {{ usaErrorMessage({
      "classes": "banner-dangerous display-none",
      "html": (
        'There’s a problem with your security key' +
        '<p>Check you have the right key and try again. ' +
        'If this does not work, ' +
        '<a class="usa-link" href=' + url_for('main.support') + ">contact us</a>." +
        '</p>'
      ),
      "attributes": {
        "aria-live": "polite",
        "tabindex": '-1'
      }
    }) }}

    {% if credentials %}
      <div class="grid-col-10">
        {{ page_header(page_title) }}
        <div class="body-copy-table">
          {% call mapping_table(
            caption=page_title,
            field_headings=['Security key details', 'Action'],
            field_headings_visible=False,
            caption_visible=False,
          ) %}
            {% for credential in credentials %}
              {% call row() %}
                {% call field() %}
                  <div class="usa-body">{{ credential.name }}</div>
                  <div class="usa-body hint">Registered {{ credential.created_at|format_delta }}</div>
                {% endcall %}
                {{ edit_field('Manage', url_for('.user_profile_manage_security_key', key_id=credential.id)) }}
              {% endcall %}
            {% endfor %}
          {% endcall %}
        </div>
        {{ webauthn_button }}
      </div>
    {% else %}
      <div class="grid-col-6">
        {{ page_header(page_title) }}
        <p>
          Security keys are an alternative way of signing in to Notify,
          instead of getting a code in a text message
        </p>
        <p>
          You can buy any key that’s compatible with the WebAuthn
          standard.
        </p>
        {{ webauthn_button }}
      </div>
      <div class="grid-col-3">
        <img src="{{ asset_url('images/security-key.svg') }}" alt="" class="webauthn-illustration" width="149" height="150">
      </div>
      {% endif %}
    </div>
  </div>
{% endblock %}