{% extends 'layout.html' %}

{% macro render_donation_amounts(pricesSingle, pricesMonthly) %}
  {% with error_msg="Please enter a valid donation." %}
      {% include "donation_amount_fields.html.jinja" %}
  {% endwith %}
{% endmacro %}

{% macro noscript_error() %}
  {% include 'noscript.html.jinja' %}
{% endmacro %}

{% block pageid %}crypto{% endblock pageid %}

{% block hero %}
  {% include 'hero.html' %}

  <div class="Card Subnav">
    <ul class="nav">
      {% with link=url('donate_form') %}
      <li class="nav-item">
        <a href="{{ link }}" class="nav-link">Donate online</a>
      </li>
      {% endwith %}

      <li class="nav-item">
        <a class="nav-link active" href="#">Donate crypto</a>
      </li>
      
      <li class="nav-item">
        <a class="nav-link" href="/faq/">
          Donation FAQ<span class="ps-2"><i class="ph ph-arrow-up-right align-text-bottom fs-4"></i></span>
        </a>
      </li>
    </ul>
  </div>
{% endblock hero %}

{% block body %}

  {{ noscript_error() }}

  <div class="Cards" id="cryptoContainer">

    <div class="Card bg-purple-10">
      <h4>Your donation</h4>
      {% csrf_token %}
      <h5 class="mb-3">Donate by</h5>
      <div class="sectionToggle btn-group mb-4">
        <span class="btn btn-outline-primary active" aria-current="page" data-toggles="#secCryptoAddresses"><i class="ph ph-radio-button"></i><i class="ph ph-circle"></i>Wallet address</span>
        <span class="btn btn-outline-primary" data-toggles="#secBTCPay"><i class="ph ph-radio-button"></i><i class="ph ph-circle"></i>BTCPay</span>
      </div>

      <section class="toggleable" id="secCryptoAddresses">
        {% include 'crypto-addresses.html.jinja' %}
      </section>
    {#% csrf_token %#}
      {#{ form|bootstrap }#}

      <section class="toggleable hidden" id="secBTCPay">
      <h5>Amount</h5>
      <p>Amounts are listed in $USD but charged in BTC through BTCPay. See our <a href="/faq/">Donor FAQ</a> for more details.</p>
        <form method="POST" id="cryptoBTCPay" action="{{ btcpayserver_url|trim('/') }}/api/v1/invoices" class="form-btcpay ">
          
          {{ render_donation_amounts(donate_single_prices, donate_monthly_prices) }}

          <input type="hidden" id="price" name="price" value="125" />
          <input type="hidden" name="storeId" value="95bAXzi9xpnvu6BqUm5Uyc8C1c1rPLYsQnsgdvMGp4sh" />
          <input type="hidden" name="currency" value="USD" />

          <button type="submit" id="btn-donateBTCPay" class="btn btn-primary w-100 mt-2">
            Donate <span>${{ (form.defaultDonation.single / 100) | int }}</span> by BTCPay
          </button>
        </form>
      </section>
    </div>

  </div>
{% endblock %}
