{% macro magic_link(url, text, unique_id='magic_link') %}
<a
    href="{{ url }}"
    target="_blank"
    rel="noopener noreferrer"
    id="{{ unique_id }}"
>
    {{ text }}
</a>
<script>
    (function () {
        const a = document.getElementById("{{ unique_id }}");
        a.addEventListener("click", function (e) {
            e.preventDefault();
            window.open(
                this.href,
                this.target,
                Array.from(this.relList).join(", ")
            );
            setTimeout(() => {
                window.location.reload();
            });
        });
    })();
</script>
{% endmacro %} {% macro qrcode_queue(queue_items) %} {% if queue_items %}
<ol>
    {% for item in queue_items %}
    <li>
        <a href="{{ item }}" target="_blank" rel="noreferrer noopener">
            {{ item }}
            <div class="qrcode"></div>
        </a>
    </li>
    {% endfor %}
    <style>
        /* it works ig */
        & {
            li:has(.qrcode) {
                width: min-content;
            }
        }
    </style>
</ol>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.js"></script>
<script>
    window.addEventListener("load", (_) => {
        document.querySelectorAll(".qrcode").forEach((e) => {
            const a = e.parentElement.textContent.trim();
            new QRCode(e, {
                text: a,
                correctLevel: QRCode.CorrectLevel.L,
                width: 256,
                height: 256,
            });
        });
    });
</script>
{% endif %} {% endmacro %}