{% 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="formDialog.show = true"
          >New pay link</q-btn
        >
        <lnbits-extension-settings-btn-dialog
          v-if="this.g.user.admin"
          :endpoint="endpoint"
          :options="settings"
        />
      </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">Pay links</h5>
          </div>
        </div>
        <q-table
          dense
          flat
          :rows="payLinks"
          :columns="payLinksTable.columns"
          row-key="id"
          v-model:pagination="payLinksTable.pagination"
        >
          <template v-slot:header="props">
            <q-tr class="text-left" :props="props">
              <q-th auto-width></q-th>
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
                <span v-text="col.label"></span>
              </q-th>
              <q-th auto-width></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-btn
                  unelevated
                  dense
                  size="xs"
                  icon="launch"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  type="a"
                  :href="props.row.pay_url"
                  target="_blank"
                  class="q-ml-sm"
                  ><q-tooltip>Shareable Page</q-tooltip></q-btn
                >
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="visibility"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  class="q-ml-sm"
                  @click="openQrCodeDialog(props.row.id)"
                  ><q-tooltip>View Link</q-tooltip></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-icon
                  v-if="props.row.success_text || props.row.success_url"
                  size="14px"
                  name="call_to_action"
                >
                  <q-tooltip>
                    On success, show message '<span
                      v-text="props.row.success_text"
                    ></span
                    >'
                    <span v-if="props.row.success_url"
                      >and URL '<span v-text="props.row.success_url"></span
                      >'</span
                    >
                  </q-tooltip>
                </q-icon>
                <q-icon
                  v-if="props.row.comment_chars > 0"
                  size="14px"
                  name="insert_comment"
                >
                  <q-tooltip>
                    <span v-text="props.row.comment_chars"></span>-char comment
                    allowed
                  </q-tooltip>
                </q-icon>
              </q-td>
              <q-td auto-width>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="openUpdateDialog(props.row.id)"
                  icon="edit"
                  color="light-blue"
                >
                  <q-tooltip>Edit</q-tooltip>
                </q-btn>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="deletePayLink(props.row.id)"
                  icon="cancel"
                  color="pink"
                  ><q-tooltip>Delete</q-tooltip></q-btn
                >
              </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">
          {{ SITE_TITLE }} LNURL-pay extension
        </h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list>
          {% include "lnurlp/_api_docs.html" %}
          <q-separator></q-separator>
          {% include "lnurlp/_lnurl.html" %}
        </q-list>
      </q-card-section>
    </q-card>
  </div>

  <q-dialog v-model="formDialog.show" @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.description"
          type="text"
          label="Item description *"
        >
        </q-input>
        <div class="row">
          <div class="col">
            <q-input
              filled
              dense
              v-model.trim="formDialog.data.username"
              type="text"
              label="Lightning Address"
              @input="formDialog.data.username = formDialog.data.username.toLowerCase()"
            />
          </div>
          <div class="col" style="margin-top: 10px">
            <span class="label">
              &nbsp;@&nbsp;<span v-text="domain"></span>
            </span>
          </div>
        </div>
        <div class="row q-col-gutter-sm q-mx-sm">
          <q-input
            filled
            dense
            v-model.number="formDialog.data.min"
            type="number"
            :step="formDialog.data.currency && formDialog.data.currency !== 'satoshis' ? '0.01' : '1'"
            :label="formDialog.fixedAmount ? 'Amount *' : 'Min *'"
            :hint="formDialog.data.currency && fiatRates[formDialog.data.currency] && formDialog.data.min ? `approx. ${parseInt(Math.round(formDialog.data.min * fiatRates[formDialog.data.currency]))} sat` : ''"
          ></q-input>
          <q-input
            v-if="!formDialog.fixedAmount"
            filled
            dense
            v-model.number="formDialog.data.max"
            type="number"
            :step="formDialog.data.currency && formDialog.data.currency !== 'satoshis' ? '0.01' : '1'"
            label="Max *"
            :hint="formDialog.data.currency && fiatRates[formDialog.data.currency] && formDialog.data.max ? `approx. ${parseInt(Math.round(formDialog.data.max * fiatRates[formDialog.data.currency]))} sat` : ''"
          ></q-input>
        </div>
        <div class="row q-col-gutter-sm">
          <div class="col">
            <q-checkbox
              dense
              v-model="formDialog.fixedAmount"
              label="Fixed amount"
            />
          </div>
          <div class="col">
            <q-select
              dense
              :options="currencies"
              v-model="formDialog.data.currency"
              :display-value="formDialog.data.currency || 'satoshis'"
              label="Currency"
              :hint="'Converted to satoshis at each payment. ' + (formDialog.data.currency && fiatRates[formDialog.data.currency] ? `Currently 1 ${formDialog.data.currency} = ${fiatRates[formDialog.data.currency]} sat` : '')"
              @input="updateFiatRate"
            />
          </div>
        </div>
        <q-expansion-item
          group="advanced"
          icon="settings"
          label="Advanced options"
        >
          <q-card>
            <q-card-section>
              <h5 class="text-caption q-mt-sm q-mb-none">
                LUD-11: Disposable and storeable payRequests.
              </h5>
              <div class="row">
                <div class="col-12">
                  <q-checkbox
                    dense
                    :toggle-indeterminate="false"
                    v-model="formDialog.data.disposable"
                    label="If enabled, the LNURL will not be stored (default)."
                  />
                </div>
              </div>
              <h5 class="text-caption q-mt-sm q-mb-none">LNURL</h5>
              <div class="row">
                <div class="col-12">
                  <q-input
                    filled
                    dense
                    v-model.number="formDialog.data.comment_chars"
                    type="number"
                    label="Comment maximum characters"
                    hint="Allow the payer to attach a comment."
                  >
                  </q-input>
                </div>
              </div>
              <div class="row">
                <div class="col-12">
                  <q-input
                    filled
                    dense
                    v-model="formDialog.data.webhook_url"
                    type="text"
                    label="Webhook URL (optional)"
                    hint="A URL to be called whenever this link receives a payment."
                  ></q-input>
                </div>
              </div>
              <div class="row" v-if="formDialog.data.webhook_url">
                <div class="col-12">
                  <q-input
                    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>
                </div>
                <div class="col-12">
                  <q-input
                    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>
                </div>
              </div>
              <div class="row">
                <div class="col-12">
                  <q-input
                    filled
                    dense
                    v-model="formDialog.data.success_text"
                    type="text"
                    label="Success message (optional)"
                    hint="Will be shown to the user in his wallet after a successful payment."
                  ></q-input>
                </div>
              </div>
              <div class="row">
                <div class="col-12">
                  <q-input
                    filled
                    dense
                    v-model="formDialog.data.success_url"
                    type="text"
                    label="Success URL (optional)"
                    hint="Link will be shown to the sender after a successful payment."
                  >
                  </q-input>
                </div>
              </div>
            </q-card-section>
            <q-card-section>
              <h5 class="text-caption q-mt-sm q-mb-none">Nostr</h5>
              <div class="row">
                <div class="col-12">
                  <q-checkbox
                    :toggle-indeterminate="false"
                    dense
                    v-model="formDialog.data.zaps"
                    label="Enable nostr zaps"
                  />
                </div>
              </div>
            </q-card-section>
          </q-card>
        </q-expansion-item>
        <div class="row q-mt-lg">
          <q-btn
            v-if="formDialog.data.id"
            unelevated
            color="primary"
            type="submit"
            >Update pay link</q-btn
          >
          <q-btn
            v-else
            unelevated
            color="primary"
            :disable="
                formDialog.data.wallet == null ||
                formDialog.data.description == null ||
                (
                  formDialog.data.min == null ||
                  formDialog.data.min <= 0
                )
                "
            type="submit"
            >Create pay 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="qrCodeDialog.show" position="top">
    <q-card v-if="qrCodeDialog.data" class="q-pa-lg lnbits__dialog-card">
      <lnbits-qrcode-lnurl :url="activeUrl" :nfc="true"></lnbits-qrcode-lnurl>
      <p style="word-break: break-all">
        <strong>ID:</strong> <span v-text="qrCodeDialog.data.id"></span><br />
        <strong>Amount:</strong> <span v-text="qrCodeDialog.data.amount"></span
        ><br />

        <span v-if="qrCodeDialog.data.currency"
          ><strong
            ><span v-text="qrCodeDialog.data.currency"></span> price:</strong
          >
          <span
            v-if="fiatRates[qrCodeDialog.data.currency]"
            v-text="fiatRates[qrCodeDialog.data.currency] + 'sat'"
          ></span>
          <span v-else>Loading...</span>
          <br
        /></span>
        <strong>Accepts comments:</strong>
        <span v-text="qrCodeDialog.data.comments"></span><br />
        <strong>Dispatches webhook to:</strong>
        <span v-text="qrCodeDialog.data.webhook"></span><br />
        <strong>On success:</strong>
        <span v-text="qrCodeDialog.data.success"></span><br />
        <span v-if="qrCodeDialog.data.username">
          <strong>Lightning Address: </strong>
          <span v-text="qrCodeDialog.data.username+'@'+domain"></span>
          <br />
        </span>
      </p>
      <div class="row q-mt-lg q-gutter-sm">
        <q-btn
          outline
          color="grey"
          icon="link"
          @click="copyText(qrCodeDialog.data.pay_url, 'Link copied to clipboard!')"
          ><q-tooltip>Copy sharable link</q-tooltip>
        </q-btn>
        <q-btn
          outline
          color="grey"
          icon="print"
          type="a"
          :href="qrCodeDialog.data.print_url"
          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="/lnurlp/static/js/index.js"></script>
{% endblock %}