{% extends "base.jinja" %}

{% block main %}
	<form action="?" method="POST" onsubmit="showPacman()">

		<h1 id="title" class="settings-title">Settings</h1>
		{% from 'settings/components/settings_menu.jinja' import settings_menu %}
		{{ settings_menu('tor', current_user, ext_settingstabs) }}

		<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>

		<h3 class="mt-8">{{ _("Tor configurations") }}</h3>
		<!-- <img data-style="width: 25px; margin-right: 7px; vertical-align: middle;" src="{{ url_for('static', filename='img/tor.svg') }}"/><span data-style="vertical-align: bottom; margin-right: 10px;"> -->
		<div id="hasencryptedservicedata" class="flex p-4 mt-3 mb-4 bg-dark-600 rounded-lg" role="alert">
			<svg class="flex-shrink-0 inline w-6 h-6 mr-3" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M32.0022,55.9844l-1.04907e-06,-2.84217e-14c-13.2548,-5.79387e-07 -24,-10.7452 -24,-24c5.79387e-07,-13.2548 10.7452,-24 24,-24c13.2548,5.79387e-07 24,10.7452 24,24l2.13163e-14,-1.04907e-06c0,13.2548 -10.7452,24 -24,24Zm1.5,-32l3.82016e-08,-2.71086e-09c-1.79133,0.127116 -3.35165,-1.21031 -3.5,-3l6.50646e-08,-7.8524e-07c0.148296,-1.78972 1.70866,-3.12717 3.5,-3l-5.85322e-09,4.15529e-10c1.79134,-0.127171 3.3517,1.21028 3.5,3l-5.57104e-08,6.72365e-07c-0.148295,1.78976 -1.70872,3.12723 -3.5001,3Zm1.4206,6.7635l-2.7853,10.5093l-8.37179e-08,3.15667e-07c-0.270677,1.02062 0.262417,2.08281 1.2425,2.4757l-5.91015e-08,-2.36708e-08c0.379505,0.151996 0.628277,0.519688 0.6282,0.9285v0.323l8.52651e-14,4.05e-07c0,0.551933 -0.447167,0.999503 -0.9991,1h-2.9891l-4.04477e-08,1.96948e-10c-1.65938,0.00807986 -3.01111,-1.33056 -3.01919,-2.98993c-0.00127082,-0.260991 0.0314695,-0.521035 0.0973943,-0.773566l2.7852,-10.5094l2.79671e-08,-1.05468e-07c0.270652,-1.02067 -0.262537,-2.08289 -1.2427,-2.4757l-2.20542e-08,-8.83296e-09c-0.379505,-0.151996 -0.628276,-0.519688 -0.6282,-0.9285v-0.3229l-1.77636e-14,-9.40042e-08c-8.33514e-08,-0.552011 0.447289,-0.999614 0.9993,-1h2.9887l1.06497e-07,-5.28143e-10c1.65943,-0.00822943 3.01133,1.33033 3.01956,2.98976c0.00129458,0.261047 -0.0314356,0.52115 -0.0973639,0.773738Z" fill="currentColor" fill-rule="evenodd"></path></svg>
			<span class="sr-only">Info</span>
			<div>
				{{ _("Activating Tor here automatically anonymizes connections to Electrum servers and to Spotbit price providers. If you want to enforce Tor for more, check out the 'Force calls over Tor' option below.") }}
			</div>
		</div>

		<label for="tor_type_disabled" class="flex bg-dark-800 p-4 mb-5 border-2 border-dark-700 rounded-xl align-start hover:bg-dark-700 cursor-pointer">
			<input class="mr-4 h-8" id="tor_type_disabled" type="radio" name="tor_type" value="disabled" data-style="width: 20px; min-width: 20px; margin-top: 20px;" onchange="toggletor_type('disabled')" {% if tor_type == 'disabled' %} checked {% endif %}/>
			<div>
			<h3>Disabled</h3>
			<p>{{ _("No Tor setup") }}</p>
			</div>
		</label>

		{% if tor_type == 'builtin' or tor_builtin_possible %}
		<label for="tor_type_builtin" class="flex bg-dark-800 p-4 mb-5 border-2 border-dark-700 rounded-xl align-start hover:bg-dark-700 cursor-pointer">
			<input class="mr-4 h-8" id="tor_type_builtin" type="radio" name="tor_type" value="builtin" data-style="width: 20px; min-width: 20px; margin-top: 20px;" onchange="toggletor_type('builtin')" {% if tor_type == 'builtin' %} checked {% endif %}/>
			<div>
				<h3>Built-in</h3>
				<p>{{ _("Quick and automatic setup") }}</p>
				{% if torbrowser_installed %}
					{% if torbrowser_running %}
						<div class="flex items-center gap-3">
							<svg class="w-6 h-6 text-accent cursor-auto" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M32.01,56.0208l-1.04907e-06,-2.13163e-14c-13.2548,-5.79387e-07 -24,-10.7452 -24,-24c5.79387e-07,-13.2548 10.7452,-24 24,-24c13.2548,5.79387e-07 24,10.7452 24,24l2.84217e-14,-1.04907e-06c0,13.2548 -10.7452,24 -24,24Zm13.4,-35.4186l-3.49088e-08,-3.45428e-08c-0.785624,-0.777389 -2.0527,-0.770712 -2.83008,0.0149119c-0.0803372,0.0811883 -0.153576,0.169105 -0.218915,0.262788l-12.8438,18.3901l-5.8744,-8.4112l5.28764e-08,7.58143e-08c-0.632255,-0.906528 -1.87968,-1.12887 -2.78621,-0.496615c-0.0936828,0.0653387 -0.1816,0.138578 -0.262788,0.218915l2.67369e-08,-2.81027e-08c-0.695734,0.731275 -0.767842,1.85586 -0.1712,2.67l6.6244,9.485l8.22893e-08,1.17716e-07c0.953738,1.36434 2.83291,1.69719 4.19725,0.743454c0.289461,-0.202347 0.541107,-0.453993 0.743454,-0.743454l13.5937,-19.4644l2.1684e-09,-2.9606e-09c0.596265,-0.814103 0.524082,-1.93834 -0.1714,-2.6695Z" fill="currentColor" fill-rule="evenodd"></path></svg>
							<div>Tor is running</div>
							<button type="submit" class="btn bg-dark-900 border-dark-700 hover:border-dark-600" name="action" value="stoptor">{{ _("Stop") }}</button>
							<button id="uninstall-btn" type="submit" class="btn bg-dark-900 border-dark-700 hover:border-dark-600" name="action" value="uninstalltor">{{ _("Uninstall") }}</button>
						</div>
					{% else %}
						<div class="flex items-center gap-3">
							<svg class="w-6 h-6 cursor-auto" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z" stroke-width="0" fill="currentColor"></path><path d="M17 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z" stroke-width="0" fill="currentColor"></path></svg>
							<div>Tor is stopped</div>
							<button type="submit" class="btn bg-dark-900 border-dark-700 hover:border-dark-600" name="action" value="starttor">{{ _("Start") }}</button>
							<button type="submit" class="btn bg-dark-900 border-dark-700 hover:border-dark-600" name="action" value="test_tor">{{ _("Test") }}</button>
							<button id="uninstall-btn" type="submit" class="btn bg-dark-900 border-dark-700 hover:border-dark-600" name="action" value="uninstalltor">{{ _("Uninstall") }}</button>
						</div>
					{% endif %}
				{% else %}
				<a href="{{ url_for('setup_endpoint.tor_from_settings' ) }}" class="button mt-4 mb-2 text-white bg-accent" id="setup-tor-button">{{ _("Set Up") }}</a>
				{% endif %}
			</div>
		</label>
		{% endif %}

		<label id="custom-tor-label" for="tor_type_custom" class="flex bg-dark-800 p-4 mb-5 border-2 border-dark-700 rounded-xl align-start hover:bg-dark-700 cursor-pointer">
			<input class="mr-4 h-8" id="tor_type_custom" type="radio" name="tor_type" value="custom" onchange="toggletor_type('custom')" {% if tor_type == 'custom' %} checked {% endif %}/>
			<div>
				<h3>{{ _("Custom") }}</h3>
				<p>{{ _("Use your own Tor configuration.") }}</p>

				<div id="custom-tor-details" class="mt-3" data-style="margin: auto;border-top-left-radius: 0px; border-top-right-radius: 0px; border-top: none;">
					<div class="floating-wrapper">
						<input class="floating-input peer" id="proxy-url" name="proxy_url" value="{{ proxy_url }}" type="url" placeholder=" " />
						<label class="floating-label">{{ _("Use Tor Proxy Running At") }}</label>
					</div>

					<p class="my-3">
						{{ _("Default for Tor daemon:") }} socks5://127.0.0.1:9050<br>
						{{ _("Default for Tor Browser:") }} socks5://127.0.0.1:9150
					</p>

					<div class="floating-wrapper">
						<input id="tor-control-port-input" class="floating-input peer" name="tor_control_port" value="" type="text" placeholder=" "/>
						<label id="tor-control-port-label" for="tor_control_port" class="floating-label">{{ _("Tor Control Port (Leave blank to use default)") }}</label>
					</div>

					<p> {{ _("Restart Specter for change of the control port to take effect.") }} </p>

					<button type="submit" class="button mt-3" name="action" value="test_tor">{{ _("Test connection") }}</button>
				</div>
			</div>
		</label>

		<h3 class="mt-8">{{ _("Additional Options") }}</h3>

		<div>
			{% if debug %}
				<label class="flex items-center mt-4">
					<input type="checkbox" id="hidden_service" name="hidden_service" onchange="checkAuthEabled()"{% if tor_service_id %}checked{% endif %}>
					{{ _("Enable Tor hidden service") }}
					<div id="tooltip-container" class="tooltip-little-grow tooltip-width">
						<tool-tip id="tooltips-tor">
						    <h4 slot="title">{{ _("Tor hidden service") }}</h4>
						    <span slot="paragraph">
								{{ _("Running Specter behind a Tor hidden service allows you to acccess Specter over Tor from anywhere via a Tor supporting browser.") }}
						    </span>
						</tool-tip>
					</div>
				</label>

				<p>
					{{ _("Allows access to Specter from anywhere.") }}
					{{ _('Requires authentication to be enabled.') }} <a href="{{ url_for('settings_endpoint.auth' ) }}">{{ _("Authentication settings") }}</a>
				</p>

				{% if tor_service_id %}
					<p><b>
						{{ _("Specter hidden service is running at:") }}
						<span title="Copy Tor address" data-style="word-break: break-word;" class="explorer-link" onclick="copyText('http:/\/{{ tor_service_id }}.onion', '{{ _("Copied Tor hidden service address:") }} {{ tor_service_id }}.onion')">
						{{ tor_service_id }}.onion
						</span>
					</b></p>
				{% endif %}
			{% endif %}

			<label class="flex items-center mt-4">
				<input type="checkbox" id="only-tor" name="only_tor" {% if only_tor and not unselectOnlyTor %}checked{% endif %}>
				{{ _("Force calls over Tor") }}
				<div id="tooltip-container" class="tooltip-little-grow tooltip-width">
					<tool-tip id="tooltips-tor">
							<span slot="paragraph">
							{{ _("This ensures that Specter routes all external calls over Tor if Tor is enabled.") }}<br><br>
							{{ _("Some functionality may stop working and this will have a significant performance impact especially since calls to your Bitcoin Core node will be routed through Tor, too.") }}
							</span>
					</tool-tip>
				</div>
			</label>

			<p class="note">
				{{ _("Route all external calls over the Tor proxy for improved privacy.") }}
			</p>

			<button type="submit" class="mt-8 button text-white bg-accent" name="action" value="save" data-style="width: 100%;">{{ _("Save") }}</button>
		</div>
	</form>

	<script type="text/javascript">
		function toggletor_type(tor_type) {
			let customTorLabel = document.getElementById('custom-tor-label');
			let customTorDetails = document.getElementById('custom-tor-details');

			if (tor_type == 'custom') {
				customTorLabel.classList.add('no-bottom-border-radius');
				customTorDetails.classList.remove('hidden');
			} else {
				customTorLabel.classList.remove('no-bottom-border-radius');
				customTorDetails.classList.add('hidden');
			}
		}

		const setupTorBtn = document.getElementById('setup-tor-button')
		const builtinRadioBtn = document.getElementById('tor_type_builtin')

		// Button disappears after successful setup
		if (setupTorBtn) {
			setupTorBtn.addEventListener('click', () => {
				builtinRadioBtn.checked = true
			})
		}

		// We use localStorage only temporarily when coming back from the setup route to show the success message
		if (localStorage.getItem('torSetupCompleted') === 'true') {
			showNotification(`{{ _("Built-in Tor setup was saved and Tor is running.") }}`, 5000)
			localStorage.removeItem('torSetupCompleted')
		}

		const torControlPortInput = document.getElementById('tor-control-port-input')
		const torControlPortLabel = document.getElementById('tor-control-port-label')

		// Changes the label text upon user input
		torControlPortInput.addEventListener('input', () => {
			if (torControlPortInput.value) {
				torControlPortLabel.textContent = 'Tor Control Port'
			} 
			else {
				torControlPortLabel.textContent = 'Tor Control Port (Leave blank to use default)'
			}
		})

		function checkAuthEabled() {
			{% if specter.config.auth.method == "none" %}
				document.getElementById('hidden_service').checked = false;
				showError(`{{ _("Please set an authentication method before enabling the hidden service") }}`)
			{% else %}
			return true;
			{% endif %}
		}

		// Hook up responsiveness for tooltips
		const tooltips = document.querySelectorAll('#tooltips-tor');
					const tooltipContainers = document.querySelectorAll('#tooltip-container');
					tooltips.forEach((tooltip, index) => tooltip.addEventListener('customhover', () => {
							tooltipContainers[index].classList.remove("tooltip-little-grow");
							tooltipContainers[index].classList.add("tooltip-max-grow");
							})
					)
					tooltips.forEach((tooltip, index) => tooltip.addEventListener('customout', () => {
							tooltipContainers[index].classList.remove("tooltip-max-grow");
							tooltipContainers[index].classList.add("tooltip-little-grow");
							})
					)
		document.addEventListener("DOMContentLoaded", function(){
			toggletor_type('{{ tor_type }}');
		});
	</script>
{% endblock %}

