{% extends "mfa/base_entrance.html" %}
{% load allauth i18n lucide ui %}

{% comment %}
    Overridden for layout: the code is a daisyUI otp field, Cancel sits beside Sign In,
    and "Use a security key" is an accent button under Alternative options.

    Cancel and the security key both submit *other* forms (`logout-from-stage`,
    `webauthn_form`) through the HTML `form` attribute — forms cannot nest, so those live
    at the end of the page and the buttons point at them by id.
{% endcomment %}

{% block head_title %}
    {% trans "Sign In" %}
{% endblock head_title %}

{% block content %}
    {% element h1 %}
        {% trans "Two-Factor Authentication" %}
    {% endelement %}
    {% element p %}
        {% blocktranslate %}Your account is protected by two-factor authentication. Please enter an authenticator code:{% endblocktranslate %}
    {% endelement %}

    <form class="mt-8" method="post" action="{% url 'mfa_authenticate' %}">
        {% csrf_token %}

        <div class="mb-10 flex flex-col items-center gap-2">
            {% comment %}
                daisyUI's otp is one input overlaid on the boxes. Six of them, for a TOTP
                code — but this same field also accepts an 8-character recovery code, so the
                boxes step aside once what's typed no longer fits them (see the script
                below). Boxing it to six and calling it done would lock out recovery codes.
            {% endcomment %}
            <div class="otp otp-lg" data-otp>
                {{ form.code|daisy:"" }}
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            {% for error in form.code.errors %}<span class="label-text-alt text-error">{{ error }}</span>{% endfor %}
            {% for error in form.non_field_errors %}<span class="label-text-alt text-error">{{ error }}</span>{% endfor %}
        </div>

        <div class="flex flex-wrap items-center justify-end gap-2">
            <button class="btn gap-2" type="submit" form="logout-from-stage">{% lucide "x" size=16 %} {% trans "Cancel" %}</button>
            <button class="btn btn-primary gap-2" type="submit">{% lucide "log-in" size=16 %} {% trans "Sign In" %}</button>
        </div>
    </form>

    {% if "webauthn" in MFA_SUPPORTED_TYPES %}
        {% element hr %}
        {% endelement %}
        {% element h2 %}
            {% translate "Alternative options" %}
        {% endelement %}

        <button class="btn btn-accent gap-2" type="button" form="webauthn_form" id="mfa_webauthn_authenticate">
            {% lucide "usb" size=16 %} {% trans "Use a security key" %}
        </button>

        <form id="webauthn_form" method="post" action="{% url 'mfa_authenticate' %}">
            {% csrf_token %}
            {{ webauthn_form.credential }}
        </form>
        {{ js_data|json_script:"js_data" }}
        {% include "mfa/webauthn/snippets/scripts.html" %}
        <script data-allauth-onload="allauth.webauthn.forms.authenticateForm" type="application/json">
            {
                "ids": {
                    "authenticate": "mfa_webauthn_authenticate",
                    "credential": "{{ webauthn_form.credential.auto_id }}",
                    "data": "js_data"
                }
            }
        </script>
    {% endif %}

    <form id="logout-from-stage" method="post" action="{% url 'account_logout' %}">
        <input type="hidden" name="next" value="{% url 'account_login' %}">
        {% csrf_token %}
    </form>

    <script>
        // A TOTP code is 6 characters and a recovery code is 8, and allauth accepts either
        // here. The boxed otp layout only fits six, so past that we drop back to a plain
        // input instead of letting the text overflow the boxes.
        (() => {
            const otp = document.querySelector("[data-otp]");
            const input = otp?.querySelector("input");
            if (!input) return;

            const fit = () => {
                const boxed = input.value.length <= 6;
                otp.classList.toggle("otp", boxed);
                otp.classList.toggle("otp-lg", boxed);
                otp.querySelectorAll("span").forEach((box) => box.classList.toggle("hidden", !boxed));
                input.classList.toggle("input", !boxed);
                input.classList.toggle("input-lg", !boxed);
            };

            input.addEventListener("input", fit);
            fit();
        })();
    </script>
{% endblock content %}