{% extends "base.jinja" %}
{% block main %}
	<form action="?" method="POST">
		<h1 id="title" class="settings-title">Bitcoin Core settings - Specter Desktop {{ current_version }}</h1>
		{% from 'settings/components/settings_menu.jinja' import settings_menu %}
		{{ settings_menu('bitcoin_core_settings', current_user) }}
		<div class="card" style="margin: 20px auto;">
			<h2>Bitcoin JSON-RPC configuration</h2>
			<br>
			<label style="height: 25px; vertical-align: sub;">Auto-detect:&nbsp;</label>
			<label class="switch">
				<input type="checkbox" id="autodetect" name="autodetect" {% if autodetect %}checked{% endif %}>
				<span class="slider"></span>
			</label>
			<span id="datadir-container">
			<div class="tool-tip" style="float: right;">
				<i class="tool-tip__icon">i</i>
				<p class="tool-tip__info">
					<span class="info">
						<span class="info__title">Setting Bitcoin Core Data Directory<br></span><br>
						When auto-detect is on, Specter will check for Environment-Variables (BTC_RPC_USER, BTC_RPC_PASSWORD, BTC_RPC_HOST, BTC_RPC_PORT) to configure the connection or 
						attempt to automatically locate your Bitcoin data directory and load your node configurations from it.<br><br>
						However, if your Bitcoin Core data directory is not located at the default location, you will need to enter its path here so Specter will be able to locate it.<br><br>
						If you are connecting to a specific remote node, you can disable the auto-detect feature and enter the node's configurations manually below.
					</span>
				</p>
			</div>
			<br><br>
				Bitcoin Core data directory path:<br><input type="text" id="datadir" name="datadir" type="text" value="{{ datadir }}">
			</span>
			<br><br>
			<div id="rpc_settings" style="padding: 10px; border-radius: 10px;">
				<div id="lock" class="center">
					<p style="text-align: center; margin: auto; ">&#128274;</p>
					<span class="note centered"> (disable auto-detect to configure manually)</span>
				</div>
				Username:<br><input type="text" id="username" name="username" value="{{ username }}">
				<br><br>
				Password:<br><input type="password" id="password" name="password" value="{{ password }}">
			</div>
			<br>
			Host:<br><input type="text" id="host" name="host" type="text" value="{{ protocol }}://{{ host }}">
			<br><br>
			Port:<br><input type="text" id="port" name="port" type="text" value="{{ port }}">
			<div class="note">
				Default ports: <b>8332</b> for mainnet, <b>18332</b> for testnet, <b>18443</b> for Regtest, <b>38332</b> for signet
			</div>
			<br><br>
			<div class="row">
				<button type="submit" class="btn" name="action" value="test">Test</button>&nbsp;
				<button type="submit" class="btn" name="action" value="save">Save</button>
			</div>
			{% if test %}
				<br><div class="log"><b>Test results:</b><br><br>
				<div style="display: grid;grid-template-columns: auto auto auto; line-height: 2.2;">
					{% macro tick_or_cross(my_boolean) %}
					<button style="background: #fff; border: none;" disabled> 
						{% if my_boolean %}
							<div style="color: green; font-size: 1.5em;">&#x2714;</div> 
						{% else %} 
							&#x274C; 
						{% endif %}
					</button>
					{% endmacro %}
					{% if 'connectable' in test['tests'] %}
						<div>Connectable</div>
						<div>{{ tick_or_cross(test['tests']['connectable']) }} </div>
						<div> {% if not test['tests']['connectable'] %} Check e.g. <a href="https://bitcoin.stackexchange.com/questions/74337/testnet-bitcoin-connection-refused-111">this article</a> {% endif %}</div>
					{% endif %}

					{% if 'credentials' in test['tests'] %}
						<div>Credentials</div>
						<div> {{ tick_or_cross(test['tests']['credentials']) }} </div>
						<div> {% if not test['tests']['credentials'] %} Please double-check your credentials!  {% endif %}</div>
					{% endif %}

					{% if 'recent_version' in test['tests'] %}
						<div>Version recent enough</div>
						<div> {{ tick_or_cross(test['tests']['recent_version']) }} </div>
						<div> {% if not test['tests']['recent_version'] %} Update your Bitcoin Node to at least version 0.17.  {% endif %}</div>
					{% endif %}
					
					{% if 'wallets' in test['tests'] %}
						<div>Wallets enabled</div>
						<div> {{ tick_or_cross(test['tests']['wallets']) }} </div>
						<div> {% if not test['tests']['wallets'] %} Make sure to have 'disablewallet=0' in your bitcoin.conf {% endif %} </div>
					{% endif %}

				</div>

				<br>
					<code>
						<pre>Process finished with code <b>{{ test.code }}</b>{% if test.code == 0 %} Output: {{ test.out }}{% else %}Error message: {{ test.err }}{% endif %}</pre>
					</code>
				</div>
			{% endif %}
		</div>
	</form>
{% endblock %}

{% block scripts %}
<script>
	document.addEventListener("DOMContentLoaded", function(){
		var autodetect = document.getElementById("autodetect");
		if (autodetect != null) {
			function toggleAutoDetectMode() {
				var rpcSettings = document.getElementById("rpc_settings");
				var lock = document.getElementById("lock");
				var datadirContainer = document.getElementById("datadir-container");
				if (autodetect.checked) {
					lock.style.removeProperty('display');
					datadirContainer.style.removeProperty('display');
					rpcSettings.style['pointer-events'] = 'none';
					rpcSettings.style['background-color'] = '#8881';
					document.getElementById("username").value = '{{ username }}';
					document.getElementById("password").value = '{{ password }}';
				} else {
					lock.style['display'] = 'none';
					datadirContainer.style['display'] = 'none';
					rpcSettings.style.removeProperty('background-color');
					rpcSettings.style.removeProperty('pointer-events');
				}
			}

			autodetect.addEventListener("change", function() {
				toggleAutoDetectMode();
			}, false);
			toggleAutoDetectMode();
		}
	});
</script>
{% endblock %}