{% block styles %}

  {{ super() }}

  <style>

    .bitpay-donate { margin:20px 0;}

    .bitpay-donate fieldset {border:0;}

    .bitpay-donate input {padding:4px 10px;}

    .bitpay-donate select {padding:3px 10px;}

    .bitpay-donate ul, .bitpay-donate li {padding:0;margin:0;list-style:none;}

    .bitpay-donate li {padding:10px 0;}

    .bitpay-donate-field {clear:both;}

    .bitpay-donate-field label {float:left;width:100px;}

    .bitpay-donate-field div {float:left;}

    .bitpay-donate-field-email {width:80%;}

    .bitpay-donate-field-price {width:40%;}

    .bitpay-donate-field-currency {width:40%;}

    .bitpay-donate-button-wrapper {clear:both;margin:auto;text-align:center;}

    input.bitpay-donate-error {border:2px solid red;}

  </style>

{% endblock %}

    <form class="bitpay-donate form-horizontal" action="https://bitpay.com/checkout" method="POST" onsubmit="return checkRequiredFields(this);">

      <input name="action" type="hidden" value="checkout">

      <div class="form-group">

        <label class="col-sm-2 control-label">Email:</label>

        <div class="col-sm-10">

          <input class="bitpay-donate-field-email form-control" name="orderID" type="email" placeholder="Email address (optional)" maxlenght=50 autocapitalize=off autocorrect=off />

        </div>

      </div>

      <div class="form-group">

        <label class="col-sm-2 control-label">Amount:</label>

        <div class="col-sm-10">

          <input class="bitpay-donate-field-price form-control" style="display: inline;" name="price" type="number" value="0.1" placeholder="Amount" maxlenght="10" min="0.000006" step="0.000001" />

          <select class="bitpay-donate-field-currency form-control" style="display: inline;" value="" name="currency">

            <option selected="selected" value="BTC">BTC</option>

            <option value="USD">USD</option>

            <option value="EUR">EUR</option>

            <option value="GBP">GBP</option>

            <option value="AUD">AUD</option>

            <option value="BGN">BGN</option>

            <option value="BRL">BRL</option>

            <option value="CAD">CAD</option>

            <option value="CHF">CHF</option>

            <option value="CNY">CNY</option>

            <option value="CZK">CZK</option>

            <option value="DKK">DKK</option>

            <option value="HKD">HKD</option>

            <option value="HRK">HRK</option>

            <option value="HUF">HUF</option>

            <option value="IDR">IDR</option>

            <option value="ILS">ILS</option>

            <option value="INR">INR</option>

            <option value="JPY">JPY</option>

            <option value="KRW">KRW</option>

            <option value="LTL">LTL</option>

            <option value="LVL">LVL</option>

            <option value="MXN">MXN</option>

            <option value="MYR">MYR</option>

            <option value="NOK">NOK</option>

            <option value="NZD">NZD</option>

            <option value="PHP">PHP</option>

            <option value="PLN">PLN</option>

            <option value="RON">RON</option>

            <option value="RUB">RUB</option>

            <option value="SEK">SEK</option>

            <option value="SGD">SGD</option>

            <option value="THB">THB</option>

            <option value="TRY">TRY</option>

            <option value="ZAR">ZAR</option>

          </select>

        </div>

      </div>

      <input type="hidden" name="data" value="k3TZs7wPLcCaurVVZ8iW/MCwDwe94LwJrA22SKBNMwOmVLQ3AAW4TncxqpNFPVNScSCIqoQR+zwgYJSRtFBFciNwQ7Ezcnqb3JptfVNnDubnNy1KVTFCYXZ8m/83aFxFC0p6Lyf07a0HCEWTBMQhmVjFLuQYSa57kYQd+fzlL+lbi5pkBW8ok884l1ELYq6W"> 

      <div class="bitpay-donate-button-wrapper form-group">

        <input class="bitpay-donate-button" name="submit" src="https://bitpay.com/img/donate-button.svg" onerror="this.onerror=null; this.src='https://bitpay.com/img/donate-button-md.png'" width="126" height="48" type="image" alt="BitPay, the easy way the easy way to pay with bitcoins." border="0">

      </div>

    </form>

{% block scripts %}

  {{ super() }}

  <script type="text/javascript">

    function checkRequiredFields(form){

      function isFilled(field){

        if (field.value.length < 1){

          return false;

        }

        return true;

      }

      var elements = form.elements;

      var invalid = false;

      for(var i=0; i<elements.length; i++) {

        elements[i].className = elements[i].className.replace('bitpay-donate-error', '');

        if(elements[i].className.indexOf("required") != -1) {

          if(!isFilled(elements[i])){

            elements[i].className = elements[i].className + ' bitpay-donate-error';

            invalid = true;

          };

        };

      }

      if ( invalid ) {

         return false;

      }

      var donationElement = document.getElementById('donation-value');

      if(donationElement){

        var enteredDonation = Number(donationElement.value);

        var maximumDonation = Number(document.getElementById('reference-maximum').value);

        if(enteredDonation > maximumDonation){ 

          alert("Your donation was larger than the allowed maximum of " + Number(maximumDonation).toFixed(2))

          return false;

        };

      };

      return true;

    };

  </script>

{% endblock %}