{% extends "public.html" %} {% block page %}
<div class="row q-col-gutter-md justify-center">
  <div class="col-12 col-sm-6 col-md-5 col-lg-4">
    <q-card class="q-pa-lg">
      <q-card-section class="q-pa-none">
        <div class="text-center">
          <q-badge v-if="spent" color="red" class="q-mb-md"
            >Withdraw is spent.</q-badge
          >
          <a v-else class="text-secondary" :href="link">
            <lnbits-qrcode-lnurl
              prefix="lnurlw"
              :url="url"
              @update:lnurl="v => lnurl = v"
            ></lnbits-qrcode-lnurl>
          </a>
        </div>
        <div class="row q-mt-lg q-gutter-sm">
          <q-btn outline color="grey" @click="copyText(lnurl)"
            >Copy LNURL</q-btn
          >
          <q-btn
            outline
            color="grey"
            icon="nfc"
            @click="writeNfcTag(lnurl)"
            :disable="nfcTagWriting"
          ></q-btn>
        </div>
      </q-card-section>
    </q-card>
  </div>
  <div class="col-12 col-sm-6 col-md-5 col-lg-4 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-mb-sm q-mt-none">
          LNbits LNURL-withdraw link
        </h6>
        <p class="q-my-none">
          Use a LNURL compatible bitcoin wallet to claim the sats.
        </p>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "withdraw/_lnurl.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
  window.app = Vue.createApp({
    el: '#vue',
    mixins: [window.windowMixin],
    data() {
      return {
        spent: {{ 'true' if spent else 'false' }},
        url: '{{ lnurl_url }}',
        lnurl: '',
        nfcTagWriting: false
      }
    }
  })
</script>
{% endblock %}