<h2 class="mt-8 mb-2">{{ _('Getting Started with Spectrum') }}</h2>

<table class="mb-10">
    <tbody>
        <tr>
            <td class="w-12">
                <img class="h-6 w-6" src="{{ url_for('static', filename='img/checkbox-' + ('un' if not specter.chain else '') + 'tick.svg') }}">
            </td>
            <td>
                <a href="{{ url_for('spectrum_endpoint.index') }}">
                    <p>{{ _("Connect to the Bitcoin network") }}</p>
                </a>
            </td>
            <td>
                {% if not specter.chain %}
                    <button type="button" onclick="showPageOverlay('connect-node-help-popup')">Need help?</button>
                    <div id="connect-node-help-popup" class="hidden">
                        <h1>{{ _("Connecting Specter to your Bitcoin Core node") }}</h1>
                        <div>
                            <button data-style="padding: 10px; width: 80%; font-size: 1.2em; margin: 20px auto;" type="button" class="btn" onclick="hidePageOverlay();showPageOverlay('no-node-help-popup')">{{ _("I don't have a Bitcoin Core node yet.") }}</button>
                            <button data-style="padding: 10px; width: 80%; font-size: 1.2em; margin: 20px auto;" type="button" class="btn" onclick="hidePageOverlay();showPageOverlay('local-node-help-popup')">{{ _("I have Bitcoin Core on this computer.") }}</button>
                            <button data-style="padding: 10px; width: 80%; font-size: 1.2em; margin: 20px auto;" type="button" class="btn" onclick="hidePageOverlay();showPageOverlay('remote-node-help-popup')">{{ _("I have a remote Bitcoin Core node.") }}</button>
                        </div>
                    </div>
                    <div id="no-node-help-popup" class="hidden">
                        <h1>{{ _("Installing and Setting Up Bitcoin Core") }}</h1>
                        {{ _("Check out these video tutorials on downloading and setting up Bitcoin Core with Specter Desktop") }}:<br><br>
                        <ul data-style="text-align: left; margin: auto; line-height: 2;">
                            <li><a href="https://www.keepitsimplebitcoin.com/setup-bitcoin-core/" target="_blank" data-style="color: #fff;">KIS: Setting up Bitcoin Core</a></li>
                            <li><a href="https://www.keepitsimplebitcoin.com/how-to-use-specter-wallet-1/" target="_blank" data-style="color: #fff;">KIS: Setting up Specter Desktop</a></li>
                            <li><a href="https://www.youtube.com/watch?v=4koKF2MDXtk&t=2s" target="_blank" data-style="color: #fff;">Ministry of Nodes: Setting up Bitcoin Core and Specter on Windows</a></li>
                        </ul>
                    </div>
                    <div id="local-node-help-popup" class="hidden">
                        <h1>{{ _('Connecting Specter to your local Bitcoin Core node') }}</h1>
                        <p>{{ _("If you're running a local Bitcoin Core node, Specter should be able to auto-detect it if its data folder is located at the default location.") }}<br>
                        {{ _("In case it isn't, you might need to specify the Bitcoin Core data folder path in Specter's settings page.") }}<br>
                        {{ _("Alternatively, you can switch off auto-detect from the settings and provide the Bitcoin Core RPC credentials and host URL manually.") }}<br><br>
                        <b>{{ _("Please note:")}}</b><br>{{ _('Your node must be configured with ')}}<code>server=1</code>{{ _(' line in the ')}}<code>bitcoin.conf</code>{{ _(' file.')}}<br>
                        {{ _("If you don't have that, add it and restart Bitcoin Core.") }}"
                        </p>
                        <br><br>
                        {{ _("In addition, you can check out these video tutorials for setting up Bitcoin Core with Specter Desktop") }}:<br><br>
                        <ul data-style="text-align: left; margin: auto; line-height: 2;">
                            <li><a href="https://www.keepitsimplebitcoin.com/setup-bitcoin-core/" target="_blank" data-style="color: #fff;">KIS: Setting up Bitcoin Core</a></li>
                            <li><a href="https://www.keepitsimplebitcoin.com/how-to-use-specter-wallet-1/" target="_blank" data-style="color: #fff;">KIS: Setting up Specter Desktop</a></li>
                            <li><a href="https://www.youtube.com/watch?v=4koKF2MDXtk&t=2s" target="_blank" data-style="color: #fff;">Ministry of Nodes: Setting up Bitcoin Core and Specter on Windows</a></li>
                        </ul>
                    </div>
                    <div id="remote-node-help-popup" class="hidden">
                        <h1>{{ _("Connecting Specter to your remote Bitcoin Core node") }}</h1>
                        <h3>{{ _('Connecting to a "node in a box"') }}</h3>
                        <p data-style="font-size: 1.05em;">
                            {{ _("Specter can be used with a remote Bitcoin Core node running on a machine like RaspiBlitz, myNode, Nodl, Umbrel, and Embassy.") }}<br>
                            {{ _("RaspiBlitz and myNode currently allow running Specter in the remote machine directly, which means it's possible to use it and skip setting up connection manually.") }}<br><br>
                            {{ _("If you use a different node or would still like to connect run Specter locally but connect remotely, you can do so by going to Settings, Bitcoin Core tab, and provide the Bitcoin Core RPC credentials and host URL manually.") }}"
                        </p>
                        <h3>{{ _("Connecting over Tor") }}</h3>
                        <p data-style="font-size: 1.05em;">{{ _("Connecting over Tor requires that you first configure Tor on your local machine.") }}<br>
                        You can checkout <a href="https://www.keepitsimplebitcoin.com/how-to-install-tor/" data-style="color: #fff;" target="_blank">this video tutorial</a>, or read the documentation for <a href="https://github.com/cryptoadvance/specter-desktop/blob/master/docs/tor.md" target="_blank" data-style="color: #fff;">Mac and Linux</a> or <a href="https://github.com/Fonta1n3/FullyNoded/blob/master/Docs/Tor/Tor.md#windows-10" target="_blank" data-style="color: #fff;">Window</a><br>
                        </p>
                    </div>
                {% endif %}
            </td>
        </tr>
        <tr>
            <td class="w-12">
                <img class="h-6 w-6" src="{{ url_for('static', filename='img/checkbox-' + ('un' if not (specter.device_manager.devices | length) else '') + 'tick.svg') }}">
            </td>
            <td>
                <a href="{{ url_for('devices_endpoint.new_device_type') }}">
                    <p>{{ _("Add your signing devices") }}</p>
                </a>
            </td>
            <td></td>
        </tr>
        <tr>
            <td class="w-12">
                <img class="h-6 w-6" src="{{ url_for('static', filename='img/checkbox-' + ('un' if not (specter.wallet_manager.wallets | length) else '') + 'tick.svg') }}">
            </td>
            <td>
                <a href="{{ url_for('wallets_endpoint.new_wallet_type') }}">
                    <p>{{ _("Create your first wallet") }}</p>
                </a>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>
