{% extends "_base.html" %}
{% load sekizai_tags %}
{% load i18n %}

{% block title %}Donate Support Labelbase{% endblock %}
{% block nav_home %}active{% endblock %}

{% block content %}



<div class="p-3 pb-md-4 mx-auto text-center" >
      <h2 class="display-8 fw-bold text-muted" style="padding-top: 2rem;padding-bottom: 0.9em;">Support Labelbase: Keep it Going</h2>

      <p class="lb-header mx-auto text-center fs-5 text-muted">
        Every contribution helps us continue building a better Bitcoin labeling experience.
      </p>
      <p class="lb-header mx-auto text-center fs-5 text-muted">
        Choose the amount you'd like to donate to Labelbase.
      </p>
      <p class="lb-header mx-auto text-center fs-5 text-muted">
        As a free and open-source software, your generosity is crucial to our mission. Your support ensures our project keeps thriving and evolving, directly enhancing Bitcoin label management.
      </p>


    <style> .btcpay-form { display: inline-flex; align-items: center; justify-content: center; } .btcpay-form--inline { flex-direction: row; } .btcpay-form--block { flex-direction: column; } .btcpay-form--inline .submit { margin-left: 15px; } .btcpay-form--block select { margin-bottom: 10px; } .btcpay-form .btcpay-custom-container{ text-align: center; }.btcpay-custom { display: flex; align-items: center; justify-content: center; } .btcpay-form .plus-minus { cursor:pointer; font-size:25px; line-height: 25px; background: #DFE0E1; height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto 5px; display: inline-flex; justify-content: center; } .btcpay-form select { -moz-appearance: none; -webkit-appearance: none; appearance: none; color: currentColor; background: transparent; border:1px solid transparent; display: block; padding: 1px; margin-left: auto; margin-right: auto; font-size: 11px; cursor: pointer; } .btcpay-form select:hover { border-color: #ccc; } .btcpay-form option { color: #000; background: rgba(0,0,0,.1); } .btcpay-input-price { -moz-appearance: textfield; border: none; box-shadow: none; text-align: center; font-size: 25px; margin: auto; border-radius: 5px; line-height: 35px; background: #fff; }.btcpay-input-price::-webkit-outer-spin-button, .btcpay-input-price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } </style>
    <style> input[type=range].btcpay-input-range { -webkit-appearance:none; width:100%; background: transparent; } input[type=range].btcpay-input-range:focus { outline:0; } input[type=range].btcpay-input-range::-webkit-slider-runnable-track { width:100%; height:3.1px; cursor:pointer; box-shadow:0 0 1.7px #020,0 0 0 #003c00; background:#f3f3f3; border-radius:1px; border:0; } input[type=range].btcpay-input-range::-webkit-slider-thumb { box-shadow:none; border:2.5px solid #cedc21; height:22px; width:22px; border-radius:50%; background:#0f3723; cursor:pointer; -webkit-appearance:none; margin-top:-9.45px } input[type=range].btcpay-input-range:focus::-webkit-slider-runnable-track { background:#fff; } input[type=range].btcpay-input-range::-moz-range-track { width:100%; height:3.1px; cursor:pointer; box-shadow:0 0 1.7px #020,0 0 0 #003c00; background:#f3f3f3; border-radius:1px; border:0; } input[type=range].btcpay-input-range::-moz-range-thumb { box-shadow:none; border:2.5px solid #cedc21; height:22px; width:22px; border-radius:50%; background:#0f3723; cursor:pointer; } input[type=range].btcpay-input-range::-ms-track { width:100%; height:3.1px; cursor:pointer; background:0 0; border-color:transparent; color:transparent; } input[type=range].btcpay-input-range::-ms-fill-lower { background:#e6e6e6; border:0; border-radius:2px; box-shadow:0 0 1.7px #020,0 0 0 #003c00; } input[type=range].btcpay-input-range::-ms-fill-upper { background:#f3f3f3; border:0; border-radius:2px; box-shadow:0 0 1.7px #020,0 0 0 #003c00; } input[type=range].btcpay-input-range::-ms-thumb { box-shadow:none; border:2.5px solid #cedc21; height:22px; width:22px; border-radius:50%; background:#0f3723; cursor:pointer; height:3.1px; } input[type=range].btcpay-input-range:focus::-ms-fill-lower { background:#f3f3f3; } input[type=range].btcpay-input-range:focus::-ms-fill-upper { background:#fff; } </style>
    <form method="POST" action="https://pay.seedor.io/api/v1/invoices" class="btcpay-form btcpay-form--block">
      <input type="hidden" name="storeId" value="6BNs4QPhiLFM9yh7uByokgYf1okjCNq6dwAMaVWxgKZN" />
      <input type="hidden" name="checkoutDesc" value="Thank you for supporting Labelbase!" />
      <input type="hidden" name="browserRedirect" value="https://labelbase.space/thanks" />
      <!--input type="hidden" name="notifyEmail" value="xavier@labelbase.space" /-->
      <input type="hidden" name="notifyEmail" value="xavierfiechter@gmail.com" /-->

      <div class="btcpay-custom-container ">
          <input class="btcpay-input-price" type="number" name="price" min="1" max="1000" step="1" value="50" data-price="50" style="width:209px;" />
        <select name="currency">
          <option value="USD" selected>USD</option>
          <option value="CHF">CHF</option>
          <option value="GBP">GBP</option>
          <option value="EUR">EUR</option>
          <option value="BTC">BTC</option>
        </select>
        <input type="range" class="btcpay-input-range" min="1" max="1000" step="1" value="50" style="width:209px;margin-bottom:15px;" />
      </div>
      <input type="hidden" name="defaultPaymentMethod" value="BTC_LightningLike" />
    <button type="submit" class="submit" name="submit" style="min-width:209px;min-height:57px;border-radius:4px;border-style:none;background-color:#0f3b21;cursor:pointer;" title="Pay with BTCPay Server, a Self-Hosted Bitcoin Payment Processor"><span style="color:#fff">Donate with</span>
    <img src="https://pay.seedor.io/img/paybutton/logo.svg" style="height:57px;display:inline-block;padding:5% 0 5% 5px;vertical-align:middle;">
    </button></form>
    <script>
        function handleSliderChange(event) {
            event.preventDefault();
            const root = event.target.closest('.btcpay-form');
            const el = root.querySelector('.btcpay-input-price');
            const price = parseInt(el.value);
            const min = parseInt(event.target.getAttribute('min')) || 1;
            const max = parseInt(event.target.getAttribute('max'));
            if (price < min) {
                el.value = min;
            } else if (price > max) {
                el.value = max;
            }
            root.querySelector('.btcpay-input-range').value = el.value;
        }
        function handleSliderInput(event) {
            event.target.closest('.btcpay-form').querySelector('.btcpay-input-price').value = event.target.value;
        }
        document.querySelectorAll(".btcpay-form .btcpay-input-range").forEach(function(el) {
            if (!el.dataset.initialized) {
                el.addEventListener('input', handleSliderInput);
                el.dataset.initialized = true;
            }
        });
        document.querySelectorAll(".btcpay-form .btcpay-input-price").forEach(function(el) {
            if (!el.dataset.initialized) {
                el.addEventListener('change', handleSliderChange);
                el.dataset.initialized = true;
            }
        });

        function handlePriceInput(event) {
            event.preventDefault();
            const root = event.target.closest('.btcpay-form');
            const price = parseInt(event.target.dataset.price);
            if (isNaN(event.target.value)) root.querySelector('.btcpay-input-price').value = price;
            const min = parseInt(event.target.getAttribute('min')) || 1;
            const max = parseInt(event.target.getAttribute('max'));
            if (event.target.value < min) {
                event.target.value = min;
            } else if (event.target.value > max) {
                event.target.value = max;
            }
        }
        document.querySelectorAll(".btcpay-form .btcpay-input-price").forEach(function(el) {
            if (!el.dataset.initialized) {
                el.addEventListener('input', handlePriceInput);
                el.dataset.initialized = true;
            }
        });
    </script>

    <p class="lb-header mx-auto text-center fs-5 text-muted" style="padding-bottom:2rem;"><br>
      Thank you for keeping Labelbase going.
    </p>
    <div style="display: inline-block; border-top: 1px solid black; ">
      <small>
        <a href="https://www.seedor.io/en/pages/about-us">Seedor</a> powers our <a href="https://btcpayserver.org/">BTCPay Server</a> instance, providing secure and private donations.
      </small>
    </div>

  </div>

{% addtoblock "js" %}

{% endaddtoblock %}
{% endblock %}