<!DOCTYPE html>
<html>
	<head>
		<link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='img/icon.png') }}"/>
		<title>Specter Desktop</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}?{{rand}}">
	</head>
	<body>
	<div class="pageloader" id="pageloader"></div>
	{% if specter.config.auth == "none" or current_user.is_authenticated %}
		{% include "includes/overlay/overlay.html" %}
		{% include "includes/qr-code.html" %}
	{% endif %}
	{% include "includes/message-box.html" %}
	<div class="row holder">
		{% block sidebar %}
			{% include "includes/sidebar/sidebar.jinja" %}
		{% endblock %}
		<main><div><br><br></div>
			{% if current_user.is_authenticated and not hwi_bridge %}
				<div class="row" id="status-bar" style="border-radius: 0 0 0 15px; position: absolute; right: 0; color: #ddd; background-color: #323e50;">
					{% include "components/tor_address.jinja" %}
					<a class="settings-bar-btn" href="{{ url_for('settings') }}">
						<img src="{{ url_for('static', filename='img/settings-status-bar.svg') }}" style="width: 22px;"/>
					</a>
					{% if specter.config.auth != "none" %}
						<a class="settings-bar-btn" href="{{ url_for('logout') }}">
							<img src="{{ url_for('static', filename='img/logout-status-bar.svg') }}" style="width: 22px;"/>
						</a>
					{% endif %}
				</div>
			<img id="menubtn" src="{{ url_for('static', filename='img/menu.svg') }}"/>
			{% endif %}

			<div id="messages">
			{% with messages = get_flashed_messages(with_categories=True) %}
				{% if messages %}
					{% for category, message in messages | unique %}
						<message-box type="{{ category }}">{{ message }}</message-box>
					{% endfor %}
				{% endif %}
			{% endwith %}
			{% if error %}
				<message-box type="error">ERROR: {{error}}</message-box>
			{% endif %}
			</div>

			{% block main %}
				{% if error %}
					<br><br>Something went wrong :(<br><br>{{error}}
				{% else %}
					<br>
					<div style="max-width: 60%; text-align: center;">
					<h1 style="font-size: 1.8em;">
					<img src="{{ url_for('static', filename='img/icon.png') }}" width="40px" style="vertical-align: top; margin-right: 20px;"/>
					Welcome to Specter Desktop 
					<img src="{{ url_for('static', filename='img/ghost.png') }}" width="40px" style="vertical-align: top; margin-left: 20px;"/>
					</h1>
					<p style="font-size: 1.2em; font-weight: bolder;">Specter Desktop is a convenient wallet interface to better use your Bitcoin Core node. It’s good for singlesig wallets, but comes with a special focus on multisignature setups for different hardware wallets and air-gapped signing devices.</p>
					<a href="https://github.com/cryptoadvance/specter-desktop/blob/master/docs/faq.md" target="_blank" style="color: #fff; font-size: 1.2em; font-weight: bolder;">Read the FAQ</a>
					<br><br><br>
					<h2 style="font-size: 1.6em;">Getting Started</h2><br>
					Click on "Add new wallet" to try out the new <a href="{{ url_for('singlesig_setup_wizard') }}" style="color: #fff;">wallet setup wizard</a> or follow these instructions:<br><br>
					<ul style="text-align: left; margin-left: 10%;">
						<li class="list-item">
							Click on "Add new device" on the left sidebar and follow the instructions.<br>
							Follow the same process for each device you would like to use as a separate possible (co)signer in a wallet.
						</li>
						<li class="list-item">
							When adding a new signing device, you can add multiple <code>xpub</code> keys. Each <code>xpub</code> key has a separate purpose for which it can be used (i.e. multisig wallets: P2SH-P2WPKH, P2SH-P2WSH, P2WPKH, P2WSH).<br>
							Make sure to import all keys you need.
						</li>
						<li class="list-item">
							After adding your device(s), you can start creating wallets by clicking on "Add new wallet".<br>					
						</li>
						<li class="list-item">
							For any questions or support, you can either open a <a href="https://github.com/cryptoadvance/specter-desktop/issues/new" target="_blank" style="color: #fff">GitHub issue</a> or ask it in the <a href="https://t.me/spectersupport" target="_blank" style="color: #fff">Specter Support Telegram group</a>.
						</li>
					</ul>
					<div class="spacer"></div>
					<a href="https://github.com/cryptoadvance/specter-desktop#help-wanted-do-you-like-specter" target="_blank" style="color: #fff; display: inline-block;"><h2 id="help-wanted-text" style="display: inline-block;">Help wanted: Do you like Specter?</h2><img src="static/img/love.png" width="20px" style="vertical-align: sub; margin-left: 10px;"/></a>
					<div class="spacer"></div>
					<div class="footer">
						Supported and maintained by:<br>
						<a href="https://specter.solutions/" target="_blank" style="color: #fff;">
							Specter.Solutions
						</a>
						<div class="row">
							<a href="https://github.com/cryptoadvance/" target="_blank"><img src="{{ url_for('static', filename='img/github.svg') }}" style="width: 30px; margin: 10px;"></a>
							<a href="https://twitter.com/specterwallet/" target="_blank"><img src="{{ url_for('static', filename='img/twitter.svg') }}" style="width: 30px; margin: 10px;"></a>
						</div>
					</div>
				{% endif %}
			{% endblock %}
		</main>
	</div>

	<script type="text/javascript" src="{{ url_for('static', filename='helpers.js') }}"></script>

	{% block scripts %}
	{% endblock %}
	</body>
</html>
