{% from 'includes/sidebar/components/sidebar_btn.jinja' import sidebar_btn %}
<style>
    #wallets_overview_link {
        text-transform: none;
        text-decoration: none;
        float: right;
        margin-right: 10px;
    }

    #wallets_overview_link:hover {
        text-decoration: underline;
        color: #fff;
    }
</style>
<div id="side-content">
    <nav class="side">
        {% if specter.info["initialblockdownload"] %}
            <p class="warning">&#9432;<br>Bitcoin Core is still syncing...<br>(data might be outdated)</p>
        {% endif %}
        {% if specter.network_info.version < 190000 %}
            <p class="warning">&#9432;<br>Bitcoin Core version is outdated.<br>Some features might not work...<br>(minimum required: v19.0.0).</p>
        {% endif %}
        {% if specter.chain %}
            <div onclick="showPageOverlay('bitcoin_core_info');document.getElementById('side-content').classList.remove('active');" class="item core" style="cursor: pointer;">
            {% else %}
            <a href="{{ url_for('settings') }}" class="item core" style="color: #fff; text-decoration: none;">
        {% endif %}
            {% from "components/bitcoin_svg.jinja" import bitcoin_svg %}
            {{ bitcoin_svg(specter.info.chain, 40) }}
            {% include "includes/sidebar/components/bitcoin_core_info.jinja" %}
            <div>
                Bitcoin Core<br>
                <small>
                    {% if specter.chain %}
                        {% if specter.bitcoin_core_version != '' %}
                            v{{ specter.bitcoin_core_version }}
                        {% endif %}
                        ({{specter.chain}}):
                        {% if specter.info["blocks"] %}
                            {{ specter.info.blocks }} blocks
                        {% else %}
                            {{ specter.info.chain }}
                        {% endif %}
                    {% else %}
                        Unavailable. Click to configure.
                    {% endif %}
                </small>
            </div>
        {% if specter.chain %}
            </div>
        {% else %}
            </a>
        {% endif %}
        {% if specter.info["utxorescan"] %}
        <div class="rescan_progress {{ specter.info.chain }}">
            <div id="utxo_rescan_progress" style='width: {{ specter.info["utxorescan"] }}%'></div>
        </div>
        <script>
            let utxoRescanProgress = '{{ specter.info["utxorescan"] }}';
            let utxoRescanActive = true;
            async function fetchUTXORescanProgress() {
                try {
                    const response = await fetch(
                        "{{ url_for('get_scantxoutset_status') }}",
                        {
                            method: 'GET'
                        }
                    );
                    let result = await response.json();
                    utxoRescanActive = result.active;
                    utxoRescanProgress = result.progress;
                    let walletRescanData = document.getElementById('wallet_rescan_data');
                    let walletRescanPercentsSettings = document.getElementById('wallet_rescan_percents');
                    let walletRescanPercents = document.getElementById('{{ specter.utxorescanwallet }}_balances_wallet_rescan_percents');
                    if (utxoRescanActive) {
                        document.getElementById('utxo_rescan_progress').style.width = utxoRescanProgress + '%';
                        if (walletRescanPercents) {
                            walletRescanPercents.innerHTML = (Math.round(parseFloat(utxoRescanProgress) * 100) / 100).toFixed(2);
                        } else if (walletRescanPercentsSettings) {
                            walletRescanPercentsSettings.innerHTML = (Math.round(parseFloat(utxoRescanProgress) * 100) / 100).toFixed(2);
                        }
                        setTimeout(fetchUTXORescanProgress, 1000);
                    } else {
                        document.getElementById('utxo_rescan_progress').style.display = 'none';
                        if (walletRescanData) {
                            walletRescanData.style.display = 'none';
                        }
                        if (walletRescanData || walletRescanPercentsSettings) {
                            window.location = window.location.href;
                        }
                    }
                } catch(e) {
                    console.log('Caught error:', e);
                    return { success: false, error: e };
                }
            }
            setTimeout(fetchUTXORescanProgress, 1000);
        </script>
        {% endif %}
        <div class="separator">
            <span id="toggle_wallets_list" style="cursor: pointer;">Wallets &nbsp; &#9660;</span>
            {% if (specter.wallet_manager.wallets | length) > 1 %}
                <a class="note" id="wallets_overview_link" href="{{ url_for('wallets_overview') }}" style="cursor: pointer;">
                    Wallets overview
                </a>
            {% endif %}
        </div>
        {% if (specter.device_manager.devices | length) != 0 and specter.chain %}
            {% from 'includes/sidebar/components/sidebar_wallet_list_item.jinja' import sidebar_wallet_list_item %}
            <div id="wallets_list">
            {% for wallet in specter.wallet_manager.wallets_names %}
                {{ sidebar_wallet_list_item(specter.wallet_manager.wallets[wallet], wallet_alias, specter.info.chain) }}
            {% endfor %}
            </div>
        {% endif %}
        {% if specter.chain %}
            {{ sidebar_btn(url_for('new_wallet_type'), 'Add new wallet') }}
        {% else %}
            <p class="warning">
            &#9432;<br>Wallets are unavailable if Specter is not connected to Bitcoin Core!<br>
            {% if current_user.is_admin %}
            <a style="margin: 5px; transform: scale(0.9); font-size: 1em;" class="btn" href="{{ url_for('bitcoin_core_settings') }}">
                <img src="{{ url_for('static', filename='img/settings-status-bar.svg') }}" style="width: 13px;"/>Configure Node
            </a>
            {% endif %}
            </p>
        {% endif %}

        <div class="separator">
            <span id="toggle_devices_list" style="cursor: pointer;">Devices &nbsp; &#9660;</span>
        </div>
        {% from 'includes/sidebar/components/sidebar_device_list_item.jinja' import sidebar_device_list_item %}
        <div id="devices_list">
            {% for device_name in specter.device_manager.devices_names %}
                    {{ sidebar_device_list_item(specter.device_manager.devices[device_name], device_alias) }}
            {% endfor %}
        </div>
        {{ sidebar_btn(url_for('device_setup_wizard'), 'Add new device') }}
        <p class="warning mobile-only">&#9432;<br><b>Specter "Watch Only" Mode.</b><br>You are using Specter from a small-screen device for which some functionalities, including sending funds and creating new wallets are not yet supported.</p>
        <br>
        <div class="footer">
	        <span>Specter Version: <strong>{{ specter.version.current }}</strong></span>
            <a style="color: #fff; font-size: 1.1em; margin: 10px; text-align: center;" href="{{ url_for('about') }}">
            About Specter<br>
            <img src="{{ url_for('static', filename='img/icon.png') }}" style="width: 35px;"/>
            </a>
        </div>
    </nav>
</div>
<script>
    function toggleList(type) {
        let titleButton = document.getElementById('toggle_' + type + '_list');
        let list = document.getElementById(type + '_list');
        if (list.style.display === 'none') {
            list.style.display = 'block';
            titleButton.innerHTML = capitalize(type) + ' &nbsp; &#9660;';
        } else {
            list.style.display = 'none';
            titleButton.innerHTML = capitalize(type) + ' &nbsp; &#9654;';
        }
    }

    document.addEventListener("DOMContentLoaded", function(){
        if ('{{ specter.device_manager.devices_names | length }}' == '0') {
            document.getElementById('toggle_devices_list').innerHTML = 'Devices';
        } else {
            document.getElementById('toggle_devices_list').addEventListener('click', (event) => {
                toggleList('devices');
            });
        }

        if ('{{ specter.wallet_manager.wallets_names | length }}' == '0') {
            document.getElementById('toggle_wallets_list').innerHTML = 'Wallets';
        } else {
            document.getElementById('toggle_wallets_list').addEventListener('click', (event) => {
                toggleList('wallets');
            });
        }
    });
</script>
