{# 
    sidebar_wallet_list_item - Sidebar wallet list item.
    Parameters:
    - wallet: Wallet object of the item.
    - wallet_alias: Active wallet alias.
    - chain: Chain name specter is connected to. Options: 'main', 'test', 'regtest', 'signet'.
    - loading: Boolean indicating if the wallet is loaded in Specter already or not.
 #}
{% macro sidebar_wallet_list_item(wallet, wallet_alias, chain, loading=false) -%}
    <a id="{{wallet.alias}}-sidebar-list-item" href="{{ url_for('wallets_endpoint.wallet', wallet_alias=wallet.alias) }}" class="item {% if wallet_alias == wallet.alias %}active{% endif %}" style="{%if loading%}display: none;{%endif%}">
        <img src="{{ url_for('static', filename='img/' + ('two-keys' if wallet.is_multisig else 'key') + '.svg') }}" class="svg-white" style="width: 45px; margin-left: 5px;">
        <div class="grow">
            {{ wallet.name }}<br>
            <span class="note" style="font-size: 0.75em;">{% if wallet.is_multisig %}{{ wallet.sigs_required }} out of {{ wallet.keys_count }} {{ _("Multisig") }}{% else %}{{ _("Single Key") }}{% endif %}</span>
            {% if wallet.rescan_progress %}
                <span id="{{ wallet.alias }}_sidebar_rescan_progress_container" style="display: contents;">
                <br>
                <span class="note" style="font-size: 0.7em;">{{ _("Rescanning blockchain") }}: <span id="{{ wallet.alias }}_sidebar_wallet_rescan_percents">{{ "%.2f"|format(wallet.rescan_progress * 100) }}</span>%</span>
                </span>
            {% endif %}
        </div>
    </a>
    <a class="item" style="{%if not loading%}display: none;{%endif%}" id="{{wallet.alias}}-sidebar-loading-placeholder">
        <img height="38px" class="spinning" spinning src="{{ url_for('static', filename='img/refresh.svg') }}" />
        <div class="grow">
            {{ wallet.name }}<br>
            <span class="note" style="font-size: 0.75em;">{{ _("Loading wallet...") }}</span>
        </div>
    </a>
    {% if wallet.rescan_progress %}
        <div class="rescan_progress {{ chain }}">
            <div id="{{ wallet.alias }}_rescan_progress" style="width: {{ wallet.rescan_progress * 100 }}%"></div>
        </div>
        <script>
            (function(){
                let walletRescanProgress = '{{ wallet.rescan_progress * 100 }}';
                let walletRescanActive = true;
                async function fetchWalletRescanProgress() {
                    try {
                        let url="{{ url_for('wallets_endpoint.rescan_progress', wallet_alias=wallet.alias) }}"
                        const response = await fetch(
                            url,
                            {
                                method: 'GET'
                            }
                        );
                        let result = await response.json();
                        walletRescanActive = result.active;
                        walletRescanProgress = parseFloat((parseFloat(result.progress) * 100).toFixed(2));
                        let walletRescanData = document.getElementById('wallet_rescan_data');
                        let walletRescanPercentsSettings = document.getElementById('{{ wallet.alias }}_wallet_rescan_percents');
                        let walletRescanPercents = document.getElementById('{{ wallet.alias }}_balances_wallet_rescan_percents');
                        if (walletRescanActive) {
                            document.getElementById('{{ wallet.alias }}_rescan_progress').style.width = walletRescanProgress + '%';
                            document.getElementById('{{ wallet.alias }}_sidebar_wallet_rescan_percents').innerHTML = walletRescanProgress;
                            if (walletRescanPercents) {
                                walletRescanPercents.innerHTML = walletRescanProgress;
                            }
                            if (walletRescanPercentsSettings) {
                                walletRescanPercentsSettings.innerHTML = walletRescanProgress;
                            }
                            setTimeout(fetchWalletRescanProgress, 1000);
                        } else {
                            document.getElementById('{{ wallet.alias }}_rescan_progress').style.display = 'none';
                            document.getElementById('{{ wallet.alias }}_sidebar_rescan_progress_container').style.display = 'none';
                            if (walletRescanData) {
                                walletRescanData.style.display = 'none';
                            }
                            if (walletRescanData || walletRescanPercents || walletRescanPercentsSettings) {
                                window.location = window.location.href;
                            }
                        }
                    } catch(e) {
                        console.log('Caught error:', e);
                        return { success: false, error: e };
                    }
                }
                setTimeout(fetchWalletRescanProgress, 1000);
            })();
        </script>
    {% endif %}
{%- endmacro %}
