{{ define "main" }}
<div class="content-grid">
  <main id="main-content">

    <!-- Donate Header -->
    <div class="donate-header pixel-border">
      <div style="font-family:var(--font-terminal); font-size:0.85rem; color:var(--forest-light); margin-bottom:1rem;">
        <span>~/donate $</span> <span style="color:var(--amber);">cat tip_jar.md</span>
      </div>
      <h1 class="post-title">{{ .Title }}</h1>
      <p style="font-family:var(--font-body); font-style:italic; color:var(--text-warm); font-size:1rem; margin-top:0.5rem;">
        {{- with .Params.subtitle }}{{ . }}{{- else }}If you enjoy the writing and want to keep the tea kettle going, any support is deeply appreciated.{{- end }}
      </p>
    </div>

    <!-- Donate Body (optional intro markdown) -->
    {{- with .Content }}
    <div class="resume-body" style="margin-bottom:2rem;">{{ . }}</div>
    {{- end }}

    <!-- Platforms -->
    <div class="donate-grid">

      {{- with .Params.kofi }}
      <a href="https://ko-fi.com/{{ . }}" target="_blank" rel="noopener" class="donate-card pixel-border">
          <span class="donate-card__icon"><img src="/kofi.webp" width=30px height=30px/></span>
        <div class="donate-card__name">Ko-fi</div>
        <div class="donate-card__handle">ko-fi.com/{{ . }}</div>
        <div class="donate-card__desc">Buy me a cup of cof- I mean, uh, tea. Ko-fi is not the most inclusive name...</div>
      </a>
      {{- end }}

      {{- with .Params.liberapay }}
      <a href="https://liberapay.com/{{ . }}" target="_blank" rel="noopener" class="donate-card pixel-border">
          <span class="donate-card__icon"><img src="/liberapay.svg" width=30px height=30px/></span>
        <div class="donate-card__name">Liberapay</div>
        <div class="donate-card__handle">liberapay.com/{{ . }}</div>
        <div class="donate-card__desc">Like Patreon or Onlyfans but, like, better.</div>
      </a>
      {{- end }}

      {{- with .Params.github_sponsors }}
      <a href="https://github.com/sponsors/{{ . }}" target="_blank" rel="noopener" class="donate-card pixel-border">
        <div class="donate-card__icon">🐙</div>
        <div class="donate-card__name">GitHub Sponsors</div>
        <div class="donate-card__handle">github.com/sponsors/{{ . }}</div>
        <div class="donate-card__desc">Support via GitHub</div>
      </a>
      {{- end }}

    </div>

    <!-- Crypto Wallets -->
    {{- $hasCrypto := or .Params.bitcoin .Params.ethereum .Params.monero .Params.litecoin }}
    {{- if $hasCrypto }}
    <div class="donate-section">
      <h2 class="donate-section__title">Crypto Wallets: unlike the fed, I don't have an inflation fetish</h2>

      {{- with .Params.bitcoin }}
      <div class="wallet-card pixel-border">
        <div class="wallet-card__header">
          <span class="wallet-card__icon"><img src="/bitcoin_logo.png" width=30px height=30px/></span>
          <span class="wallet-card__name">Bitcoin</span>
          <span class="wallet-card__ticker">BTC</span>
        </div>
        <div class="wallet-card__body">
          <div class="wallet-card__address">
            <span class="wallet-card__addr-text" id="btc-addr">{{ . }}</span>
            <button class="wallet-card__copy" onclick="copyAddr('btc-addr', this)">[ copy ]</button>
          </div>
          <canvas class="wallet-qr" id="qr-btc" data-address="{{ . }}"></canvas>
        </div>
      </div>
      {{- end }}

      {{- with .Params.ethereum }}
      <div class="wallet-card pixel-border">
        <div class="wallet-card__header">
          <span class="wallet-card__icon"><img src="/ethereum_logo.png" width=15px height=30px/></span>
          <span class="wallet-card__name">Ethereum</span>
          <span class="wallet-card__ticker">ETH</span>
        </div>
        <div class="wallet-card__body">
          <div class="wallet-card__address">
            <span class="wallet-card__addr-text" id="eth-addr">{{ . }}</span>
            <button class="wallet-card__copy" onclick="copyAddr('eth-addr', this)">[ copy ]</button>
          </div>
          <canvas class="wallet-qr" id="qr-eth" data-address="{{ . }}"></canvas>
        </div>
      </div>
      {{- end }}

      {{- with .Params.monero }}
      <div class="wallet-card pixel-border">
        <div class="wallet-card__header">
          <span class="wallet-card__icon"><img src="/monero_logo.png" width=30px height=30px/></span>
          <span class="wallet-card__name">Monero</span>
          <span class="wallet-card__ticker">XMR</span>
        </div>
        <div class="wallet-card__body">
          <div class="wallet-card__address">
            <span class="wallet-card__addr-text" id="xmr-addr">{{ . }}</span>
            <button class="wallet-card__copy" onclick="copyAddr('xmr-addr', this)">[ copy ]</button>
          </div>
          <canvas class="wallet-qr" id="qr-xmr" data-address="{{ . }}"></canvas>
        </div>
      </div>
      {{- end }}

      {{- with .Params.litecoin }}
      <div class="wallet-card pixel-border">
        <div class="wallet-card__header">
          <span class="wallet-card__icon"><img src="/litecoin.png" width=30px height=30px/></span>
          <span class="wallet-card__name">Litecoin</span>
          <span class="wallet-card__ticker">LTC</span>
        </div>
        <div class="wallet-card__body">
          <div class="wallet-card__address">
            <span class="wallet-card__addr-text" id="ltc-addr">{{ . }}</span>
            <button class="wallet-card__copy" onclick="copyAddr('ltc-addr', this)">[ copy ]</button>
          </div>
          <canvas class="wallet-qr" id="qr-ltc" data-address="{{ . }}"></canvas>
        </div>
      </div>
      {{- end }}

    </div>
    {{- end }}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script>
      // Copy address to clipboard
      function copyAddr(id, btn) {
        var text = document.getElementById(id).textContent.trim();
        navigator.clipboard.writeText(text).then(function() {
          var orig = btn.textContent;
          btn.textContent = '[ copied! ]';
          btn.style.color = 'var(--forest-light)';
          setTimeout(function() { btn.textContent = orig; btn.style.color = ''; }, 2000);
        });
      }

      // Theme colours (match CSS variables)
      var QR_DARK  = '#d4a228';   // --amber: the "on" modules
      var QR_LIGHT = '#130e07';   // --bg-primary: the "off" background

      // Generate a QR code into each canvas
      document.querySelectorAll('.wallet-qr').forEach(function(canvas) {
        var address = canvas.getAttribute('data-address');
        if (!address) return;

        // qrcode.js needs a fresh div to render into, then we pull the image
        var tmp = document.createElement('div');
        tmp.style.display = 'none';
        document.body.appendChild(tmp);

        new QRCode(tmp, {
          text:         address,
          width:        160,
          height:       160,
          colorDark:    QR_DARK,
          colorLight:   QR_LIGHT,
          correctLevel: QRCode.CorrectLevel.M,
        });

        // qrcode.js creates an <img> inside the div once done
        // Give it a tick to finish then copy to our canvas
        setTimeout(function() {
          var img = tmp.querySelector('img');
          if (!img) return;
          img.onload = function() {
            canvas.width  = 160;
            canvas.height = 160;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, 160, 160);
            document.body.removeChild(tmp);
          };
          // If already loaded
          if (img.complete) {
            canvas.width  = 160;
            canvas.height = 160;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, 160, 160);
            document.body.removeChild(tmp);
          }
        }, 100);
      });
    </script>

  </main>

  {{ partial "sidebar.html" . }}
</div>
{{ end }}