{% extends "layout.html" %}
{% block content %}
  <div class="cryptocurrency">
    <div class="payment-other-div container">
      <a class="hyperlinks links" href="https://donate.torproject.org/">{{ _('Want to donate by credit card or PayPal?') }}</a>
    </div>
    <div class="intro-text-section container">
      {{ this.body }}
    </div>
    <noscript>
      <form action="/cryptocurrency/donate" method="POST">
        <div class="section">
          <div class="form-column">
            <h4>{{ _('Your Info') }}</h4>
            <div class="form-fields">
              <input class="field" name="firstName" placeholder="{{ _('First Name') }}" maxlength="256" type="text">
              <input class="field" name="lastName" placeholder="{{ _('Last Name') }}" maxlength="256" type="text">
              <div class="mailing-list-opt-in checkbox-row">
                <input name="mailingListOptIn" id="mailingListOptIn" type="checkbox">
                <label class="light" for="mailingListOptIn">{{ _('Start sending me email updates about the Tor Project!') }}</label>
              </div>
              <label for="estimatedDonationDate">{{ _('Estimated Donation Date:') }}</label>
              <input name="estimatedDonationDate" id="estimatedDonationDate" type="date" required="">
              <input class="field" name="email" placeholder="{{ _('Email') }}" maxlength="256" type="text" required="">
              <select class="field required" name="cryptocurrencyType" required="">
                <option value="">{{ _('Choose a Currency') }}</option>
                {% for wallet in wallets %}
                  <option value="{{ wallet.symbol }}">{{ wallet.name }}</option>
                {% endfor %}

              <input class="field" name="currencyAmount" placeholder="{{ _('Currency Amount') }}" maxlength="256" type="text" required="">
            </div>
            <br/>
            <div class="section button-section">
              <input class="donate button" type="submit" value="{{ _('Report Donation') }}">
            </div>
          </div>
          <div class="wallet-column">
            <h4>{{ _('Wallet Addresses') }}</h4>
            <ul>
              {% for wallet in wallets %}
                <li>
                  <div class="currency-name">{{ wallet.name }} ({{ wallet.symbol }})</div>
                  <input class="wallet-id" type="text" readonly="" value="{{ wallet.id }}">
                </li>
              {% endfor %}
            </ul>
          </div>
        </div>
      </form>
    </noscript>
    <div id="cryptocurrency-form" class="container"></div>
    <div class="js-translatable-strings" style="display: none;">
      <div id="t-copied">{{ _('Copied') }}</div>
      <div id="t-currency-amount-must-be-number">{{ _('Currency Amount must be a number.') }}</div>
      <div id="t-choose-currency">{{ _('Choose a Currency') }}</div>
      <div id="t-currency-amount">{{ _('Currency Amount') }}</div> <div id="t-estimated-donation-date">{{ _('Estimated Donation Date') }}</div>
      <div id="t-donate-anonymously">{{ _("I'd like to make my donation anonymous.") }}</div>
      <div id="t-email">{{ _('Email') }}</div>
      <div id="t-first-name">{{ _('First Name') }}</div>
      <div id="t-last-name">{{ _('Last Name') }}</div>
      <div id="t-report-donation">{{ _('Report Donation') }}</div>
      <div id="t-start-email-updates">{{ _('Start sending me email updates about the Tor Project!') }}</div>
      <div id="t-wallet-addresses">{{ _('Wallet Addresses') }}</div>
      <div id="t-your-info">{{ _('Your Info') }}</div>
    </div>
  </div>
  <script type="text/javascript">
    const cryptoReactComponent = {
      id: 'cryptocurrency-form',
      name: 'CryptocurrencyForm',
      props: {
        'wallets': [
          {
            'symbol': 'XBT',
            'id': 'bc1qtt04zfgjxg7lpqhk9vk8hnmnwf88ucwww5arsd',
            'name': 'Bitcoin',
          },
          {
            'symbol': 'BCH',
            'id': 'bitcoincash:qrtyy8w9yv6ffqtny9gp56m8kztl3nwwzcqyzsv32k',
            'name': 'Bitcoin Cash',
          },
          {
            'symbol': 'DASH',
            'id': 'XvF8mUwzKummA72GnkFojyeBuGByaG26mB',
            'name': 'Dash',
          },
          {
            'symbol': 'DOGE',
            'id': 'DJwRnafcjDbzqWM5vsCphuyQuTc2QB3a8F',
            'name': 'Dogecoin',
          },
          {
            'symbol': 'ETH',
            'id': '0x532Fb5D00f40ced99B16d1E295C77Cda2Eb1BB4F',
            'name': 'Ether',
          },
          {
            'symbol': 'LTC',
            'id': 'MTQBNhAP58vpWKsns4ZFUDoh5NK7XECVrs',
            'name': 'Litecoin',
          },
          {
            'symbol': 'XMR',
            'id': '4AcQxuMBUfJM7uAWpZP1Vs1BzQLC1QR6zZL3sMYdBuayWmpZHmaVYo7EQ3cSneyHYf2LRKJnRtrGz5ogZzjmmGygAyusEcJ',
            'name': 'Monero',
          },
          {
            'symbol': 'XLM',
            'id': 'GABWGQEQESRX5TKDTPIYJFPKGJDMEW6VLOOLBTIFPJIN7XT6KAFXJQPJ',
            'name': 'Stellar Lumen',
          },
          {
            'symbol': 'ZEC',
            'id': 't1NnsSG46uPPPMr3D3MdBCKrMpr9XXis8sz',
            'name': 'Zcash'
          }
          ],
        'donateProccessorFallbackUrl': `{{ bag('donate', envvars('ENV'), 'donateProccessorBaseUrl') }}`,
      }
    };
    if (window.reactComponents) {
      window.reactComponents.push(cryptoReactComponent);
    } else {
      window.reactComponents = [cryptoReactComponent];
    }
  </script>
  <script type="text/javascript" src="{{ "/static/gen/donate.js" | asseturl }}"></script>
{% endblock %}