{% extends "base.html" %}

{% block media %}
  <style>
    .inline-header {
      font-size: 1.1em;
      padding: 4px 8px;
      padding-left: 0;
    }

    .block-header {
      font-size: 1.1em;
    }

    .block-header:first-of-type {
      padding-top: 0.5em;
    }

    #center-float {
      position: relative;
      margin: 0 auto auto -28.5em;
      left: 50%;
      width: 700px;
    }

    #totp-enable-form {
      border: none;
      background: none;
      max-width: 700px;
    }

    .totp-qr-code img, .totp-qr-code canvas {
      width: 400px;
      max-width: 100%;
      margin: 0 auto;
      display: block;
      -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: -webkit-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: pixelated;
      image-rendering: -moz-crisp-edges;
      image-rendering: crisp-edges;
    }
  </style>
{% endblock %}

{% block js_media %}
  <script>
    $(function () {
      if (window.navigator.userAgent.indexOf('Edge') >= 0) {
        var $qr = $('.totp-qr-code');
        var $canvas = $('<canvas width="400" height="400">').appendTo($qr);
        var ctx = $canvas[0].getContext('2d');
        $qr.find('img').on('load', function () {
          ctx.msImageSmoothingEnabled = false;
          ctx.imageSmoothingEnabled = false;
          ctx.drawImage(this, 0, 0, 400, 400);
          $(this).hide();
        });
      }
    });
  </script>
{% endblock %}

{% block body %}
  <div id="center-float">
    <form id="totp-enable-form" action="" method="post" class="form-area">
      {% csrf_token %}

      <div class="block-header">{{ _('Scan this code with your authenticator app:') }}</div>
      <div class="totp-qr-code"><img src="{{ qr_code }}" alt="{{ _('QR code') }}"></div>
      <div class="inline-header">{{ _('Or enter this code manually:') }}
        <code class="totp-code">{{ totp_key }}</code>
      </div>
      <hr>
      {% if form.totp_token.errors %}
        <div class="form-errors">
          {{ form.totp_token.errors }}
        </div>
      {% endif %}
      <div>
        <label class="inline-header grayed">{{ _('Enter the 6-digit code generated by your app:') }}</label>
        <span class="fullwidth">{{ form.totp_token }}</span>
      </div>
      <button style="margin-top: 0.5em" class="button" type="submit">{{ _('Enable Two Factor Authentication') }}</button>
    </form>
  </div>
{% endblock %}