{% extends "admin/base_site.html" %}
{% load static %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static "otp_hotp/css/qrcode.css" %}" />
    <script src="{% static "otp_hotp/js/qrcode.js" %}"></script>
{% endblock %}

{% block content %}
<div class="qrcode-container">
  <p id="qrcode">
    <img width="200" height="200"
         class="qrcode-image"
         src="{% url "admin:otp_hotp_hotpdevice_qrcode" pk=device.pk %}"
    >
  </p>
  <p id="no-qrcode" class="qrcode-hidden">
    Install <a href="https://pypi.python.org/pypi/segno/">segno</a> or <a href="https://pypi.python.org/pypi/qrcode/">qrcode</a> or use the URL below:
  </p>
  <p>{{ device.config_url }}</p>
</div>
{% endblock %}