<div class="ui attached message">
    <div class="header">
        {% trans %}Authenticator application configuration{% endtrans %}
    </div>
    {% trans %}You need to install an authenticator application to generate one-time passcodes for {{ website_name }}.{% endtrans %}
    {% trans %}Then, configure the authenticator application with one of the following methods:{% endtrans %}
</div>

<div class="ui attached segment">
    <div class="ui two column vertically divided grid">
        <div class="ui row">
            <div class="ui column">
                <h4 class="ui header">
                    {% trans %}1 - Automatic configuration{% endtrans %}
                </h4>

                {% trans %}
                    If the authenticator application is installed on the device that you are currently using, you can configure it by clicking on this button:
                {% endtrans %}
            </div>

            <div class="ui middle aligned column">
                <a type="button" class="ui teal fluid button" href="{{ otp_uri }}">
                    {% trans %}Open authenticator application{% endtrans %}
                </a>
            </div>
        </div>

        <div class="ui row">
            <div class="ui column">
                <h4 class="ui header">
                    {% trans %}2 - QR Code scanning{% endtrans %}
                </h4>

                {% trans %}
                    If the previous button did not work or if your authenticator application is installed on another device, please open it and use it to scan the following qrcode:
                {% endtrans %}
            </div>
            <div class="ui column">
                <img src="data:image/png;base64, {{ qr_image }}" alt="{% trans %}Secret token{% endtrans %}" class="ui fluid bordered image"/>
            </div>
        </div>


        <div class="ui row">
            <div class="ui column">
                <h4 class="ui header">
                    {% trans %}3 - Secret token{% endtrans %}
                </h4>

                {% trans %}
                    If your device cannot scan images, you can configure your authenticator application by manually copying this secret token:
                {% endtrans %}
            </div>
            <div class="ui column">
                <div class="ui fluid labeled action input">
                    <input class="copy-text" type="text" id="secret" name="secret" value="{{ secret }}" readonly data-copy="secret">
                    <button class="ui teal icon button copy-button" data-copy="secret">
                        <i class="copy icon"></i>
                        {% trans %}Copy secret{% endtrans %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ui top attached message">
    <div class="header">
        {% trans %}Passcode confirmation{% endtrans %}
    </div>
    {% trans %}
        Once your authenticator application is correctly configured, you need to generate a one-time passcode and fill it in the form below.{% endtrans %}
</div>
