{% extends 'base.html' %}
{% load static %}

{% block content %}
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/">Home</a></li>
  <li class="breadcrumb-item"><a href="{% url 'accounts:profile' %}">Settings</a></li>
  <li class="breadcrumb-item"><a href="{% url 'accounts:verification_devices' %}">Verification devices</a></li>
  <li class="breadcrumb-item active">Add TOTP verification device</li>
</ol>

<h3 class="mb-3">Add TOTP verification device</h3>


<form class="update-form" method="POST">{% csrf_token %}
    {{ form }}

  <div>
    <canvas data-uri="{{ form.get_provisioning_uri }}" id="qr"></canvas>
    <p>Secret: <code>{{ form.initial_secret }}</code></p>
  </div>

  <p>
    <a href="{% url 'accounts:verification_devices' %}" class="btn btn-outline-secondary">Cancel</a>
    <button type="submit" class="btn btn-primary">
      Save
    </button>
  </p>
</form>
{% endblock %}

{% block extrajs %}
<script src="{% static 'qrious/qrious.4.0.2.min.js' %}"></script>
<script nonce="{{ request.csp_nonce }}">
  $(document).ready(function(){
    var $canvas = $("#qr");
    var qr = new QRious({
      element: document.getElementById('qr'),
      size: 200,
      value: $canvas.data("uri")
    });
  });
</script>
{% endblock %}