{% extends "base.jinja" %}
{% block main %}
    {% include "includes/hwi/hwi.jinja" %}
    {% include "includes/qr-scanner.html" %}
    <form name="form" action="{{ url_for('devices_endpoint.device_blinding_key', device_alias=device.alias) }}" method="POST" data-style="width: 100%;" onsubmit="showPacman();">
        <div class="card center auto-width">
            <input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
            <div>
                <h1> {{ _("Get the master blinding key") }} </h1>
                <input type="hidden" name="new_device" value="{{ new_device }}"/>
                <input type="hidden" name="blinding_key" id="blinding_key"/>
                <div data-style="width:100%;">
                    <div id="connect-hwi" data-style="max-width: 250px; width: 250px; margin: 20px auto;" class="btn {% if not device.hwi_support %}hidden{% endif %}">
                        <img src="{{ url_for('static', filename='img/usb.svg') }}" data-style="width: 26px; margin-right: 2px;" class="svg-white">
                        {{ _("Get via USB") }}
                    </div>
                    <qr-scanner id="key-scan" {% if not device.qr_code_support %}class="hidden"{% endif %}>
                        <a slot="button" href="#"  class="btn" data-style="max-width: 250px; width: 250px; margin: 20px auto;">
                            <img src="{{ url_for('static', filename='img/qr-code.svg') }}" data-style="width: 26px; margin: 0px;" class="svg-white">
                            {{ _("Scan QR code") }}
                        </a>
                    </qr-scanner>
                    <button {% if device.device_type not in ['electrum', 'other'] %}class="hidden"{% endif %} type="button" onclick="showPageOverlay('paste-mbk-popup')" class="btn centered" id="mbk-paste" data-style="max-width: 250px; width: 250px; margin: 20px auto;">
                        <img src="{{ url_for('static', filename='img/copy.svg') }}" data-style="width: 22px; margin: 0px;" class="svg-white">
                        {{ _("Paste blinding key") }}
                    </button>
                    <div class="hidden" id="paste-mbk-popup">
                        <h1>{{ _("Paste blinding key") }}</h1>
                        <input type="text" id="paste-mbk-text" placeholder="Paste your master blinding key here">
                        <br><br>
                        <button type="button" onclick="addBlindingKey(document.getElementById('paste-mbk-text').value);hidePageOverlay();document.getElementById('paste-mbk-text').value='';" class="btn centered">{{ _("Add blinding key") }}</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        document.getElementById('connect-hwi').addEventListener('click', async e => {
            // detect devices
            let deviceType = `{{ device.device_type }}`;
            let devices = await enumerate(deviceType);
            if(devices == null){
                return
            }
            // this shouldn't happen actually
            if(devices.length == 0){
                showError(`{{ _("No devices found :(") }}`);    // that's an old-school frown emoji -- ":(" -- not a weird typo
                return;
            }

            let device;
            if (devices.length == 1) {
                device = devices[0];
                let passphrase = await unlockDevice(device);
                if (passphrase != null){
                    device.passphrase = passphrase;
                }
            } else {
                // first only for now
                device = await selectDevice(devices);
            }

            // nothing to do if user cancelled
            if(device == null){
                return;
            }

            let masterBlindingKey = await getMasterBlindingKey(
                device,
                "",
                "{specter.chain}"
            );
            document.getElementById('blinding_key').value = masterBlindingKey;
            document.form.submit();
        });
    </script>

    <script type="text/javascript">
        let scanner = document.getElementById('key-scan');
        if(scanner != null) {
            scanner.addEventListener('scan', e=>{
                let masterBlindingKey = e.detail.result;
                if (masterBlindingKey == null) {
                    return;
                }
                document.getElementById('blinding_key').value = masterBlindingKey;
                document.form.submit();
            });
        }
        function addBlindingKey(masterBlindingKey){
            if (masterBlindingKey == null) {
                return;
            }
            document.getElementById('blinding_key').value = masterBlindingKey;
            document.form.submit();
        }
    </script>
{% endblock %}
