<div id="account_map_export" class="bg-dark-800 p-4 rounded-lg hidden">

    <h3>Export Wallet</h3>
    <p class="mb-3">Scan this with your wallet software</p>
    <qr-code value='{{ wallet.account_map }}' width="400"></qr-code>

    <h3 class="mt-10">Wallet JSON Data</h3>
    <textarea id="account_map" class="max-w-[700px] mb-3">{{ wallet.account_map }}</textarea>
    <div class="grid grid-cols-2 gap-3">
        <button onclick="copyText(document.getElementById('account_map').innerText, 'Copied wallet data')" type="button" class="w-full button">Copy Wallet Data</button>
        <a download="{{ wallet.name }}.json" class="button w-full" id="export_wallet_file">Save Wallet File</a>
    </div>

    <h3 class="mt-8">Create Electrum Wallet</h3>
    <p>If electrum supports your device, you'll get a regular wallet in electrum, otherwise a watch-only-wallet.</p>
    <a
      id="electrum_export"
      download="{{ wallet.alias | ascii20 }}_electrum.backup"
      onclick="showNotification(`Import wallet file to your Electrum: File -> Open -> Choose... -> {{ wallet.alias | ascii20 }}_electrum.backup`, 0)"
      class="button mt-3"
      >
	    Download Electrum File
    </a>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function(){
        let accountMap = encodeURIComponent(`{{ wallet.account_map|tojson }}`)
        document.getElementById('export_wallet_file').href = "data:text/json;charset=utf-8," + accountMap.substring(3, accountMap.length - 3);
    });
    document.addEventListener("DOMContentLoaded", function(){
        document.getElementById('electrum_export').href = 'data:text/plain,' + encodeURIComponent('{{ wallet.get_electrum_file()|tojson }}');
    });
</script>
