{% extends "base.jinja" %}
{% block main %}
	<form id="keysform" action="./" method="POST" onsubmit="showPacman()" class="table-holder">
		<div class="spacer"></div>
		{% if cosigners | length == 1 %}
			<h1>Select the {{ cosigners[0].name }}'s key to use in {{ wallet_name }}.</h1>
		{% else %}
			<h1>Select the key of devices to use in {{ wallet_name }}.</h1>
		{% endif %}
		<div class="center" style="max-width: 500px; margin: auto;">
			<div style="display: inline-block; text-align: center; margin-top: 10px;">
				<input form="keysform" type="checkbox" name="rescanblockchain" id="rescan" class="inline" onchange="toggleScanOptions(this)">
				<label for="rescan">Scan for existing funds?</label>
				<div class="tool-tip">
					<i class="tool-tip__icon">i</i>
					<p class="tool-tip__info">
						<span class="info">
							<span class="info__title">Importing an existing wallet<br></span>
							Check this option to scan the blockchain for existing wallet balance and history.
						</span>
					</p>
				</div>
			</div>
			<div id="scan-options" class="hidden">
				<br>
				<div>
					Rescan type: 
					<label><input type="radio" class="inline" style="margin: 0 10px 0 20px;" name="full_rescan_option" value="full" onclick="toggleFullRescanOption(this)" checked>Full rescan</label>
					<label><input type="radio" class="inline" style="margin: 0 10px 0 20px" name="full_rescan_option" value="utxo" onclick="toggleFullRescanOption(this);">UTXO only</label>
					<div class="tool-tip">
						<i class="tool-tip__icon">i</i>
						<p class="tool-tip__info">
							<span class="info">
								<span class="info__title">Choosing Rescan Type<br></span>
								Full rescan is a relativly slow process which looks for and imports the full wallet transaction history and balance.<br><br>
								UTXO only is a fast rescan option which only looks for existing balances (UTXO), but will not import the full transaction history.
							</span>
						</p>
					</div>
				</div>
				<br>
				<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 %}
					Rescan blockchain from block: <input type="number" name="startblock" value="{{startblock}}" min="{{startblock}}" style="max-width: 150px; margin-left: 5px;">
					{% if specter.info['pruned']  %}
						<span class="warning" style="display: inline-block; max-width:300px;">
							&#9432;<br>You are using a pruned node.<br>Wallet history may not fully appear.<br>Rescan is limited by the pruned height to block: {{specter.info['pruneheight']}}
						</span>
					{% endif %}
					<div class="note center" style="margin-top: 5px; line-height: 2;">In case you're not sure, it is best to just leave the default number.<br><b>481824</b> was the first Segwit block.</div>
					<br>
				</div>
				<div id="utxo-scan-options" style="display: none">
					{% if specter.info['pruned']  %}
						<label for="use_explorer"><input style="width: auto; min-width: auto;" type="checkbox" id="use_explorer" name="use_explorer" checked> fetch missing data from block explorer
							<div class="tool-tip">
								<i class="tool-tip__icon">i</i>
								<p class="tool-tip__info">
									<span class="info">
										<span class="info__title">Fetch missing data</span><br><br>
										You are using a pruned node. Blocks for some transactions may be missing.<br><br>
										Check this checkbox if you want to fetch missing information from block explorer.
									</span>
								</p>
							</div>
						</label>
						<span class="warning" id="utxo-warning" style="display: inline-block; max-width:300px;">
							&#9432;<br>Careful with block explorers!<br>
							This may have privacy implication!<br>
							Information fetched from the block explorer contains a list of unspent transactions of your wallet from the old (pruned) blocks.<br>
							"They" will know what transactions you are interested in.
						</span>
					{% endif %}
				</div>
			</div>
		</div>
		<div class="spacer"></div>
		<input type="hidden" name="wallet_name" value="{{ wallet_name }}">
		<input type="hidden" name="type" value="{{ wallet_type }}">
		{% for cosigner in cosigners %}
			<input type="hidden" name="cosigner{{ loop.index0 }}" value="{{ cosigner.alias }}"/>
		{% endfor %}
		<input type="hidden" name="sigs_required" value="{{ sigs_required }}">
		<input type="hidden" name="sigs_total" value="{{ sigs_total }}">
		{% for device in cosigners %}
			<h1>Signer {{ loop.index }} - {{ device.name }}</h1>
			{% set outer_loop = loop %}
			{% if device.keys | length > 0 %}
				<div class="table-holder">
					<table>
						<thead>
							<tr>
								<th>Network</th>
								<th>Purpose</th>
								<th class="optional">Derivation</th>
								<th class="optional">Key</th>
								<th>Actions</th>
							</tr>
						</thead>
						<tbody>
							{% for key in device.keys %}
								<tr>
									<td>
										{% from "components/bitcoin_svg.jinja" import bitcoin_svg %}
										{% if key.xpub.startswith("xpub") %}
											{{ bitcoin_svg('main', 16) }} Main
										{% else %}
											{{ bitcoin_svg('test', 16) }} Test
										{% endif %}
									</td>
									<td>{{ purposes[key.key_type] }}</td>
									<td class="optional">{{ key.derivation }}</td>
									<td class="scroll xpub optional"><span>{{ key.original }}</span></td>
									<td width="120px">
										<label>
											<input type="radio" name="key{{ outer_loop.index0 }}" value="{{ key.original }}" class="hidden" {% if loop.index == 1 %}checked{% endif %}/>
											<div class="btn inline hovering">Use this key</div>
										</label>
									</td>
								</tr>
							{% endfor %}
						</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="btn centered action">Create wallet</button>
	</form>

	<div class="spacer"></div>
	<div class="note">
		<center>Here we only show <b>{{ purposes[wallet_type] }}</b> and <b>General</b> keys. Follow the standards.</center>
	</div>
{% endblock %}
{% block scripts %}
	<script>
		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-warning")
				if(utxocheckbox.checked){
					el.style.display = "inline-block";
				}else{
					el.style.display = "none";
				}
			});
		}
	</script>
{% endblock%}
