{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12 col-md-7 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <q-btn unelevated color="primary" @click="simpleformDialog.show = true"
          >Quick vouchers</q-btn
        >
        <q-btn
          unelevated
          color="primary"
          @click="formDialog.show = true"
          class="q-ml-md"
          >Advanced withdraw link(s)</q-btn
        >
      </q-card-section>
    </q-card>

    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col">
            <h5 class="text-subtitle1 q-my-none">Withdraw links</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportCSV">Export to CSV</q-btn>
          </div>
        </div>
        <q-table
          dense
          flat
          :rows="sortedWithdrawLinks"
          row-key="id"
          :columns="withdrawLinksTable.columns"
          v-model:pagination="withdrawLinksTable.pagination"
          @request="getWithdrawLinks"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <q-th auto-width></q-th>
              <q-th auto-width></q-th>
              <q-th
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                v-text="col.label"
              ></q-th>
              <q-th auto-width></q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width>
                <q-icon
                  name="power_settings_new"
                  :color="props.row.enabled ? 'green' : 'red'"
                  size="xs"
                >
                  <q-tooltip>
                    <span
                      v-text="props.row.enabled ? 'Withdraw link is enabled' : 'Withdraw link is disabled'"
                    ></span>
                  </q-tooltip>
                </q-icon>
              </q-td>
              <q-td auto-width>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="launch"
                  type="a"
                  :href="'/withdraw/' + props.row.id"
                  target="_blank"
                >
                  <q-tooltip>Shareable link</q-tooltip></q-btn
                >
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="reorder"
                  type="a"
                  :href="'/withdraw/csv/' + props.row.id"
                  target="_blank"
                  ><q-tooltip>CSV download</q-tooltip></q-btn
                >
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="visibility"
                  @click="openQrCodeDialog(props.row.id)"
                  ><q-tooltip>view LNURL</q-tooltip></q-btn
                >
              </q-td>
              <q-td auto-width>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="openUpdateDialog(props.row.id)"
                  icon="edit"
                  color="light-blue"
                ></q-btn>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="deleteWithdrawLink(props.row.id)"
                  icon="cancel"
                  color="pink"
                ></q-btn>
              </q-td>
              <q-td
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                v-text="col.value"
              >
              </q-td>
              <q-td>
                <q-icon v-if="props.row.webhook_url" size="14px" name="http">
                  <q-tooltip
                    >Webhook to <span v-text="props.row.webhook_url"></span
                  ></q-tooltip>
                </q-icon>
              </q-td>
            </q-tr>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
  </div>

  <div class="col-12 col-md-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-my-none">
          LNbits LNURL withdraw extension
        </h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list>
          {% include "withdraw/_api_docs.html" %}
          <q-separator></q-separator>
          {% include "withdraw/_lnurl.html" %}
        </q-list>
      </q-card-section>
    </q-card>
  </div>

  <q-dialog v-model="formDialog.show" position="top" @hide="closeFormDialog">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="sendFormData" class="q-gutter-md">
        <q-select
          filled
          dense
          emit-value
          v-model="formDialog.data.wallet"
          :options="g.user.walletOptions"
          label="Wallet *"
        >
        </q-select>
        <q-input
          filled
          dense
          v-model.trim="formDialog.data.title"
          type="text"
          label="Link title *"
        ></q-input>
        <q-input
          filled
          dense
          v-model.number="formDialog.data.min_withdrawable"
          type="number"
          min="10"
          label="Min withdrawable (sat, at least 10) *"
        ></q-input>
        <q-input
          filled
          dense
          v-model.number="formDialog.data.max_withdrawable"
          type="number"
          min="10"
          label="Max withdrawable (sat, at least 10) *"
        ></q-input>
        <q-input
          filled
          dense
          v-model.number="formDialog.data.uses"
          type="number"
          max="250"
          :default="1"
          label="Amount of uses *"
        ></q-input>
        <div class="row q-col-gutter-none">
          <div class="col-8">
            <q-input
              filled
              dense
              v-model.number="formDialog.data.wait_time"
              type="number"
              :default="1"
              label="Time between withdrawals *"
            >
            </q-input>
          </div>
          <div class="col-4 q-pl-xs">
            <q-select
              filled
              dense
              v-model="formDialog.secondMultiplier"
              :options="formDialog.secondMultiplierOptions"
            >
            </q-select>
          </div>
        </div>
        <q-toggle
          label="Webhook"
          color="secondary"
          v-model="formDialog.data.has_webhook"
        ></q-toggle>
        <q-input
          v-if="formDialog.data.has_webhook"
          filled
          dense
          v-model="formDialog.data.webhook_url"
          type="text"
          label="Webhook URL (optional)"
          hint="A URL to be called whenever this link gets used."
        ></q-input>
        <q-input
          v-if="formDialog.data.has_webhook"
          filled
          dense
          v-model="formDialog.data.webhook_headers"
          type="text"
          label="Webhook Headers (optional)"
          hint="Custom data as JSON string, send headers along with the webhook."
        ></q-input>
        <q-input
          v-if="formDialog.data.has_webhook"
          filled
          dense
          v-model="formDialog.data.webhook_body"
          type="text"
          label="Webhook custom data (optional)"
          hint="Custom data as JSON string, will get posted along with webhook 'body' field."
        ></q-input>
        <q-list>
          <q-item tag="label" class="rounded-borders">
            <q-item-section avatar>
              <q-checkbox
                v-model="formDialog.data.enabled"
                color="primary"
              ></q-checkbox>
            </q-item-section>
            <q-item-section>
              <q-item-label>Enable / Disable </q-item-label>
              <q-item-label caption
                >You can enable or disable these vouchers</q-item-label
              >
            </q-item-section>
          </q-item>
          <q-item tag="label" class="rounded-borders">
            <q-item-section avatar>
              <q-checkbox
                v-model="formDialog.data.use_custom"
                color="primary"
              ></q-checkbox>
            </q-item-section>
            <q-item-section>
              <q-item-label>Use a custom voucher design </q-item-label>
              <q-item-label caption
                >You can use an LNbits voucher design or a custom
                one</q-item-label
              >
            </q-item-section>
          </q-item>
        </q-list>
        <q-input
          v-if="formDialog.data.use_custom"
          filled
          dense
          v-model="formDialog.data.custom_url"
          type="text"
          label="Custom design .png (optional)"
          hint="Enter a URL if you want to use a custom design or leave blank for LNbits designed vouchers!"
        ></q-input>
        <q-list>
          <q-item tag="label" class="rounded-borders">
            <q-item-section avatar>
              <q-checkbox
                v-model="formDialog.data.is_unique"
                color="primary"
              ></q-checkbox>
            </q-item-section>
            <q-item-section>
              <q-item-label
                >Use unique withdraw QR codes to reduce `assmilking`
              </q-item-label>
              <q-item-label caption
                >This is recommended if you are sharing the links on social
                media or print QR codes.</q-item-label
              >
            </q-item-section>
          </q-item>
        </q-list>
        <div class="row q-mt-lg">
          <q-btn
            v-if="formDialog.data.id"
            unelevated
            color="primary"
            type="submit"
            >Update withdraw link</q-btn
          >
          <q-btn
            v-else
            unelevated
            color="primary"
            :disable="
                formDialog.data.wallet == null ||
                formDialog.data.title == null ||
                (formDialog.data.min_withdrawable == null || formDialog.data.min_withdrawable < 1) ||
                (
                  formDialog.data.max_withdrawable == null ||
                  formDialog.data.max_withdrawable < 1 ||
                  formDialog.data.max_withdrawable < formDialog.data.min_withdrawable
                ) ||
                formDialog.data.uses == null ||
                formDialog.data.wait_time == null"
            type="submit"
            >Create withdraw link</q-btn
          >
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog
    v-model="simpleformDialog.show"
    position="top"
    @hide="simplecloseFormDialog"
  >
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="simplesendFormData" class="q-gutter-md">
        <q-select
          filled
          dense
          emit-value
          v-model="simpleformDialog.data.wallet"
          :options="g.user.walletOptions"
          label="Wallet *"
        >
        </q-select>
        <q-input
          filled
          dense
          v-model.number="simpleformDialog.data.max_withdrawable"
          type="number"
          min="10"
          label="Withdraw amount per voucher (sat, at least 10)"
        ></q-input>
        <q-input
          filled
          dense
          v-model.number="simpleformDialog.data.uses"
          type="number"
          max="250"
          :default="1"
          label="Number of vouchers"
        ></q-input>
        <q-list>
          <q-item tag="label" class="rounded-borders">
            <q-item-section avatar>
              <q-checkbox
                v-model="simpleformDialog.data.enabled"
                color="primary"
              ></q-checkbox>
            </q-item-section>
            <q-item-section>
              <q-item-label>Enable / Disable </q-item-label>
              <q-item-label caption
                >You can enable or disable these vouchers</q-item-label
              >
            </q-item-section>
          </q-item>
          <q-item tag="label" class="rounded-borders">
            <q-item-section avatar>
              <q-checkbox
                v-model="simpleformDialog.data.use_custom"
                color="primary"
              ></q-checkbox>
            </q-item-section>
            <q-item-section>
              <q-item-label>Use a custom voucher design </q-item-label>
              <q-item-label caption
                >You can use an LNbits voucher design or a custom
                one</q-item-label
              >
            </q-item-section>
          </q-item>
        </q-list>
        <q-input
          v-if="simpleformDialog.data.use_custom"
          filled
          dense
          v-model="simpleformDialog.data.custom_url"
          type="text"
          label="Custom design .png (optional)"
          hint="Enter a URL if you want to use a custom design or leave blank for LNbits designed vouchers!"
        ></q-input>

        <div class="row q-mt-lg">
          <q-btn
            unelevated
            color="primary"
            :disable="
                simpleformDialog.data.wallet == null ||

                  simpleformDialog.data.max_withdrawable == null ||
                  simpleformDialog.data.max_withdrawable < 1 ||
                simpleformDialog.data.uses == null"
            type="submit"
            >Create vouchers</q-btn
          >
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="qrCodeDialog.show" position="top">
    <q-card v-if="qrCodeDialog.data" class="q-pa-lg lnbits__dialog-card">
      <lnbits-qrcode-lnurl
        :url="activeUrl"
        @update:lnurl="v => lnurl = v"
        prefix="lnurlw"
      ></lnbits-qrcode-lnurl>
      <p style="word-break: break-all">
        <strong>ID:</strong> <span v-text="qrCodeDialog.data.id"></span><br />
        <strong>Unique:</strong>
        <span v-text="qrCodeDialog.data.is_unique"></span>
        <span v-if="qrCodeDialog.data.is_unique" class="text-deep-purple">
          (QR code will change after each withdrawal)</span
        ><br />
        <strong>Max. withdrawable:</strong>
        <span v-text="qrCodeDialog.data.max_withdrawable"></span> sat<br />
        <strong>Wait time:</strong>
        <span v-text="qrCodeDialog.data.wait_time"></span> seconds<br />
        <strong>Withdraws:</strong>
        <span v-text="qrCodeDialog.data.used"></span>/
        <span v-text="qrCodeDialog.data.uses"></span><br />
        <q-linear-progress
          :value="qrCodeDialog.data.used / qrCodeDialog.data.uses"
          color="primary"
          class="q-mt-sm"
        ></q-linear-progress>
      </p>
      <div class="row q-mt-lg q-gutter-sm">
        <q-btn
          outline
          color="grey"
          @click="copyText(lnurl, 'LNURL copied to clipboard!')"
          class="q-ml-sm"
          >Copy LNURL</q-btn
        >
        <q-btn
          outline
          color="grey"
          icon="nfc"
          @click="writeNfcTag(lnurl)"
          :disable="nfcTagWriting"
          ><q-tooltip>Write to NFC</q-tooltip></q-btn
        >
        <q-btn
          outline
          color="grey"
          icon="link"
          :href="'/withdraw/' + qrCodeDialog.data.id"
          target="_blank"
          ><q-tooltip>Open sharable link</q-tooltip>
        </q-btn>
        <q-btn
          outline
          color="grey"
          icon="print"
          type="a"
          :href="'/withdraw/print/' + qrCodeDialog.data.id"
          target="_blank"
          ><q-tooltip>Print</q-tooltip></q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
      </div>
    </q-card>
  </q-dialog>
</div>
{% endblock %}{% block scripts %} {{ window_vars(user) }}
<script src="{{ static_url_for('withdraw/static', path='js/index.js') }}"></script>
{% endblock %}