{% extends "base.jinja" %}
{% block main %}
	<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('general', current_user) }}
		<div class="card" style="margin: 20px auto;">
			<h1>{{ _("Language") }}</h1>
			{% include "includes/language/language_select.jinja" %}<br/>
			<br><br>

			<h1>{{ _("Privacy") }}</h1>
			</label>&nbsp;{{ _("Auto-hide sensitive info") }}:<br>
			<select name="autohide_sensitive_info_timeout" id="autohide_sensitive_info_timeout" onchange="updateAutoHideSensitiveInfoTimeout()">
				<option value="NEVER" {% if specter.autohide_sensitive_info_timeout %}selected{% endif %}>{{ _("Never") }}</option>
				<option value="10" {% if specter.autohide_sensitive_info_timeout == 10 %}selected{% endif %}>{{ _("After being idle for 10 minutes") }}</option>
				<option value="20" {% if specter.autohide_sensitive_info_timeout == 20 %}selected{% endif %}>{{ _("After being idle for 20 minutes") }}</option>
				<option value="40" {% if specter.autohide_sensitive_info_timeout == 40 %}selected{% endif %}>{{ _("After being idle for 40 minutes") }}</option>
				<option value="CUSTOM" {% if specter.autohide_sensitive_info_timeout and specter.autohide_sensitive_info_timeout not in [10, 20, 40] %}selected{% endif %}>{{ _("Custom idle time (minutes)") }}</option>
			</select>
			<br>
			<input type="number" min="1" name="custom_autohide_sensitive_info_timeout" id="custom_autohide_sensitive_info_timeout" class="hidden" placeholder='{{ _("minutes") }}' {% if specter.autohide_sensitive_info_timeout and specter.autohide_sensitive_info_timeout not in [10, 20, 40] %}value="{{ specter.autohide_sensitive_info_timeout }}"{% endif %} style="margin-top: 15px; margin-bottom: 30px;"/>
			<br>

			{% if specter.config.auth.method != "none" %}
				</label>&nbsp;{{ _("Auto-logout user") }}:<br>
				<select name="autologout_timeout" id="autologout_timeout" onchange="updateAutoLogoutTimeout()">
					<option value="NEVER" {% if not specter.autologout_timeout %}selected{% endif %}>{{ _("Never") }}</option>
					<option value="1" {% if specter.autologout_timeout == 1 %}selected{% endif %}>{{ _("After being idle for 1 hour") }}</option>
					<option value="4" {% if specter.autologout_timeout == 4 %}selected{% endif %}>{{ _("After being idle for 4 hours") }}</option>
					<option value="24" {% if specter.autologout_timeout == 24 %}selected{% endif %}>{{ _("After being idle for 24 hours") }}</option>
					<option value="CUSTOM" {% if specter.autologout_timeout and specter.autologout_timeout not in [1, 4, 24] %}selected{% endif %}>{{ _("Custom idle time (hours)") }}</option>
				</select>
				<br>
				<input type="number" min="1" name="custom_autologout_timeout" id="custom_autologout_timeout" class="hidden" placeholder='{{ _("hours") }}' {% if specter.autologout_timeout and specter.autologout_timeout not in [1, 4, 24] %}value="{{ specter.autologout_timeout }}"{% endif %} style="margin-top: 15px; margin-bottom: 30px;"/>
				<br>
			{% endif %}
			<br/>
			<h1>{{ _("Backup and Restore") }}</h1>
			<div style="display: flex;">
				<span>{{ _("Create Specter backup") }}:</span>
				<tool-tip width="200px">
				    <span slot="paragraph">
				    	{{ _("This will back up your wallets and devices.") }}
				    	{{ _("Backups are recommended but keep your backup files private, as sharing them will result in privacy leaks.") }}
				    </span>
				</tool-tip>
			</div>
			<div class="note">
				{{ _("Warning: This backup does not include the private keys of any hot wallet or the BIP 39 seed of your hardware wallets.") }}
			</div>
			<div class="row">
				<a href="{{ url_for('settings_endpoint.backup_file') }}" class="btn" style="max-width: 500px">{{ _("Download Specter backup (zip file)") }}</a>
			</div>
			<br>
			<div style="display: flex;">
				<span>{{ _("Load Specter backup") }}:</span>
				<tool-tip width="200px">
				    <span slot="paragraph">
						{{ _("Please make sure to unzip the backup file first, then upload the extracted folder.") }}
						{{ _("This will restore your wallets and devices.") }}<br>
						{{ _("Loading devices or wallets with names identical to existing ones may overwrite the existing ones.") }}		
				    </span>
				</tool-tip>
			</div>
			<div class="row">
				<input type="file" id="file" class="inputfile" webkitdirectory mozdirectory/>
				<input type="hidden" id="restorewallets" name="restorewallets"/>
				<input type="hidden" id="restoredevices" name="restoredevices"/>
				<label for="file" class="btn" style="min-width: 500px; margin-top: 5px;">
					{{ _("Choose backup folder (unzipped)") }}
				</label>
			</div>
			<span id="filesloaded"></span>
			<div class="row" style="margin-top: 5px;">
				<button onsubmit="showPacman()" type="submit" class="btn hidden" name="action" value="restore" id="restore" style="margin-bottom: 5px;">{{ _("Load Specter backup") }}</button>
			</div><br><br>

			<h1>{{ _("Miscellaneous") }} </h1>
			{{ _("Bitcoin unit to use") }} (BTC/sats):
			<select name="unit">
				<option value="btc" {% if unit!="sat" %} selected="selected"{% endif %}>BTC</option>
				<option value="sat" {% if unit=="sat" %} selected="selected"{% endif %}>sats</option>
			</select>
			<br><br>
			{{ _("Block explorer URL") }} ({{ specter.chain }}):<br>
			{% include "components/explorer_select.jinja" %}
			<div class="warning">
				<img src="{{ url_for('static', filename='img/info_sign.svg') }}" style="width: 20px;"/><br>
				{{ _("Specter does not use the block explorer to get any data whatsoever. This setting is only to allow opening transactions and addresses in a block explorer directly from Specter. All data Specter uses comes directly from your own connected full node.") }}
			</div>
			<br>
			{{ _("Fees estimation source") }}:<br>
			<label><input type="radio" class="inline" style="margin: 0 10px 0 20px;" name="fee_estimator" value="mempool" onclick="updateFeeEstimator()" {% if specter.fee_estimator=="mempool" %}checked{% endif %}>Mempool.space</label><br>
			<label><input type="radio" class="inline" style="margin: 0 10px 0 20px"  name="fee_estimator" value="bitcoin_core" onclick="updateFeeEstimator()" {% if specter.fee_estimator=="bitcoin_core" %}checked{% endif %}>Bitcoin Core</label><br>
			<label><input type="radio" class="inline" style="margin: 0 10px 0 20px;" name="fee_estimator" value="custom" onclick="updateFeeEstimator()" id="fee_estimator_custom_option" {% if specter.fee_estimator=="custom" %}checked{% endif %}>{{ _("Self hosted mempool.space") }}</label>
			<br>
			<input type="text" name="fee_estimator_custom_url" id="fee_estimator_custom_url" value="{{ fee_estimator_custom_url }}" class="hidden" placeholder="http://yourmempool.space/" style="margin-top: 15px;"/>			
			<br><br>
			{% if current_user.is_admin %}
			<div style="display: flex; flex-direction: column">
				<div style="display: flex;">
					<span>{{ _("Logging level") }}:</span>
					<tool-tip width="200px">
					    <span slot="paragraph">
					    	{{ _("The logging level determines the amount of output that is displayed in the terminal - if you run Specter from the terminal - and in the log file which can be found here:") }} <code>{{ config.SPECTER_LOGFILE }}</code><br>
					    	{{ _("The debug option produces the most output, the warn option the least.") }}
					    </span>
					</tool-tip>
				</div>
				<br>
				<select name="loglevel">
					<option value="WARN" {% if loglevel=="WARN" %} selected="selected"{% endif %}>WARN</option>
					<option value="INFO" {% if loglevel=="INFO" %} selected="selected"{% endif %}>INFO</option>
					<option value="DEBUG" {% if loglevel=="DEBUG" %} selected="selected"{% endif %}>DEBUG</option>
				</select>
			</div>
			<br><br>
			{% endif %}
			{{ _("Validate Merkle Proofs") }}:
			<div class="note">
				{{ _("Cannot enable when using a pruned bitcoin node") }}
			</div>
			<div class="row">
				<label class="switch">
				<input type="checkbox" id="validatemerkleproof" name="validatemerkleproof" {% if validate_merkle_proofs %}checked{% endif %}>
				<span class="slider"></span>
				</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span class="note explorer-link" style="text-decoration: underline;" onclick="toggleHidden('merkle-info-details');">{{ _("What's this?") }}</span>
			</div>
			<div class="warning hidden" id="merkle-info-details">
				<img src="{{ url_for('static', filename='img/info_sign.svg') }}" style="width: 20px;"/><br>
		        {{ _('Specter Desktop validates ')}}<a href="https://github.com/bitcoin/bips/blob/master/bip-0037.mediawiki" target="_blank">{{ _("BIP 37")}}</a>{{ _(" Merkle Proofs from your full node ")}}<strong>{{ _("guaranteeing")}}</strong>{{ _(" that transactions displayed as confirmed have been included in the specified block hash.")}}<br><br>
		        {{ _("However, a compromised full node could return a fake block that was never mined.") }}
		        {{ _("To be sure, you could double check the block hash in other locations (other nodes, block explorers, etc).") }}
			</div>
			<br>
			<div class="row">
				<button type="submit" class="btn" name="action" value="save">{{ _("Save") }}</button>
			</div>
		</div>
	</form>
{% endblock %}


{% block scripts %}
	<script type="text/javascript">
	function toggleHidden(elementId) {
		let el = document.getElementById(elementId);
		if (el.classList.contains("hidden")) {
			el.classList.remove('hidden');
		} else {
			el.classList.add('hidden');
		}
	}
	function updateFeeEstimator() {
		if (document.getElementById('fee_estimator_custom_option').checked) {
			document.getElementById('fee_estimator_custom_url').classList.remove('hidden');
		} else {
			document.getElementById('fee_estimator_custom_url').classList.add('hidden');
		}
	}
	document.addEventListener("DOMContentLoaded", function(){
		updateFeeEstimator();
		var el = document.getElementById("file");

		if (el != null) {
			el.addEventListener("change", (e) => {
				let wallets = []
				let devices = []
				files = e.currentTarget.files;
				if (e.currentTarget.files.length == 1 && e.currentTarget.files[0].type == 'application/zip') {
					showError(`{{ _("Cannot upload as ZIP file, please unzip the file and upload by selecting the extracted folder") }}`, 10000);
					return;
				}
				console.log(files);
				for(let i=0; i<files.length; i++){
					if (files[i].type == 'application/json'){
						let reader = new FileReader();
						reader.onload = function(e) {
							if (files[i].webkitRelativePath.indexOf('devices/') != -1) {
								console.log(files[i].name);
								devices.push(JSON.parse(reader.result));
								document.getElementById('restoredevices').value = JSON.stringify(devices);
								document.getElementById('filesloaded').innerHTML = `<br>Found ${devices.length} devices and ${wallets.length} wallets:`;
								document.getElementById('restore').style.display = 'block';
							} else if (files[i].webkitRelativePath.indexOf('wallets/') != -1) {
								console.log(files[i].name);
								wallets.push(JSON.parse(reader.result));
								document.getElementById('restorewallets').value = JSON.stringify(wallets);
								document.getElementById('filesloaded').innerHTML = `<br>Found ${devices.length} devices and ${wallets.length} wallets:`;
								document.getElementById('restore').style.display = 'block';
							}
						}
						reader.readAsText(files[i]);
					}
				}
			});
		}
	});

	function updateAutoHideSensitiveInfoTimeout() {
		console.log("autohide_sensitive_info_timeout");
		if (document.getElementById('autohide_sensitive_info_timeout').value == "CUSTOM") {
			document.getElementById('custom_autohide_sensitive_info_timeout').classList.remove('hidden');
		} else {
			document.getElementById('custom_autohide_sensitive_info_timeout').classList.add('hidden');
		}
	}
	document.addEventListener("DOMContentLoaded", function(){
		// Setup initial show/hide state
		updateAutoHideSensitiveInfoTimeout();
	});

	{% if specter.config.auth.method != "none" %}
		function updateAutoLogoutTimeout() {
			if (document.getElementById('autologout_timeout') !== null && document.getElementById('autologout_timeout').value == "CUSTOM") {
				document.getElementById('custom_autologout_timeout').classList.remove('hidden');
			} else {
				document.getElementById('custom_autologout_timeout').classList.add('hidden');
			}
		}
		document.addEventListener("DOMContentLoaded", function(){
			// Setup initial show/hide state
			updateAutoLogoutTimeout();
		});
	{% endif %}

	{% include "includes/language/language_js.jinja" %}

	</script>
{% endblock %}
