{% extends "shell" %}

{% block content %}
<!-- Page header -->
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">
                    Enable One-time password
                </h2>
            </div>
        </div>
    </div>
</div>
<!-- Page body -->
<div class="page-body">
    <div class="container-xl">

        {% if flash %}
        <div class="alert alert-{{flash.0}}" role="alert">
            <h4 class="alert-title">{{ flash.1 | safe }}</h4>
        </div>
        {% endif %}

        <div class="card">
            <div class="card-body">
                <h2 class="mb-4">Confirm One-time password</h2>

                <div>
                    On your device, add your one-time password by adding the following url
                    or by scanning the qr code bellow:
                </div>

                <div class="mt-2"><strong>{{ url }}</strong></div>

                {% set base_64_qr = "data:image/png;base64," ~ qr %}
                <img class="my-4" src="{{ base_64_qr }}" alt="qr code to add one-time password">

                <div class="mt-2">
                    Please keep the url or the qr code safely, it will be only shown once!
                </div>
                <div class="mt-2">
                    If you lose it <strong>you will not be able to access your account</strong>!
                </div>

                <form action="" method="post" class="mt-4">
                    <label class="form-label required" for="token">Enter the code displayed on your device</label>
                    <input
                            class="form-control"
                            type="text"
                            name="token"
                            id="token"
                            inputmode="numeric"
                            pattern="[0-9]*"
                            autocomplete="one-time-code"
                            required
                    >

                    <button type="submit" name="enable" value="true" class="mt-2 btn btn-primary">
                        Enable OTP
                    </button>
                </form>

            </div>

        </div>
    </div>
</div>
{% endblock content %}