{% extends "base.html" %}
<!---->
{% from "macros.jinja" import window_vars with context %}
<!---->
{% block scripts %} {{ window_vars(user, wallet) }}
<script src="/core/static/js/wallet.js"></script>
{% endblock %}
<!---->
{% block title %} {{ wallet.name }} - {{ SITE_TITLE }} {% endblock %}
<!---->
{% 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>
        <h3 class="q-my-none">
          <strong>{% raw %}{{ formattedBalance }} {% endraw %}</strong>
          {{LNBITS_DENOMINATION}}
          <q-btn
            v-if="'{{user.admin}}' == 'True'"
            flat
            round
            color="primary"
            icon="add"
            size="md"
          >
            <q-popup-edit
              class="bg-accent text-white"
              v-slot="scope"
              v-model="credit"
            >
              <q-input
                v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
                label="Amount to credit account"
                v-model="scope.value"
                dense
                autofocus
                mask="#.##"
                fill-mask="0"
                reverse-fill-mask
                @keyup.enter="updateBalance(scope.value)"
              >
                <template v-slot:append>
                  <q-icon name="edit" />
                </template>
              </q-input>
              <q-input
                v-else
                type="number"
                label="Amount to credit account"
                v-model="scope.value"
                dense
                autofocus
                @keyup.enter="updateBalance(scope.value)"
              >
                <template v-slot:append>
                  <q-icon name="edit" />
                </template>
              </q-input>
            </q-popup-edit>
          </q-btn>
        </h3>
      </q-card-section>
      <div class="row q-pb-md q-px-md q-col-gutter-md gt-sm">
        <div class="col">
          <q-btn
            unelevated
            color="primary"
            class="full-width"
            @click="showParseDialog"
            >Paste Request</q-btn
          >
        </div>
        <div class="col">
          <q-btn
            unelevated
            color="primary"
            class="full-width"
            @click="showReceiveDialog"
            >Create Invoice</q-btn
          >
        </div>
        <div class="col">
          <q-btn
            unelevated
            color="secondary"
            icon="photo_camera"
            @click="showCamera"
            >scan
            <q-tooltip>Use camera to scan an invoice/QR</q-tooltip>
          </q-btn>
        </div>
      </div>
    </q-card>

    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-sm">
          <div class="col">
            <h5 class="text-subtitle1 q-my-none">Transactions</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportCSV">Export to CSV</q-btn>
            <!--<q-btn v-if="pendingPaymentsExist" dense flat round icon="update" color="grey" @click="checkPendingPayments">
                <q-tooltip>Check pending</q-tooltip>
              </q-btn>-->
            <q-btn
              dense
              flat
              round
              icon="show_chart"
              color="grey"
              @click="showChart"
            >
              <q-tooltip>Show chart</q-tooltip>
            </q-btn>
          </div>
        </div>
        <q-input
          v-if="payments.length > 10"
          filled
          dense
          clearable
          v-model="paymentsTable.filter"
          debounce="300"
          placeholder="Search by tag, memo, amount"
          class="q-mb-md"
        >
        </q-input>
        <q-table
          dense
          flat
          :data="filteredPayments"
          :row-key="paymentTableRowKey"
          :columns="paymentsTable.columns"
          :pagination.sync="paymentsTable.pagination"
          no-data-label="No transactions made yet"
          :filter="paymentsTable.filter"
        >
          {% raw %}
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <q-th v-for="col in props.cols" :key="col.name" :props="props"
                >{{ col.label }}</q-th
              >
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width class="text-center">
                <q-icon
                  v-if="props.row.isPaid"
                  size="14px"
                  :name="props.row.isOut ? 'call_made' : 'call_received'"
                  :color="props.row.isOut ? 'pink' : 'green'"
                  @click="props.expand = !props.expand"
                ></q-icon>
                <q-icon
                  v-else
                  name="settings_ethernet"
                  color="grey"
                  @click="props.expand = !props.expand"
                >
                  <q-tooltip>Pending</q-tooltip>
                </q-icon>
              </q-td>
              <q-td
                key="memo"
                :props="props"
                style="white-space: normal; word-break: break-all"
              >
                <q-badge v-if="props.row.tag" color="yellow" text-color="black">
                  <a
                    class="inherit"
                    :href="['/', props.row.tag, '/?usr=', user.id].join('')"
                  >
                    #{{ props.row.tag }}
                  </a>
                </q-badge>
                {{ props.row.memo }}
              </q-td>
              <q-td auto-width key="date" :props="props">
                <q-tooltip>{{ props.row.date }}</q-tooltip>
                {{ props.row.dateFrom }}
              </q-td>
              {% endraw %}
              <q-td
                auto-width
                key="sat"
                v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
                :props="props"
                >{% raw %} {{ parseFloat(String(props.row.fsat).replaceAll(",",
                "")) / 100 }}
              </q-td>

              <q-td auto-width key="sat" v-else :props="props">
                {{ props.row.fsat }}
              </q-td>
              <q-td auto-width key="fee" :props="props">
                {{ props.row.fee }}
              </q-td>
            </q-tr>

            <q-dialog v-model="props.expand" :props="props">
              <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
                <div class="text-center q-mb-lg">
                  <div v-if="props.row.isIn && props.row.pending">
                    <q-icon name="settings_ethernet" color="grey"></q-icon>
                    Invoice waiting to be paid
                    <lnbits-payment-details
                      :payment="props.row"
                    ></lnbits-payment-details>
                    <div v-if="props.row.bolt11" class="text-center q-mb-lg">
                      <a :href="'lightning:' + props.row.bolt11">
                        <q-responsive :ratio="1" class="q-mx-xl">
                          <qrcode
                            :value="props.row.bolt11"
                            :options="{width: 340}"
                            class="rounded-borders"
                          ></qrcode>
                        </q-responsive>
                      </a>
                    </div>
                    <div class="row q-mt-lg">
                      <q-btn
                        outline
                        color="grey"
                        @click="copyText(props.row.bolt11)"
                        >Copy invoice</q-btn
                      >
                      <q-btn v-close-popup flat color="grey" class="q-ml-auto"
                        >Close</q-btn
                      >
                    </div>
                  </div>
                  <div v-else-if="props.row.isPaid && props.row.isIn">
                    <q-icon
                      size="18px"
                      :name="'call_received'"
                      :color="'green'"
                    ></q-icon>
                    Payment Received
                    <lnbits-payment-details
                      :payment="props.row"
                    ></lnbits-payment-details>
                  </div>
                  <div v-else-if="props.row.isPaid && props.row.isOut">
                    <q-icon
                      size="18px"
                      :name="'call_made'"
                      :color="'pink'"
                    ></q-icon>
                    Payment Sent
                    <lnbits-payment-details
                      :payment="props.row"
                    ></lnbits-payment-details>
                  </div>
                  <div v-else-if="props.row.isOut && props.row.pending">
                    <q-icon name="settings_ethernet" color="grey"></q-icon>
                    Outgoing payment pending
                    <lnbits-payment-details
                      :payment="props.row"
                    ></lnbits-payment-details>
                  </div>
                </div>
              </q-card>
            </q-dialog>
          </template>
          {% endraw %}
        </q-table>
      </q-card-section>
    </q-card>
  </div>

  {% if HIDE_API %}
  <div class="col-12 col-md-4 q-gutter-y-md">
    {% else %}
    <div class="col-12 col-md-5 q-gutter-y-md">
      <q-card>
        <q-card-section>
          <h6 class="text-subtitle1 q-mt-none q-mb-sm">
            {{ SITE_TITLE }} Wallet: <strong><em>{{ wallet.name }}</em></strong>
          </h6>
        </q-card-section>
        <q-card-section class="q-pa-none">
          <q-separator></q-separator>

          <q-list>
            {% include "core/_api_docs.html" %}
            <q-separator></q-separator>

            {% if wallet.lnurlwithdraw_full %}
            <q-expansion-item
              group="extras"
              icon="crop_free"
              label="Drain Funds"
            >
              <q-card>
                <q-card-section class="text-center">
                  <p>
                    This is an LNURL-withdraw QR code for slurping everything
                    from this wallet. Do not share with anyone.
                  </p>
                  <a href="lightning:{{wallet.lnurlwithdraw_full}}">
                    <qrcode
                      value="{{wallet.lnurlwithdraw_full}}"
                      :options="{width:240}"
                    ></qrcode>
                  </a>
                  <p>
                    It is compatible with <code>balanceCheck</code> and
                    <code>balanceNotify</code> so your wallet may keep pulling
                    the funds continuously from here after the first withdraw.
                  </p>
                </q-card-section>
              </q-card>
            </q-expansion-item>
            <q-separator></q-separator>
            {% endif %}

            <q-expansion-item
              group="extras"
              icon="settings_cell"
              label="Export to Phone with QR Code"
            >
              <q-card>
                <q-card-section class="text-center">
                  <p>
                    This QR code contains your wallet URL with full access. You
                    can scan it from your phone to open your wallet from there.
                  </p>
                  <qrcode
                    :value="'{{request.base_url}}' +'wallet?usr={{user.id}}&wal={{wallet.id}}'"
                    :options="{width:240}"
                  ></qrcode>
                </q-card-section>
              </q-card>
            </q-expansion-item>
            <q-separator></q-separator>
            <q-expansion-item group="extras" icon="edit" label="Rename wallet">
              <q-card>
                <q-card-section>
                  <div class="" style="max-width: 320px">
                    <q-input
                      filled
                      v-model.trim="newName"
                      label="Label"
                      dense="dense"
                      @update:model-value="(e) => console.log(e)"
                    />
                  </div>
                  <q-btn
                    :disable="!newName.length"
                    unelevated
                    class="q-mt-sm"
                    color="primary"
                    @click="updateWalletName()"
                    >Update name</q-btn
                  >
                </q-card-section>
              </q-card>
            </q-expansion-item>
            <q-separator></q-separator>
            <q-expansion-item
              group="extras"
              icon="remove_circle"
              label="Delete wallet"
            >
              <q-card>
                <q-card-section>
                  <p>
                    This whole wallet will be deleted, the funds will be
                    <strong>UNRECOVERABLE</strong>.
                  </p>
                  <q-btn
                    unelevated
                    color="red-10"
                    @click="deleteWallet('{{ wallet.id }}', '{{ user.id }}')"
                    >Delete wallet</q-btn
                  >
                </q-card-section>
              </q-card>
            </q-expansion-item>
          </q-list>
        </q-card-section>
      </q-card>
      {% endif %} {% if AD_SPACE %} {% for ADS in AD_SPACE %} {% set AD =
      ADS.split(';') %}
      <q-card>
        <a href="{{ AD[0] }}"
          ><img width="100%" src="{{ AD[1] }}"
        /></a> </q-card
      >{% endfor %} {% endif %}
    </div>
  </div>

  <q-dialog v-model="receive.show" @hide="closeReceiveDialog">
    {% raw %}
    <q-card
      v-if="!receive.paymentReq"
      class="q-pa-lg q-pt-xl lnbits__dialog-card"
    >
      <q-form @submit="createInvoice" class="q-gutter-md">
        <p v-if="receive.lnurl" class="text-h6 text-center q-my-none">
          <b>{{receive.lnurl.domain}}</b> is requesting an invoice:
        </p>
        {% endraw %} {% if LNBITS_DENOMINATION != 'sats' %}
        <q-input
          filled
          dense
          v-model.number="receive.data.amount"
          label="Amount ({{LNBITS_DENOMINATION}}) *"
          mask="#.##"
          fill-mask="0"
          reverse-fill-mask
          :min="receive.minMax[0]"
          :max="receive.minMax[1]"
          :readonly="receive.lnurl && receive.lnurl.fixed"
        ></q-input>
        {% else %}
        <q-select
          filled
          dense
          v-model="receive.unit"
          type="text"
          label="Unit"
          :options="receive.units"
        ></q-select>
        <q-input
          ref="setAmount"
          filled
          dense
          v-model.number="receive.data.amount"
          :label="'Amount (' + receive.unit + ') *'"
          :mask="receive.unit != 'sat' ? '#.##' : '#'"
          fill-mask="0"
          reverse-fill-mask
          :step="receive.unit != 'sat' ? '0.01' : '1'"
          :min="receive.minMax[0]"
          :max="receive.minMax[1]"
          :readonly="receive.lnurl && receive.lnurl.fixed"
        ></q-input>
        {% endif %}

        <q-input
          filled
          dense
          v-model.trim="receive.data.memo"
          label="Memo"
        ></q-input>
        {% raw %}
        <div v-if="receive.status == 'pending'" class="row q-mt-lg">
          <q-btn
            unelevated
            color="primary"
            :disable="receive.data.amount == null || receive.data.amount <= 0"
            type="submit"
          >
            <span v-if="receive.lnurl">
              Withdraw from {{receive.lnurl.domain}}
            </span>
            <span v-else> Create invoice </span>
          </q-btn>
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
        <q-spinner
          v-if="receive.status == 'loading'"
          color="primary"
          size="2.55em"
        ></q-spinner>
      </q-form>
    </q-card>
    <q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <div class="text-center q-mb-lg">
        <a :href="'lightning:' + receive.paymentReq">
          <q-responsive :ratio="1" class="q-mx-xl">
            <qrcode
              :value="receive.paymentReq"
              :options="{width: 340}"
              class="rounded-borders"
            ></qrcode>
          </q-responsive>
        </a>
      </div>
      <div class="row q-mt-lg">
        <q-btn outline color="grey" @click="copyText(receive.paymentReq)"
          >Copy invoice</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
      </div>
    </q-card>
    {% endraw %}
  </q-dialog>

  <q-dialog v-model="parse.show" @hide="closeParseDialog">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <div v-if="parse.invoice">
        <h6 v-if="'{{LNBITS_DENOMINATION}}' != 'sats'" class="q-my-none">
          {% raw %} {{ parseFloat(String(parse.invoice.fsat).replaceAll(",",
          "")) / 100 }} {% endraw %} {{LNBITS_DENOMINATION}} {% raw %}
        </h6>
        <h6 v-else class="q-my-none">
          {{ parse.invoice.fsat }}{% endraw %} {{LNBITS_DENOMINATION}} {% raw %}
        </h6>
        <q-separator class="q-my-sm"></q-separator>
        <p class="text-wrap">
          <strong>Description:</strong> {{ parse.invoice.description }}<br />
          <strong>Expire date:</strong> {{ parse.invoice.expireDate }}<br />
          <strong>Hash:</strong> {{ parse.invoice.hash }}
        </p>
        {% endraw %}
        <div v-if="canPay" class="row q-mt-lg">
          <q-btn unelevated color="primary" @click="payInvoice">Pay</q-btn>
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
        <div v-else class="row q-mt-lg">
          <q-btn unelevated disabled color="yellow" text-color="black"
            >Not enough funds!</q-btn
          >
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </div>
      <div v-else-if="parse.lnurlauth">
        {% raw %}
        <q-form @submit="authLnurl" class="q-gutter-md">
          <p class="q-my-none text-h6">
            Authenticate with <b>{{ parse.lnurlauth.domain }}</b>?
          </p>
          <q-separator class="q-my-sm"></q-separator>
          <p>
            For every website and for every LNbits wallet, a new keypair will be
            deterministically generated so your identity can't be tied to your
            LNbits wallet or linked across websites. No other data will be
            shared with {{ parse.lnurlauth.domain }}.
          </p>
          <p>Your public key for <b>{{ parse.lnurlauth.domain }}</b> is:</p>
          <p class="q-mx-xl">
            <code class="text-wrap"> {{ parse.lnurlauth.pubkey }} </code>
          </p>
          <div class="row q-mt-lg">
            <q-btn unelevated color="primary" type="submit">Login</q-btn>
            <q-btn v-close-popup flat color="grey" class="q-ml-auto"
              >Cancel</q-btn
            >
          </div>
        </q-form>
        {% endraw %}
      </div>
      <div v-else-if="parse.lnurlpay">
        {% raw %}
        <q-form @submit="payLnurl" class="q-gutter-md">
          <p v-if="parse.lnurlpay.fixed" class="q-my-none text-h6">
            <b>{{ parse.lnurlpay.domain }}</b> is requesting {{
            parse.lnurlpay.maxSendable | msatoshiFormat }}
            {{LNBITS_DENOMINATION}}
            <span v-if="parse.lnurlpay.commentAllowed > 0">
              <br />
              and a {{parse.lnurlpay.commentAllowed}}-char comment
            </span>
          </p>
          <p v-else class="q-my-none text-h6 text-center">
            <b>{{ parse.lnurlpay.targetUser || parse.lnurlpay.domain }}</b> is
            requesting <br />
            between <b>{{ parse.lnurlpay.minSendable | msatoshiFormat }}</b> and
            <b>{{ parse.lnurlpay.maxSendable | msatoshiFormat }}</b>
            {% endraw %} {{LNBITS_DENOMINATION}} {% raw %}
            <span v-if="parse.lnurlpay.commentAllowed > 0">
              <br />
              and a {{parse.lnurlpay.commentAllowed}}-char comment
            </span>
          </p>
          <q-separator class="q-my-sm"></q-separator>
          <div class="row">
            <p class="col text-justify text-italic">
              {{ parse.lnurlpay.description }}
            </p>
            <p class="col-4 q-pl-md" v-if="parse.lnurlpay.image">
              <q-img :src="parse.lnurlpay.image" />
            </p>
          </div>
          <div class="row">
            <div class="col">
              {% endraw %}
              <q-input
                filled
                dense
                v-model.number="parse.data.amount"
                type="number"
                label="Amount ({{LNBITS_DENOMINATION}}) *"
                :min="parse.lnurlpay.minSendable / 1000"
                :max="parse.lnurlpay.maxSendable / 1000"
                :readonly="parse.lnurlpay.fixed"
              ></q-input>
              {% raw %}
            </div>
            <div class="col-8 q-pl-md" v-if="parse.lnurlpay.commentAllowed > 0">
              <q-input
                filled
                dense
                v-model="parse.data.comment"
                :type="parse.lnurlpay.commentAllowed > 64 ? 'textarea' : 'text'"
                label="Comment (optional)"
                :maxlength="parse.lnurlpay.commentAllowed"
              ></q-input>
            </div>
          </div>
          <div class="row q-mt-lg">
            <q-btn unelevated color="primary" type="submit"
              >Send {{LNBITS_DENOMINATION}}</q-btn
            >
            <q-btn v-close-popup flat color="grey" class="q-ml-auto"
              >Cancel</q-btn
            >
          </div>
        </q-form>
        {% endraw %}
      </div>
      <div v-else>
        <q-form
          v-if="!parse.camera.show"
          @submit="decodeRequest"
          class="q-gutter-md"
        >
          <q-input
            filled
            dense
            v-model.trim="parse.data.request"
            type="textarea"
            label="Paste an invoice, payment request or lnurl code *"
          >
          </q-input>
          <div class="row q-mt-lg">
            <q-btn
              unelevated
              color="primary"
              :disable="parse.data.request == ''"
              type="submit"
              >Read</q-btn
            >
            <q-btn v-close-popup flat color="grey" class="q-ml-auto"
              >Cancel</q-btn
            >
          </div>
        </q-form>
        <div v-else>
          <q-responsive :ratio="1">
            <qrcode-stream
              @decode="decodeQR"
              class="rounded-borders"
            ></qrcode-stream>
          </q-responsive>
          <div class="row q-mt-lg">
            <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto">
              Cancel
            </q-btn>
          </div>
        </div>
      </div>
    </q-card>
  </q-dialog>

  <q-dialog v-model="parse.camera.show">
    <q-card class="q-pa-lg q-pt-xl">
      <div class="text-center q-mb-lg">
        <qrcode-stream
          @decode="decodeQR"
          class="rounded-borders"
        ></qrcode-stream>
      </div>
      <div class="row q-mt-lg">
        <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto"
          >Cancel</q-btn
        >
      </div>
    </q-card>
  </q-dialog>

  <q-dialog v-model="paymentsChart.show">
    <q-card class="q-pa-sm" style="width: 800px; max-width: unset">
      <q-card-section>
        <canvas ref="canvas" width="600" height="400"></canvas>
      </q-card-section>
    </q-card>
  </q-dialog>
  <q-tabs
    class="lt-md fixed-bottom left-0 right-0 bg-primary text-white shadow-2 z-top"
    active-class="px-0"
    indicator-color="transparent"
  >
    <q-tab
      icon="account_balance_wallet"
      label="Wallets"
      @click="g.visibleDrawer = !g.visibleDrawer"
    >
    </q-tab>
    <q-tab icon="content_paste" label="Paste" @click="showParseDialog"> </q-tab>
    <q-tab icon="file_download" label="Receive" @click="showReceiveDialog">
    </q-tab>

    <q-tab icon="photo_camera" label="Scan" @click="showCamera"> </q-tab>
  </q-tabs>

  <q-dialog v-model="disclaimerDialog.show">
    <q-card class="q-pa-lg">
      <h6 class="q-my-md text-primary">Warning</h6>
      <p>
        Login functionality to be released in a future update, for now,
        <strong
          >make sure you bookmark this page for future access to your
          wallet</strong
        >!
      </p>
      <p>
        This service is in BETA, and we hold no responsibility for people losing
        access to funds. {% if service_fee > 0 %} To encourage you to run your
        own LNbits installation, any balance on {% raw %}{{
        disclaimerDialog.location.host }}{% endraw %} will incur a charge of
        <strong>{{ service_fee }}% service fee</strong> per week. {% endif %}
      </p>
      <div class="row q-mt-lg">
        <q-btn
          outline
          color="grey"
          @click="copyText(disclaimerDialog.location.href)"
          >Copy wallet URL</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto"
          >I understand</q-btn
        >
      </div>
    </q-card>
  </q-dialog>
  {% endblock %}
</div>
