{#
    sign_tx_method - Popup to choose how to sign for a device.
    Parameters:
    - wallet: The wallet object used.
    - device: The device object used.
    - psbt: The psbt to be signed.
    - specter: The active chain 
 #}
{% macro sign_tx_method(wallet, device, psbt, chain) -%}
    {% set device_psbts = device.create_psbts(psbt['base64'], wallet) %}
    <div id="{{ device.alias }}_sign_tx_method" class="p-4 bg-dark-800 rounded-lg flex-column hidden">
        <div class="flex justify-between mb-2">
            <h3 class="mb-0">{{ _("Sign Transaction") }}</h3>
            <p class="m-0 cursor-pointer" onclick="hidePageOverlay()" class="cursor-pointer">Close</p>
        </div>

        <p>{{ _("Please choose a signing method for your") }} {{ device.name }}.</p>

        <div class="mt-3 space-y-3">
            {% if device.hwi_support %}
                <button id="{{ device.alias }}_hwi_sign_btn" class="w-full button bg-accent mb-0 mr-0 text-white space-x-2">
                    <img src="{{ url_for('static', filename='img/usb.svg') }}">
                    <span>{{ _("Sign via USB (HWI)") }}</span>
                </button>

                <script>
                    document.getElementById("{{ device.alias }}_hwi_sign_btn").addEventListener("click", e => {
                        e.preventDefault();
                        hidePageOverlay();
                        let fingerprint = null;
                        {% for wallet_key in wallet.keys %}
                            {% for device_key in device.keys %}
                                {% if device_key == wallet_key %}
                                    fingerprint = '{{ device.keys[loop.index0].fingerprint }}'
                                {% endif %}
                            {% endfor %}
                        {% endfor %}

                        signTx(combine, '{{ device.device_type }}', '{{ device_psbts["hwi"] }}', fingerprint);
                    });
                </script>
            {% endif %}

            {% if device.sd_card_support %}
                {% include "includes/overlay/sd_card_sign.jinja" %}
                <button id="{{ device.alias }}_file_sign_btn" class="button w-full bg-accent mb-0 mr-0 text-white space-x-2">
                    <img src="{{ url_for('static', filename='img/sd-card.svg') }}">
                    <span>{{ _("Sign with SD Card file") }}</span>
                </button>

                <script>
                    document.getElementById("{{ device.alias }}_file_sign_btn").addEventListener("click", e => {
                        e.preventDefault();
                        hidePageOverlay();
                        showPageOverlay('{{ device.alias }}_sign_tx_file');
                    });
                </script>
            {% endif %}

            {% if device.qr_code_support %}
                {% include "includes/overlay/qr_code_sign.jinja" %}
                <button id="{{ device.alias }}_qr_sign_btn" class="button w-full bg-accent mb-0 mr-0 text-white space-x-2">
                    <img src="{{ url_for('static', filename='img/qr-code.svg') }}">
                    <span>{{ _("Sign with QR codes") }}</span>
                </button>
                <script>
                    document.getElementById("{{ device.alias }}_qr_sign_btn").addEventListener("click", e => {
                        e.preventDefault();
                        hidePageOverlay();
                        showPageOverlay('{{ device.alias }}_sign_tx_qr');
                    });
                </script>
            {% endif %}

            {% if device.hot_wallet %}
                <button id="{{ device.alias }}_hot_sign_btn" class="button w-full mb-0 bg-accent text-white space-x-2 mr-0 w-full mt-3">
                    {% if device.device_type == "bitcoincore" %}
                        <img src="{{ url_for('static', filename='img/devices/bitcoincore_icon.svg') }}"/>
                        <span>{{ _("Sign with Bitcoin Core") }}</span>
                    {% else %}
                        <img src="{{ url_for('static', filename='img/devices/elementscore_icon.svg') }}"/>
                        <span>{{ _("Sign with Elements Core") }}</span>
                    {% endif %}
                </button>
                <script>
                    document.getElementById("{{ device.alias }}_hot_sign_btn").addEventListener("click", async function(e) {
                        e.preventDefault();
                        hidePageOverlay();
                        showPageOverlay('{{ device.alias }}_hot_enter_passphrase')
                    });
                </script>

                <div id="{{ device.alias }}_hot_enter_passphrase" class="hidden bg-dark-800 p-4">
                    {% set is_encrypted = device.is_encrypted(wallet.manager) %}
                    <div class="flex justify-between mb-2">
                        {% if is_encrypted %}
                            <h3 class="mb-0">{{ _("Enter decryption password") }}</h3>
                        {% else %}
                            <h3 class="mb-0">{{ _("Proceed with signing") }}</h3>
                        {% endif %}
                        <p class="m-0 cursor-pointer" onclick="hidePageOverlay()" class="cursor-pointer">Close</p>
                    </div>

                    <form action="{{ url_for('wallets_endpoint.send_new', wallet_alias=wallet.alias) }}" method="POST" id="hot_enter_passphrase__content" class="flex-center flex-column">
                        <input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
                        <div>
                            {% if is_encrypted %}
                                <div class="floating-wrapper">
                                    <input class="floating-input peer" placeholder=" " name="passphrase" type="password" id="hwi_enter_passphrase__passphrase" />
                                    <label class="floating-label">Passphrase</label>
                                </div>
                            {% else %}
                                <p>{{ _("Wallet is not encrypted, just click the button.") }}</p>
                                <input name="passphrase" type="hidden" id="hwi_enter_passphrase__passphrase" value="" />
                            {% endif %}
                            <input name="device" type="hidden" value="{{ device.alias }}" />
                            <input name="psbt" type="hidden" value='{{ psbt|tojson|safe }}' />
                        </div>
                        <button id="hot_enter_passphrase__submit" class="button w-full bg-accent text-white mb-0 mr-0 mt-3" type="submit" name="action" value="signhotwallet">{{ _("Sign transaction") }}</button>
                    </form>
                </div>
            {% endif %}
        </div>
    </div>
{%- endmacro %}
