{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block scripts %} {{ window_vars(user) }}
<script type="module">
  import * as NobleSecp256k1 from '/nwcprovider/static/js/noble-secp256k1.min.js'
  window.NobleSecp256k1 = NobleSecp256k1
</script>
<script src="{{ static_url_for('nwcprovider/static', path='js/index.js') }}"></script>
{% endblock %} {% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
    <q-card>
      <q-card-section class="row q-gutter-x-md">
        <q-select
          v-model="selectedWallet"
          filled
          dense
          emit-value
          map-options
          :options="g.user.walletOptions"
          label="Wallet *"
          class="col"
        ></q-select>
        <q-btn
          v-if="this.g.user.admin"
          @click="go('/nwcprovider/admin')"
          aria-label="Settings"
          icon="settings"
          color="primary"
        />
      </q-card-section>
    </q-card>

    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col items-center">
            <h5 class="text-subtitle1">Connected Apps</h5>
          </div>
          <q-btn
            @click="showConnectDialog()"
            aria-label="Connect"
            icon="add"
            color="primary"
            size="sm"
            round
          />
        </div>
        <q-table
          dense
          flat
          :rows="nwcEntries"
          row-key="id"
          :columns="nwcsTable.columns"
          v-model:pagination="nwcsTable.pagination"
        >
          <nwcprovider v-slot:header="props">
            <q-tr :props="props">
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
                ${ col.label }
              </q-th>
            </q-tr>
          </nwcprovider>

          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                <div>${ col.value }</div>
              </q-td>

              <q-td>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="openConnectionInfoDialog(props.row)"
                  icon="info"
                  color="primary"
                >
                  <q-tooltip> Info </q-tooltip>
                </q-btn>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="deleteNWC(props.row.pubkey)"
                  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-4 col-lg-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-my-none">NWC Service Provider</h6>
        <p>
          Nostr Wallet Connect (NWC) is an open protocol to connect Lightning
          wallets to apps. This extension allows you to use your LNbits wallet
          with
          <a
            href="https://github.com/getAlby/awesome-nwc#nwc-wallets"
            title="NWC wallets"
            target="_blank"
            >any NWC compatible app</a
          >.
        </p>
        <p>
          Before you can use this extension, you need to configure it.
          <a
            href="https://github.com/lnbits/nwcprovider#configuration"
            title="NWC Service Provider User Guide"
            target="_blank"
            >Read the User Guide</a
          >
          to get started.
        </p>

        <h6 class="text-subtitle2 q-my-none">Connecting a NWC App</h6>
        <p>
          Once you have configured the extension, you can connect a NWC
          compatible app by following these steps:
        </p>
        <ol class="q-pl-md q-mt-sm">
          <li class="q-mb-sm">
            In the <strong>NWC Service Provider</strong> extension, select the
            wallet you want to connect.
          </li>
          <li class="q-mb-sm">Click the "+" button to add a new connection.</li>
          <li class="q-mb-sm">
            Enter a description, expiry date (optional), permissions, and
            limits.
          </li>
          <li class="q-mb-sm">Click "Connect" to create the connection.</li>
          <li class="q-mb-sm">
            Use the generated pairing URL or QR code to connect your chosen app.
          </li>
        </ol>
      </q-card-section>

      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list>
          <q-item
            clickable
            @click="go('../docs#/NWC%20Service%20Provider')"
            class="q-flex items-center justify-between"
          >
            <q-icon name="swap_vertical_circle" class="q-mr-md"></q-icon>
            <q-item-section>Swagger API</q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
    </q-card>
  </div>

  <q-dialog
    v-model="connectionInfoDialog.show"
    @hide="closeConnectionInfoDialog"
  >
    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
      <q-card-section class="q-ma-none">
        <h3 class="q-ma-none q-mb-md text-center">Info</h3>
        <q-list>
          <q-item>
            <q-item-section>Description</q-item-section>
            <q-item-section side
              >${connectionInfoDialog.data.description}</q-item-section
            >
          </q-item>
          <q-item>
            <q-item-section>Last used</q-item-section>
            <q-item-section side
              >${connectionInfoDialog.data.last_used}</q-item-section
            >
          </q-item>
          <q-item>
            <q-item-section>Expires</q-item-section>
            <q-item-section side
              >${connectionInfoDialog.data.expires_at}</q-item-section
            >
          </q-item>
          <q-item>
            <q-item-section>Created</q-item-section>
            <q-item-section side
              >${connectionInfoDialog.data.created_at}</q-item-section
            >
          </q-item>

          <q-item>
            <q-item-section>Permissions</q-item-section>
            <q-item-section side>
              ${connectionInfoDialog.data.permissions}
            </q-item-section>
          </q-item>
          <q-item>
            <q-item-section
              >Limits
              <q-markup-table class="q-mt-md">
                <thead>
                  <q-tr>
                    <q-th>
                      Budget (sats)
                      <div style="font-size: smaller">used/max</div>
                    </q-th>
                    <q-th>Refresh</q-th>
                  </q-tr>
                </thead>
                <tbody>
                  <q-tr
                    v-if="!connectionInfoDialog.data.budgets || connectionInfoDialog.data.budgets.length === 0"
                  >
                    <q-td colspan="2" class="text-center">No limits</q-td>
                  </q-tr>
                  <q-tr
                    v-else
                    v-for="budget in connectionInfoDialog.data.budgets"
                  >
                    <q-td class="text-center"
                      >${budget.used_budget_sats} / ${budget.budget_sats}</q-td
                    >
                    <q-td class="text-center">${budget.refresh_window}</q-td>
                  </q-tr>
                </tbody>
              </q-markup-table>
            </q-item-section>
          </q-item>
        </q-list>
        <q-card-actions class="q-mt-md">
          <q-btn
            v-close-popup
            flat
            color="grey"
            class="q-ml-auto full-width"
            @click="closePairingDialog"
            >Close</q-btn
          >
        </q-card-actions>
      </q-card-section>
    </q-card>
  </q-dialog>

  <q-dialog v-model="pairingQrDialog.show" @hide="closePairingQrDialog">
    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
      <q-card-section class="q-ma-none">
        <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
          <lnbits-qrcode
            :value="pairingQrDialog.data.pairingUrl"
          ></lnbits-qrcode>
        </q-responsive>
      </q-card-section>
      <q-card-section class="q-ma-none">
        <p class="q-ma-none text-center">
          Please scan this QR code with a supported app
        </p>
        <p class="q-ma-none text-center text-caption">
          Connect only with app you trust!
        </p>
      </q-card-section>
      <q-card-actions>
        <q-btn
          label="Close"
          flat
          color="grey"
          class="full-width"
          @click="closePairingQrDialog"
        ></q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>

  <q-dialog v-model="pairingDialog.show" @hide="closePairingDialog">
    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
      <q-card-section class="q-ma-none">
        <h3 class="q-ma-none q-mb-md text-center">Pairing</h3>
        <p class="q-ma-none text-center">
          Complete the last step of the setup by pasting or scanning your
          connection's pairing secret in the desired app to finalise the
          connection.
        </p>
        <p class="q-ma-none text-center text-caption">
          Connect only with app you trust!
        </p>
      </q-card-section>
      <q-card-actions>
        <q-btn
          label="Open in Supported App"
          color="primary"
          class="full-width"
          icon="launch"
          @click="openPairingUrl()"
        ></q-btn>
      </q-card-actions>
      <q-card-section class="q-ma-none">
        <h5 class="q-ma-none text-center">Advanced</h5>
      </q-card-section>

      <q-card-actions>
        <q-btn
          label="Copy Pairing URL"
          flat
          color="grey"
          class="full-width"
          icon="content_copy"
          @click="copyPairingUrl()"
        ></q-btn>
      </q-card-actions>
      <q-card-actions>
        <q-btn
          label="Show QR Code"
          flat
          color="grey"
          class="full-width"
          icon="qr_code_scanner"
          @click="showPairingQR()"
        ></q-btn>
      </q-card-actions>

      <q-card-actions>
        <q-btn
          v-close-popup
          flat
          color="grey"
          class="q-ml-auto full-width"
          @click="closePairingDialog"
          >Close</q-btn
        >
      </q-card-actions>
    </q-card>
  </q-dialog>

  <q-dialog v-model="connectDialog.show" @hide="closeConnectDialog">
    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
      <h3 class="q-ma-none q-mb-xl text-center">Add connection</h3>

      <q-form @submit="confirmConnectDialog" class="q-gutter-md">
        <q-input
          v-model="connectDialog.data.description"
          filled
          dense
          label="Description"
        ></q-input>
        <div class="row">
          <q-input
            :disable="connectDialog.data.neverExpires"
            v-model="connectDialog.data.expires_at"
            class="col"
            v-model="connectDialog.data.expires_at"
            filled
            dense
            label="Expires at"
            type="datetime-local"
          ></q-input>
          <q-checkbox
            v-model="connectDialog.data.neverExpires"
            class="col-auto"
            v-model="connectDialog.data.neverExpires"
            label="Never"
          ></q-checkbox>
        </div>
        <q-list dense bordered padding>
          <q-item>
            <q-item-label header>Authorize the app to</q-item-label>
          </q-item>
          <q-item v-for="permission in connectDialog.data.permissions">
            <q-checkbox
              v-model="permission.value"
              :label="permission.name"
            ></q-checkbox>
          </q-item>
        </q-list>
        <q-list dense bordered padding>
          <q-item>
            <q-item-label header>Limit the spendable amount</q-item-label>
          </q-item>
          <q-item
            v-if="!connectDialog.data.budgets || connectDialog.data.budgets.length === 0"
          >
            <q-item-section class="full-width text-center"
              >No limit</q-item-section
            >
          </q-item>
          <template v-else>
            <q-item v-for="(budget,index) in connectDialog.data.budgets">
              <q-item-section>
                <q-input
                  filled
                  dense
                  type="number"
                  v-model="budget.budget_sats"
                  label="Limit (sats)"
                ></q-input>
              </q-item-section>
              <q-item-section>
                <q-select
                  filled
                  dense
                  emit-value
                  :options="[
                    {label: 'Daily', value: 'Daily'},
                    {label: 'Weekly', value: 'Weekly'},
                    {label: 'Monthly', value: 'Monthly'},
                    {label: 'Yearly', value: 'Yearly'},
                    {label: 'Never', value: 'Never'}
                  ]"
                  label="Expires"
                  v-model="budget.expiry"
                ></q-select>
              </q-item-section>
              <q-item-section side>
                <q-btn flat icon="delete" @click="deleteBudget(index)"></q-btn>
              </q-item-section>
            </q-item>
          </template>
          <q-item>
            <q-btn
              flat
              icon="add"
              class="full-width"
              label="Add limit"
              @click="addBudget"
            ></q-btn>
          </q-item>
        </q-list>

        <q-card-actions class="q-gutter-sm">
          <div class="col q-mr-md">
            <q-btn unelevated color="primary" type="submit" class="full-width"
              >Connect</q-btn
            >
          </div>
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</div>
{% endblock %}