{% extends "base.html" %}
<!---->
{% from "macros.jinja" import window_vars with context %}
<!---->
{% block scripts %} {{ window_vars(user, wallet) }}
<script src="{{ static_url_for('static', 'js/wallet.js') }}"></script>
{% endblock %}
<!---->
{% block title %}{{ wallet_name }} - {{ SITE_TITLE }} {% endblock %}
<!---->
{% block page %}
<div class="row q-col-gutter-md">
  {% if HIDE_API and AD_SPACE %}
  <div class="col-12 col-md-8 q-gutter-y-md">
    {% elif HIDE_API %}
    <div class="col-12 q-gutter-y-md">
      {% else %}
      <div
        class="col-12 col-md-7 q-gutter-y-md"
        :style="$q.screen.lt.md ? {
        position: mobileSimple ? 'fixed !important': ''
      , top: mobileSimple ? '50% !important': ''
      , left: mobileSimple ? '50% !important': ''
      , transform: mobileSimple ? 'translate(-50%, -50%) !important': ''
    } : ''"
      >
        {% endif %}
        <div class="row">
          <div class="col-lg-9 col-12">
        <q-card
          :style="$q.screen.lt.md ? {
            background: $q.screen.lt.md ? 'none !important': ''
            , boxShadow: $q.screen.lt.md ? 'none !important': ''
            , width: $q.screen.lt.md && mobileSimple ? '90% !important': ''
          } : ''"
        >
          <q-card-section>
            <div class="row">
              <div class="col-1" style="max-width: 30px">
                <q-btn
                  v-if="update.currency"
                  @click="swapBalancePriority"
                  style="height: 50px"
                  class="q-mt-lg"
                  flat
                  dense
                  icon="swap_vert"
                ></q-btn>
              </div>
              <div class="col-11">
                <div
                  class="column"
                  :class="{
                    'q-pt-sm': update.currency,
                    'q-pt-lg': !update.currency
                  }"
                  v-if="!isPrioritySwapped"
                  style="height: 90px"
                >
                  <div class="col-7">
                    <div class="row">
                      <div class="col-auto">
                        <div class="text-h3 q-my-none text-no-wrap">
                          <strong v-text="formattedBalance"></strong>
                          <small> {{LNBITS_DENOMINATION}}</small>
                        </div>
                      </div>
                      <div class="col-auto">
                        <lnbits-update-balance
                          v-if="$q.screen.lt.lg"
                          :wallet_id="this.g.wallet.id"
                          :callback="updateBalanceCallback"
                          :small_btn="true"
                        ></lnbits-update-balance>
                      </div>
                    </div>
                  </div>
                  <div class="col-2">
                    <div v-if="update.currency">
                      <span
                        class="text-h5 text-italic"
                        v-text="formattedFiatAmount"
                        style="opacity: 0.75"
                      ></span>
                    </div>
                  </div>
                </div>

                <div
                  class="column"
                  v-if="isPrioritySwapped"
                  :class="{
                    'q-pt-sm': update.currency,
                    'q-pt-lg': !update.currency
                  }"
                  style="height: 100px"
                >
                  <div class="col-7">
                    <div class="row">
                      <div class="col-auto">
                        <div
                          v-if="update.currency"
                          class="text-h3 q-my-none text-no-wrap"
                        >
                          <strong v-text="formattedFiatAmount"></strong>
                        </div>
                      </div>
                      <div class="col-auto">
                        <lnbits-update-balance
                          v-if="$q.screen.lt.lg"
                          :wallet_id="this.g.wallet.id"
                          :callback="updateBalanceCallback"
                          :small_btn="true"
                        ></lnbits-update-balance>
                      </div>
                    </div>
                  </div>
                  <div class="col-2">
                    <span
                      class="text-h5 text-italic"
                      style="opacity: 0.75"
                      v-text="formattedBalance + ' {{LNBITS_DENOMINATION}}'"
                    >
                    </span>
                  </div>
                </div>

                <div
                  class="absolute-right q-pa-md"
                  v-if="$q.screen.gt.md && update.currency"
                >
                  <div class="text-bold text-italic">BTC Price</div>
                  <span
                    class="text-bold text-italic"
                    v-text="formattedExchange"
                  ></span>
                </div>
                <q-btn
                  v-if="$q.screen.lt.md"
                  @click="mobileSimple = !mobileSimple"
                  color="primary"
                  class="q-ml-xl absolute-right"
                  dense
                  size="sm"
                  style="height: 20px; margin-top: 75px"
                  flat
                  :icon="mobileSimple ? 'unfold_more' : 'unfold_less'"
                  :label="mobileSimple ? $t('more') : $t('less')"
                ></q-btn>
              </div>
            </div>
          </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="q-mr-md"
                @click="showParseDialog"
                :label="$t('paste_request')"
              ></q-btn>
              <q-btn
                unelevated
                color="primary"
                class="q-mr-md"
                @click="showReceiveDialog"
                :label="$t('create_invoice')"
              ></q-btn>
              <q-btn unelevated color="secondary" icon="qr_code_scanner">
                <q-tooltip
                  ><span v-text="$t('camera_tooltip')"></span
                ></q-tooltip>
              </q-btn>
              <lnbits-update-balance
                v-if="$q.screen.gt.md"
                :wallet_id="this.g.wallet.id"
                :callback="updateBalanceCallback"
                :small_btn="false"
              ></lnbits-update-balance>
            </div>
          </div>
        </q-card>
      </div>
      <div class="col-3" v-show="$q.screen.gt.md">
        <q-card class="q-ml-md q-pa-none" style="height: 172px">
          <q-card-section style="padding: 0">
            <canvas
              ref="transactionChart"
              style="
                height: 172px;
                width: 100%;
                margin: 0;
                padding: 0;
                transform: translate(-2%, 4%);
              "
            ></canvas>
          </q-card-section>
        </q-card>
        </div>
        </div>
        <q-card
          :style="
          $q.screen.lt.md
            ? {
                background: $q.screen.lt.md ? 'none !important' : '',
                boxShadow: $q.screen.lt.md ? 'none !important' : '',
                marginTop: $q.screen.lt.md ? '0px !important' : ''
              }
            : ''
        "
        >
          <q-card-section>
            <payment-list
              :update="updatePayments"
              :wallet="this.g.wallet"
              :mobile-simple="mobileSimple"
            ></payment-list>
          </q-card-section>
        </q-card>
      </div>
      {% if HIDE_API %}
      <div class="col-12 col-md-4 q-gutter-y-md">
        {% else %}
        <div v-if="!mobileSimple || $q.screen.gt.sm" 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>
                {% if wallet.lnurlwithdraw_full %}
                <q-expansion-item
                  group="extras"
                  icon="crop_free"
                  :label="$t('drain_funds')"
                >
                  <q-card>
                    <q-card-section class="text-center">
                      <a href="lightning:{{wallet.lnurlwithdraw_full}}">
                        <lnbits-qrcode
                          :value="lightning:{{wallet.lnurlwithdraw_full}}"
                        ></lnbits-qrcode>
                      </a>
                      <p v-text="$t('drain_funds_desc')"></p>
                    </q-card-section>
                  </q-card>
                </q-expansion-item>
                <q-separator></q-separator>
                {% endif %}

                <q-expansion-item
                  group="extras"
                  icon="settings_cell"
                  :label="$t('export_to_phone')"
                >
                  <q-card>
                    <q-card-section class="text-center">
                      <p v-text="$t('export_to_phone_desc')"></p>
                      <lnbits-qrcode :value="exportUrl"></lnbits-qrcode>
                    </q-card-section>
                    <span v-text="exportWalletQR"></span>
                    <q-card-actions class="flex-center q-pb-md">
                      <q-btn
                        outline
                        color="grey"
                        :label="$t('copy_wallet_url')"
                        @click="copyText(exportUrl)"
                      ></q-btn>
                    </q-card-actions>
                  </q-card>
                </q-expansion-item>
                <q-separator></q-separator>
                <q-expansion-item
                  group="extras"
                  icon="edit"
                  :label="$t('rename_wallet')"
                >
                  <q-card>
                    <q-card-section>
                      <div class="" style="max-width: 320px">
                        <q-input
                          filled
                          v-model.trim="update.name"
                          label="Name"
                          dense
                        />
                      </div>
                      <q-btn
                        :disable="!update.name.length"
                        unelevated
                        class="q-mt-sm"
                        color="primary"
                        :label="$t('update_name')"
                        @click="updateWallet({ name: update.name })"
                      ></q-btn>
                    </q-card-section>
                  </q-card>
                </q-expansion-item>
                <q-separator></q-separator>
                <q-expansion-item
                  group="extras"
                  icon="attach_money"
                  :label="$t('fiat_tracking')"
                >
                  <q-card>
                    <q-card-section>
                      <div style="max-width: 360px">
                        <div class="row">
                          <div class="col-auto">
                            <q-toggle
                              v-model="fiatTracking"
                              color="primary"
                              @update:model-value="handleFiatTracking"
                            ></q-toggle>
                          </div>
                          <div class="col">
                            <q-select
                              filled
                              dense
                              v-model="update.currency"
                              type="text"
                              :label="!fiatTracking ? 'Disabled' : $t('currency')"
                              :options="receive.units.filter((u) => u !== 'sat')"
                              :disable="!fiatTracking"
                            ></q-select>
                          </div>
                        </div>
                      </div>
                    </q-card-section>
                  </q-card>
                </q-expansion-item>

                <q-separator></q-separator>
                <q-expansion-item
                  group="extras"
                  icon="remove_circle"
                  :label="$t('delete_wallet')"
                >
                  <q-card>
                    <q-card-section>
                      <p v-text="$t('delete_wallet_desc')"></p>
                      <q-btn
                        unelevated
                        color="red-10"
                        @click="deleteWallet()"
                        :label="$t('delete_wallet')"
                      ></q-btn>
                    </q-card-section>
                  </q-card>
                </q-expansion-item>

                <q-separator></q-separator>
                {% include "core/_api_docs.html" %}
              </q-list>
            </q-card-section>
          </q-card>
          {% endif %} {% if AD_SPACE %}
          <q-card>
            <q-card-section>
              <h6 class="text-subtitle1 q-mt-none q-mb-sm">
                {{ AD_SPACE_TITLE }}
              </h6>
            </q-card-section>
            {% for ADS in AD_SPACE %} {% set AD = ADS.split(";") %}

            <q-card-section class="q-pa-none">
              <a
                style="display: inline-block"
                href="{{ AD[0] }}"
                class="q-ml-md q-mb-xs q-mr-md"
                style="max-width: 80%"
              >
                <img
                  style="max-width: 100%; height: auto"
                  v-if="($q.dark.isActive)"
                  src="{{ AD[1] }}"
                />
                <img
                  style="max-width: 100%; height: auto"
                  v-else
                  src="{{ AD[2] }}"
                />
              </a> </q-card-section
            >{% endfor %}
          </q-card>
          {% endif %}
        </div>
      </div>

      <q-dialog
        v-model="receive.show"
        position="top"
        @hide="onReceiveDialogHide"
      >
        <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 v-text="receive.lnurl.domain"></b> is requesting an invoice:
            </p>
            {% if LNBITS_DENOMINATION != 'sats' %}
            <q-input
              filled
              dense
              v-model.number="receive.data.amount"
              :label="$t('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="$t('unit')"
              :options="receive.units"
            ></q-select>
            <q-input
              ref="setAmount"
              filled
              :pattern="receive.unit === 'sat' ? '\\d*' : '\\d*\\.?\\d*'"
              inputmode="numeric"
              dense
              v-model.number="receive.data.amount"
              :label="$t('amount') + ' (' + receive.unit + ') *'"
              :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="$t('memo')"
            ></q-input>
            <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"
                  v-text="$t('withdraw_from') + receive.lnurl.domain"
                ></span>
                <span v-else v-text="$t('create_invoice')"></span>
              </q-btn>
              <q-btn
                v-close-popup
                flat
                color="grey"
                class="q-ml-auto"
                :label="$t('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-if="receive.paymentReq && receive.lnurl == null"
          class="q-pa-lg q-pt-xl lnbits__dialog-card"
        >
          <div class="text-center q-mb-lg">
            <a :href="'lightning:' + receive.paymentReq">
              <lnbits-qrcode
                :value="'lightning:' + receive.paymentReq.toUpperCase()"
              ></lnbits-qrcode>
            </a>
          </div>
          <div class="text-center">
            <h3 class="q-my-md">
              <span v-text="formattedAmount"></span>
            </h3>
            <h5 v-if="receive.unit != 'sat'" class="q-mt-none q-mb-sm">
              <span v-text="formattedSatAmount"></span>
            </h5>
            <q-chip v-if="hasNfc" outline square color="positive">
              <q-avatar
                icon="nfc"
                color="positive"
                text-color="white"
              ></q-avatar>
              NFC supported
            </q-chip>
            <span v-else class="text-caption text-grey">NFC not supported</span>
          </div>
          <div class="row q-mt-lg">
            <q-btn
              outline
              color="grey"
              @click="copyText(receive.paymentReq)"
              :label="$t('copy_invoice')"
            ></q-btn>
            <q-btn
              v-close-popup
              flat
              color="grey"
              class="q-ml-auto"
              :label="$t('close')"
            ></q-btn>
          </div>
        </q-card>
      </q-dialog>

      <q-dialog v-model="parse.show" @hide="closeParseDialog" position="top">
        <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"
              v-text="parseFloat(String(parse.invoice.fsat).replaceAll(',', '')) / 100 + '{{LNBITS_DENOMINATION}}'"
            ></h6>
            <h6
              v-else
              class="q-my-none"
              v-text="parse.invoice.fsat + '{{LNBITS_DENOMINATION}}'"
            ></h6>
            <q-separator class="q-my-sm"></q-separator>
            <p class="text-wrap">
              <strong v-text="$t('memo') + ': '"></strong>
              <span v-text="parse.invoice.description"></span>
              <br />
              <strong>Expire date: </strong>
              <span v-text="parse.invoice.expireDate"></span>
              <br />
              <strong>Hash: </strong>
              <span v-text="parse.invoice.hash"></span>
            </p>
            <div v-if="canPay" class="row q-mt-lg">
              <q-btn
                unelevated
                color="primary"
                @click="payInvoice"
                :label="$t('pay')"
              ></q-btn>
              <q-btn
                v-close-popup
                flat
                color="grey"
                class="q-ml-auto"
                :label="$t('cancel')"
              ></q-btn>
            </div>
            <div v-else class="row q-mt-lg">
              <q-btn
                :label="$t('not_enough_funds')"
                unelevated
                disabled
                color="yellow"
                text-color="black"
              ></q-btn>
              <q-btn
                v-close-popup
                flat
                color="grey"
                class="q-ml-auto"
                :label="$t('cancel')"
              ></q-btn>
            </div>
          </div>
          <div v-else-if="parse.lnurlauth">
            <q-form @submit="authLnurl" class="q-gutter-md">
              <p class="q-my-none text-h6">
                Authenticate with <b v-text="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
                <span v-text="parse.lnurlauth.domain"></span>.
              </p>
              <p>
                Your public key for <b v-text="parse.lnurlauth.domain"></b> is:
              </p>
              <p class="q-mx-xl">
                <code class="text-wrap" v-text="parse.lnurlauth.pubkey"></code>
              </p>
              <div class="row q-mt-lg">
                <q-btn
                  unelevated
                  color="primary"
                  type="submit"
                  :label="$t('login')"
                ></q-btn>
                <q-btn
                  :label="$t('cancel')"
                  v-close-popup
                  flat
                  color="grey"
                  class="q-ml-auto"
                ></q-btn>
              </div>
            </q-form>
          </div>
          <div v-else-if="parse.lnurlpay">
            <q-form @submit="payLnurl" class="q-gutter-md">
              <p v-if="parse.lnurlpay.fixed" class="q-my-none text-h6">
                <b v-text="parse.lnurlpay.domain"></b> is requesting
                <span
                  v-text="msatoshiFormat(parse.lnurlpay.maxSendable)"
                ></span>
                <span v-text="'{{LNBITS_DENOMINATION}}'"></span>
                <span v-if="parse.lnurlpay.commentAllowed > 0">
                  <br />
                  and a
                  <span v-text="parse.lnurlpay.commentAllowed"></span>-char
                  comment
                </span>
              </p>
              <p v-else class="q-my-none text-h6 text-center">
                <b
                  v-text="parse.lnurlpay.targetUser || parse.lnurlpay.domain"
                ></b>
                is requesting <br />
                between
                <b v-text="msatoshiFormat(parse.lnurlpay.minSendable)"></b> and
                <b v-text="msatoshiFormat(parse.lnurlpay.maxSendable)"></b>
                <span v-text="'{{LNBITS_DENOMINATION}}'"></span>
                <span v-if="parse.lnurlpay.commentAllowed > 0">
                  <br />
                  and a
                  <span v-text="parse.lnurlpay.commentAllowed"></span>-char
                  comment
                </span>
              </p>
              <q-separator class="q-my-sm"></q-separator>
              <div class="row">
                <p
                  class="col text-justify text-italic"
                  v-text="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">
                  <q-select
                    filled
                    dense
                    v-if="!parse.lnurlpay.fixed"
                    v-model="parse.data.unit"
                    type="text"
                    :label="$t('unit')"
                    :options="receive.units"
                  ></q-select>
                  <br />
                  <q-input
                    ref="setAmount"
                    filled
                    dense
                    v-model.number="parse.data.amount"
                    :label="$t('amount') + ' (' + parse.data.unit + ') *'"
                    :mask="parse.data.unit != 'sat' ? '#.##' : '#'"
                    :step="parse.data.unit != 'sat' ? '0.01' : '1'"
                    fill-mask="0"
                    reverse-fill-mask
                    :min="parse.lnurlpay.minSendable / 1000"
                    :max="parse.lnurlpay.maxSendable / 1000"
                    :readonly="parse.lnurlpay && parse.lnurlpay.fixed"
                  ></q-input>
                </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</q-btn>
                <q-btn
                  :label="$t('cancel')"
                  v-close-popup
                  flat
                  color="grey"
                  class="q-ml-auto"
                ></q-btn>
              </div>
            </q-form>
          </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="$t('paste_invoice_label')"
                ref="textArea"
              >
              </q-input>
              <div class="row q-mt-lg">
                <q-btn
                  unelevated
                  color="primary"
                  :disable="parse.data.request == ''"
                  type="submit"
                  :label="$t('read')"
                ></q-btn>
                <q-icon
                  name="content_paste"
                  color="grey"
                  class="q-mt-xs q-ml-sm q-mr-auto"
                  v-if="parse.copy.show"
                  @click="pasteToTextArea"
                >
                  <q-tooltip>
                    <span v-text="$t('paste_from_clipboard')"></span>
                  </q-tooltip>
                </q-icon>
                <q-btn
                  v-close-popup
                  flat
                  color="grey"
                  class="q-ml-auto"
                  :label="$t('cancel')"
                ></q-btn>
              </div>
            </q-form>
            <div v-else>
              <q-responsive :ratio="1">
                <qrcode-stream
                  @detect="decodeQR"
                  @camera-on="onInitQR"
                  class="rounded-borders"
                ></qrcode-stream>
              </q-responsive>
              <div class="row q-mt-lg">
                <q-btn
                  :label="$t('cancel')"
                  @click="closeCamera"
                  flat
                  color="grey"
                  class="q-ml-auto"
                >
                </q-btn>
              </div>
            </div>
          </div>
        </q-card>
      </q-dialog>

      <q-dialog v-model="parse.camera.show" position="top">
        <q-card class="q-pa-lg q-pt-xl">
          <div class="text-center q-mb-lg">
            <qrcode-stream
              @detect="decodeQR"
              @camera-on="onInitQR"
              class="rounded-borders"
            ></qrcode-stream>
          </div>
          <div class="row q-mt-lg">
            <q-btn
              @click="closeCamera"
              flat
              color="grey"
              class="q-ml-auto"
              :label="$t('cancel')"
            ></q-btn>
          </div>
        </q-card>
      </q-dialog>
      <div
        class="lt-md fixed-bottom left-0 right-0 bg-primary text-white shadow-2 z-top"
      >
        <q-tabs
          active-class="px-0"
          indicator-color="transparent"
          align="justify"
        >
          <q-tab
            icon="file_download"
            @click="showReceiveDialog"
            :label="$t('receive')"
          >
          </q-tab>

          <q-tab
            @click="showParseDialog"
            icon="file_upload"
            :label="$t('send')"
          >
          </q-tab>
        </q-tabs>
        <q-btn
          round
          size="35px"
          unelevated
          icon="qr_code_scanner"
          @click="showCamera"
          class="text-white bg-primary z-top vertical-bottom absolute-center absolute"
        >
        </q-btn>
      </div>
      <q-dialog v-model="disclaimerDialog.show" position="top">
        <q-card class="q-pa-lg">
          <h6
            class="q-my-md text-primary"
            v-text="$t('disclaimer_dialog_title')"
          ></h6>
          <p class="whitespace-pre-line" v-text="$t('disclaimer_dialog')"></p>
          <div class="row q-mt-lg">
            <q-btn
              outline
              color="grey"
              type="a"
              href="/account"
              :label="$t('my_account')"
            ></q-btn>
            <q-btn
              v-close-popup
              flat
              color="grey"
              class="q-ml-auto"
              :label="$t('i_understand')"
            ></q-btn>
          </div>
        </q-card>
      </q-dialog>
      {% endblock %}
    </div>
  </div>
</div>
