{% extends "base_settings_page.html" %}
{% block content %}
<div style="max-width: 700px;">

    <p>On this page you can configure a new Authenticator app. Please use an authenticator app to scan the QR code.</p>

    <p>Note: if you have not an authenticator app yet, you might want to use
        <a href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp" rel="noopener" target="_blank">FreeOTP
            Authenticator</a> for example.</p>

    <img src="data:image/png;base64,{{ qr_code }}" style="width: 150px; margin: 20px 0px;"/>

    <p>If you can't scan the QrCode, please use the following parameters instead:</p>
    <ul>
        <li><strong>Account name:</strong> <i>{{ account_name }}</i> <a
                href="javascript:copyToClipboard('{{ account_name }}')">Copy to clipboard</a></li>
        <li><strong>Secret key:</strong> <i>{{ secret_key }}</i> <a
                href="javascript:copyToClipboard('{{ secret_key }}')">Copy
            to clipboard</a></li>
    </ul>

    <p>Once you have scanned the QrCode, please generate a code and type it below:</p>

    <div class="form-group">
        <label for="inputDevName" class="form-label mt-4">Device name</label>
        <input type="text" class="form-control" id="inputDevName" aria-describedby="emailHelp" placeholder="Enter email"
               value="Authenticator app">
        <small class="form-text text-muted">Please give a name to your device to identity it more easily later.</small>
    </div>

    <div class="form-group">
        <label for="inputFirstCode" class="form-label mt-4">First code</label>
        <input type="text" class="form-control" id="inputFirstCode" aria-describedby="emailHelp" placeholder="XXXXXX"
               maxlength="6"/>
        <small class="form-text text-muted">Check that your authenticator app is working correctly by typing a first
            code.</small>
    </div>

    <script src="/assets/js/clipboard_utils.js"></script>

</div>

{% endblock content %}