<script type="text/javascript">
  $(document).ready(function () {
    M.Modal.init(document.querySelector("#monero_modal"), {
      onOpenStart: () => loadMoneroInfo("8BtRhV9vUNkTDST7WEWuH7JumpvrFApVag5D2fVTLgfdJH8sjiy5LQo68WK4GaLBijTYb7XW6D6bChQGkDeDMmfTTTZGNTr"),
    });
    M.Modal.init(document.querySelector("#bitcoin_modal"), {
      onOpenStart: () => loadBitcoinInfo("bc1qystpwsqqwusam38mhwafh8n4yln798zqprsl93"),
    });
    M.Modal.init(document.querySelector("#ethereum_modal"), {
      onOpenStart: () => loadEthereumInfo("0xfa455Bdd245F67Dd1D549C2Ac67EA6BBf91402a7"),
    });
  });

  async function loadMoneroInfo(address) {
    $('#monero-qr').html('');
    $('#monero-qr').qrcode(address);
    let uri = "monero:" + address; 
    let uriElement = document.getElementById("monero-uri");
    uriElement.innerHTML = address;
    uriElement.href = uri;
    
    document.getElementById("monero-uri-copy").onclick = function() {
      navigator.clipboard.writeText(uri);
      toast("Copied Monero URI to clipboard");
    }
    document.getElementById("monero-address-copy").onclick = function() {
      navigator.clipboard.writeText(address);
      toast("Copied Monero address to clipboard");
    }
  }

  async function loadBitcoinInfo(address) {
    $('#bitcoin-qr').html('');
    $('#bitcoin-qr').qrcode(address);
    let uri = "bitcoin:" + address; 
    let uriElement = document.getElementById("bitcoin-uri");
    uriElement.innerHTML = address;
    uriElement.href = uri;
    
    document.getElementById("bitcoin-uri-copy").onclick = function() {
      navigator.clipboard.writeText(uri);
      toast("Copied Bitcoin URI to clipboard");
    }
    document.getElementById("bitcoin-address-copy").onclick = function() {
      navigator.clipboard.writeText(address);
      toast("Copied Bitcoin address to clipboard");
    }
  }

  async function loadEthereumInfo(address) {
    $('#ethereum-qr').html('');
    $('#ethereum-qr').qrcode(address);
    let uri = "ethereum:" + address; 
    let uriElement = document.getElementById("ethereum-uri");
    uriElement.innerHTML = address;
    uriElement.href = uri;
    
    document.getElementById("ethereum-uri-copy").onclick = function() {
      navigator.clipboard.writeText(uri);
      toast("Copied Ethereum URI to clipboard");
    }
    document.getElementById("ethereum-address-copy").onclick = function() {
      navigator.clipboard.writeText(address);
      toast("Copied Ethereum address to clipboard");
    }
  }
</script>
<div id="monero_modal" class="modal modal-fixed-footer">
  <div class="modal-content">
    <h4><img class="title-logo" src="static/{{ version }}/images/monero-logo.svg"/>Contribute with Monero/XMR</h4>
    <p>
      Use the QR code or link below to get the wallet address used for contributions.  Thank you for your generosity, and use cryptocurrency responsibly! 
    </p>
    <p>
      <a id="monero-uri"></a>
      <br>
      <br>
      <a class="btn-flat" id="monero-uri-copy"><i class="material-icons">content_copy</i> Copy Monero URI</a>
      <a class="btn-flat" id="monero-address-copy"><i class="material-icons">content_copy</i>Copy Monero Address</a>
    </p>
    <p>
      <span> QR Code: </span>
      <div class="qr-code" id="monero-qr"></div>
    </p>
    <p>Visit <a href="https://www.getmonero.org/" target="_blank" rel="noreferrer">https://www.getmonero.org/</a> to learn more.</p>
  </div>
  <div class="modal-footer">  
    <a href="#!" class="modal-close btn-flat"><i class="material-icons">close</i>Close</a>
  </div>
</div>

<div id="bitcoin_modal" class="modal modal-fixed-footer">
  <div class="modal-content">
    <h4><img class="title-logo" src="static/{{ version }}/images/bitcoin-logo.svg"/>Contribute with Bitcoin/BTC</h4>
    <p>
      Use the QR code or link below to get the wallet address used for contributions.  Thank you for your generosity, and use cryptocurrency responsibly! 
    </p>
    <p>
      <a id="bitcoin-uri"></a>
      <br>
      <br>
      <a class="btn-flat" id="bitcoin-uri-copy"><i class="material-icons">content_copy</i> Copy Bitcoin URI</a>
      <a class="btn-flat" id="bitcoin-address-copy"><i class="material-icons">content_copy</i>Copy Bitcoin Address</a>
    </p>
    <p>
      <span> QR Code: </span>
      <div class="qr-code" id="bitcoin-qr"></div>
    </p>
    <p>Visit <a href="https://bitcoin.org" target="_blank" rel="noreferrer">https://bitcoin.org</a> to learn more.</p>
  </div>
  <div class="modal-footer">  
    <a href="#!" class="modal-close btn-flat"><i class="material-icons">close</i>Close</a>
  </div>
</div>

<div id="ethereum_modal" class="modal modal-fixed-footer">
  <div class="modal-content">
    <h4><img class="title-logo" src="static/{{ version }}/images/ethereum-logo.svg"/>Contribute with Ethereum/ETH</h4>
    <p>
      Use the QR code or link below to get the wallet address used for contributions.  Thank you for your generosity, and use cryptocurrency responsibly! 
    </p>
    <p>
      <a id="ethereum-uri"></a>
      <br>
      <br>
      <a class="btn-flat" id="ethereum-uri-copy"><i class="material-icons">content_copy</i> Copy Ethereum URI</a>
      <a class="btn-flat" id="ethereum-address-copy"><i class="material-icons">content_copy</i>Copy Ethereum Address</a>
    </p>
    <p>
      <span> QR Code: </span>
      <div class="qr-code" id="ethereum-qr"></div>
    </p>
    <p>Visit <a href="https://ethereum.org" target="_blank" rel="noreferrer">https://ethereum.org</a> to learn more.</p>
  </div>
  <div class="modal-footer">  
    <a href="#!" class="modal-close btn-flat"><i class="material-icons">close</i>Close</a>
  </div>
</div>
