{% extends "base.jinja" %}
{% block main %}
	<style>
		.radio-btn:hover {
			background: var(--cmap-bg-lighter);
			cursor: pointer;
		}
	</style>
	{% include "includes/hwi/hwi.jinja" %}
	<h1 id="title" class="settings-title">{{ _("Settings") }}</h1>
	{% from 'settings/components/settings_menu.jinja' import settings_menu %}
	{{ settings_menu('hwi', current_user) }}
	<br>
	<h1>{{ _("Hardware Devices Bridge") }}</h1>
	<p class="note center">{{ _("Allows Specter to communicate with your hardware devices over USB.") }}</p>
	<br>
	<label class="card radio-btn" style="padding: 20px 10px 5px;">
		<div class="row">
			<input type="radio" name="hwibridge" value="local" style="width: 20px; min-width: 20px; margin-top: 20px;" onchange="switchHWIBridgeConfView(this.value)" {% if specter.hwi_bridge_url == '/hwi/api/'%} checked {% endif %}/>
			<h2 style="text-align: left; margin-left: 10px;">{{ _("Local USB connection") }}</h2>
		</div>
		<p class="note" style="text-align: left; margin-left: 38px;margin-top: 0px;">{{ _("Select this if Specter is installed on this computer") }}</p>
	</label>
	<br>
	<label class="card radio-btn" style="padding: 20px 10px 5px;">
		<div class="row">
			<input type="radio" name="hwibridge" value="remote" 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/' %} checked {% endif %}/>
			<h2 style="text-align: left; margin-left: 10px;">{{ _("Remote Specter USB connection") }}</h2>
		</div>
		<p class="note" style="text-align: left; margin-left: 38px;margin-top: 0px;">{{ _("Select this if Specter is installed on a different machine") }}</p>
	</label>
	<br>
	<label class="card radio-btn" style="padding: 20px 10px 5px;">
		<div class="row">
			<input type="radio" id="custom_hwibridge" name="hwibridge" value="custom" 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 %}/>
			<h2 style="text-align: left; margin-left: 10px;">Custom URL</h2>
		</div>
		<p class="note" style="text-align: left; margin-left: 38px;margin-top: 0px;">{{ _("Select this if you would like to configure manually (experts only)") }}</p>
		<div style="margin: 20px;">
			<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>
	<style>
		ol,li {
			margin: 0;
			padding: 0;
		}

		ol {
			counter-reset: counter;
			display: table;
		}

		li {
			list-style: none;
			counter-increment: counter;
			display: table-row;
		}

		li::before {
			content: counter(counter) ".";
			display: table-cell;
			text-align: right;
			padding-right: .3em;
		}
	</style>
	<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 }}"/>
	<br>
	<div class="hidden" id="remote-warning">
		<div class="card" style="padding: 5px 10px 15px;">
			<div class="row">
				<img src="{{ url_for('static', filename='img/warning_sign.svg') }}" style="width: 20px;"/>
				<p style="color: #FF9A00; font-size: 1.1em; margin-left: 10px;">{{ _("Before changing these settings") }}:</p>
			</div>
			<p style="margin-left: 30px; margin-top: -10px;">{{ _('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.') }}</p>
			<img src="{{ url_for('static', filename='img/preferences_tab_screenshot.png')}}" width="400px;" style="margin: auto; border: 0px solid #000; display: block;"/>
		</div>
		<br>
	</div>
	<br>
	<button type="submit" class="btn" value="update_hwi" style="width: 580px;">{{ _("Save Changes") }}</button>
	</form>
	<br>
	<p style="text-align: left; width: 580px;">{{ _("You might also need to allow Specter to communicate with the device bridge.") }}<br></p>
	<ol style="text-align: left; width: 580px;line-height:2;">
		<li>{{ _("Access the device bridge settings.") }} <a href='{{specter.hwi_bridge_url.replace("/hwi/api", "/hwi/settings")}}' target="_blank" style="color: #fff;">Click here</a>.</li>
		<li>{{ _("Add the domain") }} {{ url_for('index', _external=True) }} <span style="text-decoration: underline; cursor: pointer;" 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") }}<br><button class="btn" type="button" style="display: inline; width: 140px; margin-top:5px;" onclick="testHWIConnection()">{{ _("Test connection") }}</button></li>
	</ol>

	<div style="height: 100%"></div>
	<br>
	<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 %}
