{#
    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>

        {% if device.hwi_support %}
            <button id="{{ device.alias }}_hwi_sign_btn" class="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 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 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 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 bg-accent text-white mb-0 mr-0 mt-3" type="submit" name="action" value="signhotwallet">{{ _("Sign transaction") }}</button>
                </form>
            </div>
        {% endif %}
    </div>
{%- endmacro %}
