{% 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 %}