{% extends "base.jinja" %}

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

	{% include "includes/hwi/hwi.jinja" %}

	<h3 class="mt-8">{{ _("Hardware Devices Bridge") }}</h3>
	<p class="mb-5">{{ _("Allows Specter to communicate with your hardware devices over USB.") }}</p>

	<label 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 peer" type="radio" name="hwibridge" value="local"  onchange="switchHWIBridgeConfView(this.value)" {% if specter.hwi_bridge_url == '/hwi/api/'%} checked {% endif %}/>
		<div>
			<h3>{{ _("Local USB connection") }}</h3>
			<p>{{ _("Select this if Specter is installed on this computer") }}</p>
		</div>
	</label>

	<label 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" type="radio" name="hwibridge" value="remote" onchange="switchHWIBridgeConfView(this.value)" {% if specter.hwi_bridge_url == 'http://127.0.0.1:25441/hwi/api/' %} checked {% endif %}/>
		<div>
			<h3>{{ _("Remote Specter USB connection") }}</h3>
			<p>{{ _("Select this if Specter is installed on a different machine") }}</p>
		</div>
	</label>

	<label 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" type="radio" id="custom_hwibridge" name="hwibridge" value="custom" data-style="width: 20px; min-width: 20px; margin-top: 20px;" onchange="switchHWIBridgeConfView(this.value)" {% if specter.hwi_bridge_url != 'http://127.0.0.1:25441/hwi/api/' and specter.hwi_bridge_url != '/hwi/api/' %} checked {% endif %}/>
		<div>
			<h3>Custom URL</h3>
			<p>{{ _("Select this if you would like to configure manually (experts only)") }}</p>
			<input type="text" id="custom_url" value="{{ specter.hwi_bridge_url }}" oninput="if(document.getElementById('custom_hwibridge').checked){document.getElementById('hwi_bridge_url').value=this.value}" />
		</div>
	</label>

	<form action="?" method="POST">
		<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
		<input type="hidden" name="hwi_bridge_url" id="hwi_bridge_url" value="{{ specter.hwi_bridge_url }}"/>

		<div class="hidden" id="remote-warning">
			<div class="flex p-4 mb-5 bg-dark-600 rounded-lg" role="alert">
				<svg aria-hidden="true" class="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
				<span class="sr-only">Info</span>
				<div>
					<span class="font-medium">Info: </span> 
					{{ _('If you haven’t done so already, head to "Preferences" on your desktop app (found on the top navigation). Select the option to connect remotely.') }}
					<!-- <img src="{{ url_for('static', filename='img/preferences_tab_screenshot.png')}}" width="400px;"/> -->
				</div>
			</div>
		</div>

		<button type="submit" class="button text-white bg-accent mt-3" value="update_hwi">{{ _("Save") }}</button>
	</form>

	<h3 class="mt-8">{{ _("Communication") }}</h3>
	<p>{{ _("You might also need to allow Specter to communicate with the device bridge.") }}</p>
		<li>{{ _("Access the device bridge settings.") }} <a href='{{specter.hwi_bridge_url.replace("/hwi/api", "/hwi/settings")}}' target="_blank">Click here</a>.</li>
		<li>{{ _("Add the domain") }} {{ url_for('index', _external=True) }} <span onclick="copyText('{{ url_for('index', _external=True) }}', '{{ _("Copied Specter URL") }}')">({{ _("copy") }}</span> {{ _("to the whitelist there.") }}<br>{{ _("Save the changes and close the window.") }}</li>
		<li>{{ _("Connect your hardware wallet to your computer and test if Specter manage to reach it") }}
		<button class="button mt-8" type="button" onclick="testHWIConnection()">{{ _("Test connection") }}</button></li>
	</ol>

	<script>
		async function testHWIConnection() {
			if (await enumerate()) {
				showNotification(`{{ _("Device detected successfully! USB connections configured correctly!") }}`);
			} else {
				showError(`{{ _("Failed to detect devices") }}`);
			}
		}
		function switchHWIBridgeConfView(viewType) {
			document.getElementById('remote-warning').classList.remove('hidden')
			let bridgeUrl = document.getElementById('hwi_bridge_url')
			if (viewType == 'custom') {
				bridgeUrl.value = '{{ specter.hwi_bridge_url }}';
			} else if (viewType == 'remote') {
				bridgeUrl.value = 'http://127.0.0.1:25441/hwi/api';
			} else {
				document.getElementById('remote-warning').classList.add('hidden')
				bridgeUrl.value = '/hwi/api';
			}
		}
	</script>
{% endblock %}
