{% 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 scrub link</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">Scrub links</h5>
          </div>
        </div>
        <q-table
          dense
          flat
          :data="payLinks"
          row-key="id"
          :pagination.sync="payLinksTable.pagination"
        >
          {% raw %}
          <template v-slot:header="props">
            <q-tr :props="props" style="text-align: left">
              <q-th>Wallet</q-th>
              <q-th>Description</q-th>
              <q-th>LNURLPay/Address</q-th>
              <q-th auto-width></q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td>{{ props.row.wallet }}</q-td>
              <q-td>{{ props.row.description }}</q-td>
              <q-td>{{ props.row.payoraddress }}</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="deleteScrubLink(props.row.id)"
                  icon="cancel"
                  color="pink"
                ></q-btn>
              </q-td>
            </q-tr>
          </template>
          {% endraw %}
        </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}} Scrub extension</h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list>
          {% include "scrub/_api_docs.html" %}
          <q-separator></q-separator>
          {% include "scrub/_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="Description *"
        ></q-input>

        <q-input
          filled
          dense
          v-model.trim="formDialog.data.payoraddress"
          type="text"
          label="LNURLPay or LNAdress *"
        ></q-input>
        <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.payoraddress == null
                "
            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>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script src="/scrub/static/js/index.js"></script>
{% endblock %}
