<!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}}">
		<style>
			img[src="{{ url_for('static', filename='img/devices/elementscore_icon.svg') }}"] {
				transform: scale(2.2);
			}
			{% if session["is_language_rtl"] %}
			* {
				direction: rtl;
			}
			{% endif %}
			.btn.radio.left {
				{% if session["is_language_rtl"] %}
				border-radius: 0 10px 10px 0;
				{% else %}
				border-radius: 10px 0 0 10px;
				{% endif %}
			}
			.btn.radio.right {
				{% if session["is_language_rtl"] %}
				border-radius: 10px 0 0 10px;
				{% else %}
				border-radius: 0 10px 10px 0;
				{% endif %}
			}
			nav.side > a.item.active, nav.side > div > a.item.active{
				{% if session["language_code"] in config['RTL_LANGUAGES'] %}
				border-right: 3px solid #4A90E2;
				border-left: 0;
				{% else %}
				border-left: 3px solid #4A90E2;
				border-right: 0;
				{% endif %}
			}
		</style>
		<script type="text/javascript" src="{{ url_for('static', filename='helpers.js') }}"></script>
		{% include "services/inject_in_basejinja_head.jinja" %}
		{% block head %}
		{% endblock %}
	</head>
	<body>
	{% include "services/inject_in_basejinja_body_top.jinja" %}
	<div class="pageloader" id="pageloader"></div>
	{% if specter.config.auth.method == "none" or current_user.is_authenticated %}
		<!-- BC-UR2 QR code stuff -->
		<script type="text/javascript" src="{{ url_for('static', filename='bcur/buffer.min.js') }}"></script>
		<script type="text/javascript" src="{{ url_for('static', filename='bcur/urlib.min.js') }}"></script>
		<script type="text/javascript" src="{{ url_for('static', filename='bcur/base58.min.js') }}"></script>
		{% if not hwi_bridge %}
			{# url routes are not defined in hwi_bridge mode. Includes with `url_for` will fail. #}
			{% include "includes/overlay/overlay.html" %}
			{% include "includes/qr-code.html" %}
			{% include "includes/asset-label.html" %}
		{% endif %}
	{% endif %}
	{% include "includes/message-box.html" %}
	{% include "includes/tool-tip.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="{% if session['is_language_rtl'] %}border-radius: 0 0 15px 0; left{% else %}border-radius: 0 0 15px 15px; right{% endif %}: 2.4%; position: absolute; color: #ddd; background-color: #323e50;">
					{% include "components/price_bar.jinja" %}
					<a class="settings-bar-btn" onclick="toggleHideSensitiveInfo()" style="padding: 0px 12px; cursor: pointer;" title="{{ 'Hide sensitive info' if not specter.hide_sensitive_info else 'Show sensitive info' }}">
						<img src="{{ url_for('static', filename='img/hidden.svg' if specter.hide_sensitive_info else 'img/visible.svg') }}" style="width: 30px;" class="svg-white"/>
					</a>
					<a class="settings-bar-btn" href="{{ url_for('settings_endpoint.settings') }}" title="Settings" style="padding: 0px 7px;">
						<img src="{{ url_for('static', filename='img/gear.svg') }}" style="width: 44px;" class="svg-white"/>
					</a>
					<a class="settings-bar-btn" href="{{ url_for('welcome_endpoint.about') }}" title="About and help">
						<img src="{{ url_for('static', filename='img/ghost_3d.png') }}" style="width: 22px;"/>
					</a>
					{% if specter.config.auth.method != "none" %}
						<a class="settings-bar-btn" href="{{ url_for('auth_endpoint.logout') }}"  style="padding: 0px 7px;"  title="Logout">
							<img src="{{ url_for('static', filename='img/exit.svg') }}" style="width: 36px;" class="svg-white"/>
						</a>
					{% endif %}
				</div>
			<img id="menubtn" src="{{ url_for('static', filename='img/menu.svg') }}" class="svg-white" style="width: 40px;"/>
			{% 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 | safe }}</message-box>
					{% endfor %}
				{% endif %}
			{% endwith %}
			{% if error %}
				<message-box type="error">{{ _("ERROR:") }} {{error | safe }}</message-box>
			{% endif %}
			</div>

			{% block main %}
				{% if error %}
					<br><br>{{ _("Something went wrong:") }} (<br><br>{{error}}
				{% else %}
					<br>
					<div class="main-page-container">
					<div style="max-width: 15em; text-align: center; margin-bottom: 2em; margin-top: .7em; margin-left: auto; margin-right: auto;">
						{% include "includes/language/language_select.jinja" %}
					</div>
					<h1 style="font-size: 1.8em; line-height: 1em;">
						{{ _('Welcome to Specter Desktop') }} 
					</h1>
					{% if ('://localhost:' not in url_for('index', _external=True) and '://127.0.0.1:' not in url_for('index', _external=True)) and specter.hwi_bridge_url != "http://127.0.0.1:25441/hwi/api/" %}
						<div style="margin: auto; display: block;">
							<div class="card" style="margin: auto;padding: 5px 10px 15px; width: 90%;">
								<div class="row">
									<img src="{{ url_for('static', filename='img/warning_sign.svg') }}" style="width: 20px;"/>
									<p style="color: #FF9A00; font-size: 1.1em; margin-left: 10px;">{{ _('Using Specter from a remote machine?') }}</p>
								</div>
								<p style="margin-left: 30px; margin-top: -10px; margin-right: 20px; text-align: left;">{{ _('If you run Specter on a remote machine, like Umbrel or a myNode, you need to update settings to connect hardware wallets via USB.') }}</p>
								<a href="{{ url_for('settings_endpoint.hwi') }}" style="color: #fff; text-decoration: underline; cursor: pointer;">
									<h4>{{ _("Update your settings") }}</h4>
								</a>
							</div>
							<br>
						</div>
					{% endif %}
					<div style="display: flex; justify-content: center; align-items: center;">
						<div class="main-description-box">
							<p style="font-size: 1.1em; margin: 1em auto 1em auto; text-align: left;">{{ _("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.") }} <br><br>
							&#128217; Learn <a style="color: #fff" href="https://specter-desktop-docs.netlify.app/multisig-guide/" target="_blank">{{ _("here") }}</a> more about multisig.
							</p>
						</div>
					</div>
					{% if not specter.chain %}
						<a href="{{url_for('setup_endpoint.' + specter.setup_status.stage)}}" class="btn action centered" style="max-width: 200px;">{% if specter.setup_status.stage == "start" %}{{ _('Get started!') }}{% else %}{{ _('Continue setup') }}{% endif %}</a>
						<br><br>
					{% else %}
						<h2 style="font-size: 1.6em; line-height: .5em; margin-top: 1em;">{{ _('Getting Started') }}</h2><br>

						<table style="width: 90%; margin: auto;">
							<tbody>
								<tr>
									<td>
										<img src="{{ url_for('static', filename='img/checkbox-' + ('un' if not specter.chain else '') + 'tick.svg') }}" width="30px">
									</td>
									<td style="text-align: left;">
										<a href="{{ url_for('setup_endpoint.node_type') }}">
											<h2 style="position: relative; z-index: 1;">{{ _("Connect Specter with Bitcoin Core node.") }}</h2>
										</a>
									</td>
									<td style="text-align: left;">
										{% if not specter.chain %}
											<button type="button" class="btn" 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 class="overflow">
													<button 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 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 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 style="text-align: left; margin: auto; line-height: 2;">
													<li><a href="https://www.keepitsimplebitcoin.com/setup-bitcoin-core/" target="_blank" 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" style="color: #fff;">KIS: Setting up Specter Desktop</a></li>
													<li><a href="https://www.youtube.com/watch?v=4koKF2MDXtk&t=2s" target="_blank" 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 style="text-align: left; margin: auto; line-height: 2;">
													<li><a href="https://www.keepitsimplebitcoin.com/setup-bitcoin-core/" target="_blank" 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" style="color: #fff;">KIS: Setting up Specter Desktop</a></li>
													<li><a href="https://www.youtube.com/watch?v=4koKF2MDXtk&t=2s" target="_blank" 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 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 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/" 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" 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" style="color: #fff;">Window</a><br>
												</p>
											</div>
										{% endif %}
									</td>
								</tr>
								<tr>
									<td>
										<img src="{{ url_for('static', filename='img/checkbox-' + ('un' if not (specter.device_manager.devices | length) else '') + 'tick.svg') }}" width="30px">
									</td>
									<td style="text-align: left;">
										<a href="{{ url_for('devices_endpoint.new_device_type') }}">
											<h2 style="position: relative; z-index: 1;">{{ _("Add signing devices you wish to use.") }}</h2>
										</a>
									</td>
									<td style="text-align: left;">
									</td>
								</tr>
								<tr>
									<td>
										<img src="{{ url_for('static', filename='img/checkbox-' + ('un' if not (specter.wallet_manager.wallets | length) else '') + 'tick.svg') }}" width="30px">
									</td>
									<td style="text-align: left;">
										<a href="{{ url_for('wallets_endpoint.new_wallet_type') }}">
											<h2 style="position: relative; z-index: 1;">{{ _("Create your first wallet!") }}</h2>
										</a>
									</td>
									<td style="text-align: left;">
									</td>
								</tr>
								{% if specter.chain == 'main' %}
								<tr>
									<td>
										<img src="{{ url_for('static', filename='img/ghost_3d.png')}}" width="30px">
									</td>
									<td style="text-align: left;">
										<a href="{{ url_for('welcome_endpoint.get_whitepaper') }}">
											<h2>{{ _("And when you are all set: Get the whitepaper from the timechain.") }}</h2>
										</a>
									</td>
									<td style="text-align: left;">
									</td>
								</tr>
								{% endif %}
							</tbody>
						</table>
						<br>
					{% endif %}
					<p style="position: relative; z-index: 1; line-height: 24px; font-size: 1.1em">&#128064;{{ _(' Have a look at our ')}}<a href="https://specter-desktop-docs.netlify.app/" target="_blank" style="color: #fff; font-weight: bolder;">{{ _('documentation')}}</a>{{ _(' and the ')}}<a href="https://specter-desktop-docs.netlify.app/faq/" target="_blank" style="color: #fff; font-weight: bolder;">{{ _('FAQ')}}</a></p><br>
					<span style="position: relative; z-index: 1;">&#128583;{{ _(" Still having issues?") }}</span><br>
					<div style="display: flex; justify-content: center;">
						<div style="max-width: 80%;">
							<p style="position: relative; z-index: 1;">{{ _('Feel free to ')}}<a href="https://github.com/cryptoadvance/specter-desktop/issues/new" target="_blank" style="color: #fff;">{{ _('open an issue on GitHub')}}</a>{{ _(' or ask in the ')}}<a href="https://t.me/spectersupport" target="_blank" style="color: #fff;">{{ _('Specter Community telegram chat')}}</a></p>
						</div>
					</div>
					<br>
					<a href="https://github.com/cryptoadvance/specter-desktop#help-wanted-do-you-like-specter" target="_blank" style="position: relative; z-index: 1; color: #fff; display: inline-block;"><h2 id="help-wanted-text" style="display: inline-block;">{{ _('Help wanted: Do you like Specter?') }}</h2><img src="{{ url_for('static', filename='img/love.png') }}" width="20px" style="vertical-align: sub; margin-left: 10px;"/></a>
					<div class="footer">
						<span style="position: relative; z-index: 1;">{{ _("Supported and maintained by") }}:</span><br>
						<a href="https://specter.solutions/" target="_blank" style="color: #fff; position: relative; z-index: 1;">
							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; position: relative; z-index: 1;"></a>
							<a href="https://twitter.com/specterwallet/" target="_blank"><img src="{{ url_for('static', filename='img/twitter.svg') }}" style="width: 30px; margin: 10px; position: relative; z-index: 1;"></a>
						</div>
						<span style="font-size: 0.8em;">uid: {{ specter.config_manager.data["uid"] }}</span>
					</div>
				{% endif %}
			{% endblock %}
	    <div id="mobile-distance-element-bottom" class="mobile-distance-element-bottom"></div>	
		</main>
	</div>

	{% if not hwi_bridge %}
		{# url routes are not defined in hwi_bridge mode. `url_for` will fail. #}
		<script>
			async function toggleHideSensitiveInfo() {
				showNotification(`{{ _("Revealing") if specter.hide_sensitive_info else _("Hiding") }} sensitive info...`, 0);
				let url = `{{ url_for('auth_endpoint.toggle_hide_sensitive_info') }}`;
				var formData = new FormData();
				formData.append('csrf_token', '{{ csrf_token() }}');
				try {
					const response = await fetch(
						url,
						{
							method: 'POST',
							body: formData
						}
					);
					if(response.status != 200){
						showError(await response.text());
						return;
					}
					const jsonResponse = await response.json();
					if (jsonResponse.success) {
						location.reload();
						return
					};
					showError(`{{ _("Failed to toggle sensitive info mode...") }}`)
				} catch(e) {
					console.log("Caught error: ", e);
					showError(e);
				}
			}

			{% if current_user.is_authenticated and not specter.hide_sensitive_info and specter.autohide_sensitive_info_timeout %}
				document.addEventListener("DOMContentLoaded", function(){
					var privacyTimeout = setTimeout(function(){
							// Automatically trigger the privacy toggle
							toggleHideSensitiveInfo();
						},
						{{ specter.autohide_sensitive_info_timeout }} * 60 * 1000
					);
				});
			{% endif %}

			{% if current_user.is_authenticated and specter.config.auth.method != "none" and specter.autologout_timeout %}
				document.addEventListener("DOMContentLoaded", function(){
					var logoutTimeout = setTimeout(function(){
							// Automatically log out the user
							location.href="{{ url_for('auth_endpoint.logout') }}?timeout=1";
						},
						{{ specter.autologout_timeout }} * 60 * 60 * 1000
					);
				});
			{% endif %}
		</script>
	{% endif %}
	{% block scripts %}
		<script>
			{% include "includes/language/language_js.jinja" %}
		</script>
	{% endblock %}
	{% include "services/inject_in_basejinja_body_bottom.jinja" %}
	</body>
</html>
