{{template "base/header" .}}
<style>
    .sponsor {
        position: relative;
    }

    .sponsor > .popup {
        width: 280px;
        background: #eee;
        color: #fff;
        box-shadow: 0 0 5px 0 #ccc;
        border-radius: 5px;
        line-height: 0;
    }

    .sponsor > .alipay {
        background: #00a2ea;
    }

    .sponsor > .popup > .head {
        text-align: center;
        padding-top: 30px;
    }

    .sponsor .qrcode {
        text-align: center;
    }

    .sponsor .qrcode img {
        margin: 30px auto;
        width: 80%;
    }

    .sponsor ul.platform {
        padding: 0 !important;
        margin: 0 !important;
        text-align: center;
        background: #FFF;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .sponsor ul.platform li {
        display: inline-block;
        cursor: pointer;
        margin: 5px;
        filter: grayscale(100%);
    }

    .sponsor ul.platform li.active {
        font-weight: 600;
        filter: grayscale(0%);
    }

    .sponsor ul.platform li.icon-alipay {
        background: url(https://cdn.github.red/wp-content/plugins/you-shang/image/alipay.svg) no-repeat center center;
        width: 24px;
        height: 24px;
        background-size: cover;
    }
</style>
<div class="uk-card uk-card-default uk-card-body">
  <div class="uk-child-width-expand@s" uk-grid>
    <div>
      <h2>给 NekoBox 打钱</h2>
      <p>NekoBox 创立于 2020 年疫情初期，一开始是我疫情在家花了三天时间随手写得一个匿名留言箱。</p>
      <p>目前 NekoBox 的服务器、CDN 开销还是我一个人承担，如果你也想为我分担一些，欢迎给 NekoBox 打钱！👏🏻</p>
    </div>
    <div>
      <div class="sponsor">
        <div class="alipay popup" style="">
          <div class="head">谢谢老板 Thanks♪(･ω･)ﾉ</div>
          <div class="qrcode">
            <div class="qrcode-li alipay"><img
                    src="https://cdn.github.red/wp-content/uploads/2021/02/alipay_qrcode.jpg">
              <noscript><img src="https://cdn.github.red/wp-content/uploads/2021/02/alipay_qrcode.jpg"/></noscript>
            </div>
          </div>
          <ul class="platform">
            <li class="icon-alipay active" data-bg-color="#00a2ea" data-thanks="谢谢老板 Thanks♪(･ω･)ﾉ"></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div uk-alert class="uk-text-small">感谢以下小伙伴对 NekoBox 的支持！</div>
  <table class="uk-table uk-table-small uk-table-divider">
    <thead>
    <tr>
      <th>日期</th>
      <th>附言</th>
      <th>金额</th>
    </tr>
    </thead>
    <tbody x-data="{ s: '' }" x-init="
    s = await (async () => {
      let html = '';
      let items = (await(await fetch('https://pb.app.apicon.cn/api/collections/nekobox_sponsors/records?perPage=500&sort=-date')).json()).items;
      items.forEach(item => {
        html += `<tr class=uk-text-meta><td>${item.date.slice(0,10)}</td><td>${item.desc}</td><td>¥ ${item.price.toFixed(2)}</td></tr>`;
      })
      return html;
    })()
  " x-html="s">
    </tbody>
  </table>
</div>
{{template "base/footer" .}}