<form id="{{ device.alias }}_sign_msg_qr" class="flex-center flex-column hidden p-4 bg-dark-800">
    <input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>

    <div class="flex justify-between mb-2 space-x-5">
        <h3 class="mb-0" data-cy="scan-qr-code-for-msg-signing-overlay-headline">{{ _("Scan this QR code with your") }} {{device.name}}</h3>
        <p class="m-0 ml-5 inline-block cursor-pointer" onclick="hidePageOverlay()" data-cy="scan-qr-code-for-msg-signing-overlay-close-btn">Close</p>
    </div>

    <div class="row" data-style="min-height: 400px; margin-top:20px">
        <span id="compressed_msg" data-style="margin: auto;">
            <qr-code id="msg-qr-code" animate="auto" data-style="margin-top:20px;" width="300"></qr-code>
        </span>
    </div>
    <qr-scanner id="{{ device.alias }}_qr_scan_btn">
        <a slot="button" class="button bg-accent mb-0 mt-3 w-full">
            {{ _("Click here to scan signature") }}
        </a>
    </qr-scanner>

<script type="module">
    document.getElementById("{{ device.alias }}_qr_scan_btn").addEventListener("scan", e =>{
        let result = e.detail.result;
        if (result) {
            hidePageOverlay();
            document.getElementById('signature-label').style.display = 'block';
            let signatureElement = document.getElementById('signature')
            signatureElement.classList.remove("hidden")
            signatureElement.classList.add("signature")
            signatureElement.innerText = result;
            showPageOverlay('message-signing');
            document.getElementById('{{ device.alias }}_usb_sign_msg_btn').remove()
            document.getElementById('{{ device.alias }}_qr_sign_msg_btn').remove()
        } else {
            showError(`{{ _("Scan failed, please try again...") }}`, 3000);
        }
    });
</script>
</form>
