{% extends "base.jinja" %}
{% block main %}
	<style>
		.radio-btn:hover {
			background: var(--cmap-bg-ligher);
			cursor: pointer;
		}
		.svg-check-green {
			background-color: #81cd81;
			width: 23px;
			height: 23px;
			border: 1px solid #81cd81;
			border-radius: 100%;
		}

		.no-bottom-border-radius {
			border-bottom-left-radius: 0px;
			border-bottom-right-radius: 0px;
		}
	</style>
	<form action="?" method="POST" onsubmit="showPacman()">
		<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
		<h1 id="title" class="settings-title">Settings</h1>
		{% from 'settings/components/settings_menu.jinja' import settings_menu %}
		{{ settings_menu('tor', current_user) }}
		<br>
		<h1>
		<img style="width: 25px; margin-right: 7px; vertical-align: middle;" src="{{ url_for('static', filename='img/tor.svg') }}"/><span style="vertical-align: bottom; margin-right: 10px;">
		{{ _("Tor configurations") }}
		</h1>
		<p class="note center">{{ _("Enable Tor to anonymise your data connections.") }}</p>
		<br>
		<label for="tor_type_builtin" class="card radio-btn" style="padding: 20px 10px 5px; display: block; margin: auto;">
			{% if torbrowser_installed %}
				{% if torbrowser_running %}
					<span style="display: inline; float: right;margin-top: 10px; margin-right: 10px;">
					<span class="note">Running&nbsp;&nbsp;<img src="{{ url_for('static', filename='img/check.svg') }}" class="svg-check-green" style="vertical-align: middle;"/>&nbsp;&nbsp;</span>
					<button style="display: inline; width: 80px;" type="submit" class="btn" name="action" value="stoptor">{{ _("Stop") }}</button>&nbsp;
					<button style="display: inline; width: 80px;" type="submit" class="btn" name="action" value="test_tor">{{ _("Test") }}</button>
					</span>
				{% else %}
					<span style="display: inline; float: right; margin-top: 10px; margin-right: 10px;">
					<span class="note">{{ _("Stopped") }}&nbsp;&nbsp;</span>
					<button style="display: inline; width: 80px;" type="submit" class="btn" name="action" value="uninstalltor">{{ _("Uninstall") }}</button>&nbsp;
					<button style="display: inline; width: 80px;" type="submit" class="btn" name="action" value="starttor">{{ _("Start") }}</button>
					</span>
				{% endif %}
			{% else %}
				<a style="display: inline; float: right; width: 110px; margin-top: 10px; margin-right: 10px;" href="{{ url_for('setup_endpoint.tor_from_settings' ) }}" class="btn centered action" id="setup-tor-button">{{ _("Set up") }}</a>
			{% endif %}
			<div class="row">
				<input id="tor_type_builtin" type="radio" name="tor_type" value="builtin" style="width: 20px; min-width: 20px; margin-top: 20px;" onchange="toggletor_type('builtin')" {% if tor_type == 'builtin' %} checked {% endif %}/>
				<h2 style="text-align: left; margin-left: 10px; font-size: 1.1em;">Built in</h2>
			</div>
			<p class="note" style="text-align: left; margin-left: 38px;margin-top: -5px;">{{ _("Quick and automatic setup.") }}</p>
		</label>
		<br>
		<label id="custom-tor-label" for="tor_type_custom" class="card radio-btn no-bottom-border-radius" style="padding: 20px 10px 5px; display: block; margin: auto;">
			<div class="row">
				<input id="tor_type_custom" type="radio" name="tor_type" value="custom" style="width: 20px; min-width: 20px; margin-top: 20px;" onchange="toggletor_type('custom')" {% if tor_type == 'custom' %} checked {% endif %}/>
				<h2 style="text-align: left; margin-left: 10px; font-size: 1.1em;">{{ _("Custom") }}</h2>
			</div>
			<p class="note" style="text-align: left; margin-left: 38px;margin-top: -5px;">{{ _("Use your own Tor configuration.") }}</p>
		</label>
		<div id="custom-tor-details" class="card" style="margin: auto;border-top-left-radius: 0px; border-top-right-radius: 0px; border-top: none;">
			{{ _("Use Tor proxy running at:") }} 
			<input id="proxy-url" name="proxy_url" value="{{ proxy_url }}" type="url" placeholder="i.e. socks5://127.0.0.1:9050" />
			<br>
            <p class="note">
			{{ _("Default for Tor daemon:") }} socks5://127.0.0.1:9050<br>
			{{ _("Default for Tor Browser:") }} socks5://127.0.0.1:9150
			</p>
			<br>
			{{ _("Tor control port:") }}
			<p class="note">
			{{ _("Restart Specter for change of the control port to take effect.") }}
			</p>
			<input name="tor_control_port" value="{{ tor_control_port }}" type="text" placeholder='{{ _("Set to custom port here, if kept empty the default (9051 and 9151) is used") }}' />
			<br><br>
			<button type="submit" class="btn" name="action" value="test_tor" style="width: 300px;">{{ _("Test connection") }}</button>
		</div>
		<br><br>
		<h2 style="text-align: center; color: #ccc;">{{ _("Additional Options") }}</h2>
		<div style="width: 580px; margin: auto;">
			{% if not debug %}
				<tool-tip title="Tor hidden service" style="float: right; margin-top: 15px;">
				{{ _("Running Specter behind a Tor hidden service allows you to acccess Specter over Tor from anywhere via a Tor supporting browser.") }}
				</tool-tip>
				<label class="switch" style="float: right; margin-top: 15px;">
					<input type="checkbox" id="hidden_service" name="hidden_service" onchange="checkAuthEabled()"{% if tor_service_id %}checked{% endif %}>
					<span class="slider"></span>
				</label>
				<p style="font-size: 1.1em">{{ _("Enable Tor hidden service") }}</p>
				<p class="note">
				{{ _("Allows access to Specter from anywhere.") }}<br>
				{{ _('Requires authentication to be enabled.') }} <a style="color: var(--cmap-blue);" 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" 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 %}
			<br>
			<tool-tip title="Tor Only mode" style="float: right; margin-top: 30px;">
			{{ _("Some optional Specter functionality, like rescanning UTXO on a pruned node or getting the Bitcoin price, might make calls to external APIs and services.") }}<br><br>
			{{ _("Toggle this on to ensure Specter routes all these external calls over Tor proxy.") }}<br><br>
			{{ _("Note: Some external sources may stop working if they block Tor call.") }}
			</tool-tip>
			<label class="switch" style="float: right; margin-top: 30px;">
				<input type="checkbox" id="only-tor" name="only_tor" {% if only_tor %}checked{% endif %}>
				<span class="slider"></span>
			</label>
			<p style="font-size: 1.1em">{{ _("Force external calls over Tor?") }}</p>
			<p class="note">
			{{ _("Route all external calls over the Tor proxy for improved privacy.") }}
			</p>
			<br><br>
			<button type="submit" class="btn" name="action" value="save" style="width: 100%;">{{ _("Save changes") }}</button>
			<br><br>
		</div>
		<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');
				}
			}

			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 %}
			}

			document.addEventListener("DOMContentLoaded", function(){
				toggletor_type('{{ tor_type }}');
			});
		</script>
	</form>
{% endblock %}

