{% extends "base.jinja" %}

{% block main %}
	<form class="flex flex-col" id="keysform" action="./" method="POST" onsubmit="showPacman()">

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

		<h1>{{ _("Configure your Wallet") }}</h1>

		<h3 class="mt-8">Information</h3>
		<div class="floating-wrapper">
			<input type="text" pattern="^[^']+" title="Choose a unique name. Capitalization, spaces, and hyphens will not affect uniqueness. Don't use single quotes." id="wallet_name" name="wallet_name" class="peer floating-input" value="{{ wallet_name }}" placeholder=" " required>
			<label class="floating-label">Wallet Name</label>
		</div>

		<h3 class="mt-8">Configuration</h3>
		{% set enable_taproot = (wallet_type == 'simple' and specter.taproot_support and cosigners[0].taproot_support) %}
		<div class="grid grid-cols-3 gap-3">
			<label for="bordered-radio-2" class="checkbox-wrapper">
					<input 
						type="radio" 
						name="type" 
						id="bordered-radio-2" 
						class="type_nested_segwit checkbox-input peer"
						value="{{'wsh' if wallet_type == 'multisig' else 'wpkh'}}" 
						onchange="updateType(this.value);" 
						checked 
					>
					<span class="checkbox-label">Segwit</span>
			</label>
			<label for="bordered-radio-1" class="checkbox-wrapper">
					<input 
						type="radio" 
						name="type" 
						id="bordered-radio-1" 
						class="checkbox-input peer"
						value="{{'sh-wsh' if wallet_type == 'multisig' else 'sh-wpkh'}}" 
						onchange="updateType(this.value);" 
					>
					<span class="checkbox-label">Nested Segwit</span>
			</label>
			<label for="bordered-radio-3" class="checkbox-wrapper">
					<input 
						type="radio" 
						name="type" 
						id="bordered-radio-3" 
						class="checkbox-input peer"
						{% if not enable_taproot %}disabled{% endif %}
						value="tr" 
						onchange="updateType(this.value);" 
					>
					<span class="checkbox-label">Taproot</span>
			</label>
		</div>

		<div class="flex p-4 mt-3 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>
				<span class="font-medium">Info: </span> 
				<b>{{ _("Segwit")}}</b>{{ _(" uses bech32-encoded addresses (bc1), ")}}<b>{{ _("Nested Segwit")}}</b>{{ _(" makes it compatible with legacy software. Don't use legacy.")}}
			</div>
		</div>

		{% if wallet_type == 'multisig' %}
			<div class="floating-wrapper mt-3">
				<input class="floating-input peer" placeholder=" " type="number" name="sigs_required" min=1 max="{{ cosigners | length }}" step=1 value="{{ sigs_required }}" data-cy="number-of-required-signatures-in-multisig"/>
				<label class="floating-label">Required Signatures to Authorize Transactions (m of {{ cosigners | length }})<span>
			</div>
		{% endif %}

		<div class="space-y-3 mt-3">
			<label for="rescan" class="checkbox-wrapper-inline inline-flex pr-8">
				<input form="keysform" type="checkbox" name="rescanblockchain" id="rescan" class="checkbox-input peer" onchange="toggleScanOptions(this)">
				<span class="checkbox-label">{{ _("Scan for existing funds") }}</span>
				<tool-tip width="200px" class="absolute right-0 top-0">
						<span slot="paragraph">
						{{ _("Check this option if the wallet has past transactions. The blockchain will be scanned for them, and the wallet balance will be calculated.") }}      
						</span>
				</tool-tip>
			</label>

			<div id="scan-options" class="hidden space-y-3">
				<h3 class="mt-8">Scan Options</h3>
				<div class="grid grid-cols-2 gap-3">
					<label for="full_rescan_option_full" class="checkbox-wrapper">
						<input 
							type="radio" 
							name="full_rescan_option" 
			 				id="full_rescan_option_full"
							class="checkbox-input peer" 
							value="full" 
							onclick="toggleFullRescanOption(this)" 
							checked
						>
						<span class="checkbox-label">{{ _("Full scan") }}</span>
						<tool-tip width="200px" class="floating-info">
							<span slot="paragraph">
								{{ _("Full scan is a slow process which searches for and imports the full wallet transaction history and balance.") }}<br>
							</span>
						</tool-tip>
					</label>
					<label for="full_rescan_option_utxo" class="checkbox-wrapper">
						<input 
							type="radio" 
							name="full_rescan_option" 
			 				id="full_rescan_option_utxo"
							class="checkbox-input peer" 
							value="utxo" 
							onclick="toggleFullRescanOption(this);"
						>
						<span class="checkbox-label">{{ _("Scan for UTXOs only") }}</span>
						<tool-tip width="200px" class="floating-info">
							<span slot="paragraph">
								{{ _("UTXO only is fast and looks only for existing balances (UTXO) and will not import the full transaction history.") }}
							</span>
						</tool-tip>
					</label>
				</div>

				<div id="full-scan-options">
					{% if specter.info.chain == "main" %}
						{% set startblock=(481824 if not specter.info['pruned'] or specter.info['pruneheight'] < 481824 else specter.info['pruneheight']) %}
					{% else %}
						{% set startblock=(0 if not specter.info['pruned'] else specter.info['pruneheight']) %}
					{% endif %}

					<div class="floating-wrapper">
						<input class="floating-input peer" placeholder=" " type="number" name="startblock" value="{{startblock}}" min="{{startblock}}">
						<label for="startblock" class="floating-label">Scan Blockchain From Block #</label>
						<tool-tip width="200px" class="floating-info">
							<span slot="paragraph">
								{{ _("In case you're not sure, it is best to just leave the default number.")}}<br><b>481824</b>{{ _(" was the first Segwit block.")}}
							</span>
						</tool-tip>
					</div>

					{% if specter.info['pruned']  %}
						<div 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>
								<span class="font-medium">Info: </span> 
								{{ _("You are using a pruned node. ")}}{{ _("Wallet history may not fully appear. ")}}{{ _("Scan is limited by the pruned height to block:") }} {{specter.info['pruneheight']}}
							</div>
						</div>
					{% endif %}
				</div>

				<div id="utxo-scan-options" class="hidden">
					{% if specter.info['pruned']  %}
						<div class="grid grid-cols-2 gap-3">
							<label for="use_explorer" class="checkbox-wrapper">
								<input class="checkbox-input peer" type="checkbox" id="use_explorer" name="use_explorer" checked>
								<span class="checkbox-label">{{ _("Fetch missing data") }}</span>
								<tool-tip width="200px" class="floating-info">
									<span slot="paragraph">
										{{ _("This may have privacy implications. ") }} {{ _("Information fetched from the block explorer contains a list of unspent transactions of your wallet from old (pruned) blocks. ") }} {{ _('"They" will know what transactions you are interested in. ') }}
									</span>
								</tool-tip>
							</label>

							<div id="utxo-explorer">
								{% include "components/explorer_select.jinja" %}
							</div>
						</div>
					{% endif %}
				</div>

			</div>
		</div>
		

		{% for cosigner in cosigners %}
			<input type="hidden" name="cosigner{{ loop.index0 }}" value="{{ cosigner.alias }}"/>
		{% endfor %}

		<input type="hidden" name="sigs_total" value="{{ cosigners | length }}">

		{% for device in cosigners %}
			<h3 class="mt-10">{{ _("Signer") }} {{ loop.index }} - {{ device.name }}</h3>
			{% set outer_loop = loop %}
			{% if device.keys | length > 0 %}
				<div class="table-holder mt-1 mb-2">
					<table>
						<thead>
							<tr>
								<th>{{ _("Network") }}</th>
								<th>{{ _("Purpose") }}</th>
								<th class="optional">{{ _("Derivation") }}</th>
								<th class="optional table-key">{{ _("Key") }}</th>
								<th>{{ _("Actions") }}</th>
							</tr>
						</thead>
						<tbody id="device{{ loop.index0 }}">
							{% for key in device.keys if key.is_testnet == specter.is_testnet %}
								<tr>
									<td>
										{% include "components/network_label.jinja" %}
									</td>
									<td>{{ key.purpose }}</td>
									<td class="optional">{{ key.derivation }}</td>
									<td class="scroll xpub optional"><div class="table-key">{{ key.original }}</div></td>
									<td>
										<label class="cursor-pointer">
											<input class="device-key peer checkbox-input" hidden data-key-types="{{key.key_type}}" type="radio" name="key{{ outer_loop.index0 }}" value="{{ key.original }}" {% if loop.index == 1 %}checked{% endif %}/>
											<div class="btn w-full whitespace-nowrap text-center bg-accent hover:border-dark-800 hidden peer-checked:block">{{ _("Selected") }}</div>
											<div class="btn w-full whitespace-nowrap text-center bg-dark-600 nowrap block peer-checked:hidden">{{ _("Use this key") }}</div>
										</label>
									</td>
								</tr>
							{% endfor %}
							<tr class="hidden">
								<td>
								{{ _("The device does not have keys matching the wallet type selected.") }}
								</td>
								<td>
								{{ _("Please choose a different type or add the keys to the device...") }}
								</td>
								<td>
								</td>
								<td>
								</td>
								<td>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			{% else %}
				<div class="center">{{ _("Looks like this device doesn't have keys matching this type of wallet.") }}</div>
			{% endif %}			
			<div class="spacer"></div>
		{% endfor %}

		<button type="submit" name="action" value="key" class="button text-white bg-accent self-end mt-8" data-cy="create-wallet-btn">{{ _("Create wallet") }}</button>
	</form>
{% endblock %}

{% block scripts %}
	<script>
		function updateType(val){
			let keys = document.getElementsByClassName('device-key');
			let allDevices = [];
			let devicesWithExistingKeys = [];
			for (let i = keys.length - 1; i >= 0; i--) {
				let key = keys[i];
				let type = key.getAttribute('data-key-types');
				key.disabled = !(type == "" || type == val);
				allDevices.push(key.parentNode.parentNode.parentNode.parentNode.id)
				if(key.disabled){
					key.checked = false;
					key.parentNode.parentNode.parentNode.classList.add('hidden');
				} else {
					key.checked = true;
					key.parentNode.parentNode.parentNode.classList.remove('hidden');
					devicesWithExistingKeys.push(key.parentNode.parentNode.parentNode.parentNode.id)
				}
			}

			for (let device of allDevices) {
				let deviceHTML = document.getElementById(device)
				if (devicesWithExistingKeys.indexOf(device) == -1) {
					deviceHTML.children[deviceHTML.children.length - 1].classList.remove('hidden')
				} else {
					deviceHTML.children[deviceHTML.children.length - 1].classList.add('hidden')
				}
			}
		}
		// initial trigger
		let els = document.getElementsByName("type");
		els.forEach(el=>{
			if (el.checked){
				updateType(el.value);
			}
		})
		function toggleScanOptions(scanCheckbox) {
			let scanOptions = document.getElementById('scan-options');
			if (scanCheckbox.checked) {
				scanOptions.style.display = 'block';
			} else {
				scanOptions.style.display = 'none';
			}
		}

		function toggleFullRescanOption(scanOption) {
			let scanOptions = document.getElementById('full-scan-options');
			let utxoOptions = document.getElementById('utxo-scan-options');
			if (scanOption.value == 'full') {
				scanOptions.style.display = 'block';
				utxoOptions.style.display = 'none';
			} else {
				scanOptions.style.display = 'none';
				utxoOptions.style.display = 'block';
			}
		}
		let utxocheckbox = document.getElementById("use_explorer");
		if(utxocheckbox){
			utxocheckbox.addEventListener('change', e=>{
				let el = document.getElementById("utxo-explorer")
				if(utxocheckbox.checked){
					el.style.display = "inline-block";
				}else{
					el.style.display = "none";
				}
			});
		}
	</script>
{% endblock%}
