{% extends "wallet/components/wallet_tab.jinja" %}
{% set tab = 'send' %}

{% block content %}
	{% include "includes/qr-scanner.html" %}
	{% include "includes/file-uploader.html" %}
	{% include "includes/dnd-textarea.html" %}
	{% from 'wallet/send/components/send_nav.jinja' import send_nav %}
	
	{{ send_nav('import_psbt', wallet_alias) }}
		<h3>{{ _("Import transaction") }}</h3>
		<p>{{ _("PSBT (base64) or serialized transaction (hex)") }}</p>

		<form action="{{ url_for('wallets_endpoint.import_psbt',wallet_alias=wallet_alias) }}" method="POST">
			<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
			<div class="flex flex-col">
				<dnd-textarea class="mt-3" name="rawpsbt" id="rawpsbt" placeholder="{{ _('You can paste a PSBT or transaction and drag & drop a file here.') }}"></dnd-textarea>
				<div class="flex space-x-3 mt-1">
					<qr-scanner id="psbt-scan" class="button">
						<a slot="button" href="#" class="flex items-center justify-center">
							<img src="{{ url_for('static', filename='img/qr-code.svg') }}" >
							{{ _("Scan QR Code") }}
							<tool-tip width="150px">
								<h4 slot="title">{{ _('Using an airgapped device with QR codes') }}</h4>
								<span slot="paragraph">{{ _('PSBT should be base64 encoded, raw transaction can be signed or unsigned and should be in hex.') }}
								</span>
							</tool-tip>
						</a>
					</qr-scanner>

					<file-uploader id="psbt-uploader" class="button justify-center" image_src="{{ url_for('static', filename='img/file.svg') }}">
						<span slot="description">Choose file</span>
						<tool-tip width="150px" slot="tool-tip"> 
							<h4 slot="title">{{ _('Using a file') }}</h4>
							<span slot="paragraph">{{ _("PSBT can be base64 or binary encoded, raw transaction can be signed or unsigned and should be in hex.") }}</span>
						</tool-tip>
					</file-uploader>
				</div>
				<button type="submit" name="action" value="importpsbt" class="self-end button bg-accent text-white">{{ _("Import transaction") }}</button>
			</div>
		</form>
{% endblock %}

{% block scripts %}
<script type="text/javascript">
	let textarea = document.getElementById("rawpsbt");
	document.addEventListener('file-upload', e => {
		let result = e.detail.result;
		textarea.value = result;
	});

	let scanner = document.getElementById('psbt-scan');
	if(scanner != null) {
		scanner.addEventListener('scan', e=>{
			let result = e.detail.result;
			if(result==null){
				return;
			}
			document.getElementById("rawpsbt").value = result;
		});
	}
</script>
{% endblock %}
