{% 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">
    <wallet-config
      :total="utxos.total"
      :config="config"
      :adminkey="g.user.wallets[0].adminkey"
    ></wallet-config>

    <wallet-list
      :adminkey="g.user.wallets[0].adminkey"
      :inkey="g.user.wallets[0].inkey"
      :sats-denominated="config.data.sats_denominated"
      :addresses="addresses"
      @accounts-update="updateAccounts"
      @new-receive-address="showAddressDetails"
    >
    </wallet-list>

    {% raw %}
    <q-card>
      <div class="row q-pt-sm q-pb-sm items-center no-wrap q-mb-md">
        <div class="col-3 q-pl-md">
          <q-btn
            unelevated
            class="btn-full"
            color="secondary"
            @click="scanAllAddresses"
            :disabled="scan.scanning == true"
            >Scan Blockchain</q-btn
          >
        </div>
        <div class="col-6">
          <q-spinner
            v-if="scan.scanning == true"
            color="primary"
            size="2.55em"
          ></q-spinner>
        </div>
        <div class="col-3 q-pr-md">
          <q-btn
            unelevated
            color="secondary"
            class="btn-full"
            @click="goToPaymentView"
            :disabled="scan.scanning == true"
            >New Payment</q-btn
          >
        </div>
      </div>

      <div v-if="scan.scanning == true">
        <q-linear-progress
          :value="scan.scanIndex / scan.scanCount"
          size="10px"
          color="primary"
          class="q-mt-sm"
        ></q-linear-progress>
      </div>
    </q-card>

    <q-card>
      <q-card-section>
        <q-tabs v-model="tab" no-caps class="bg-dark text-white shadow-2">
          <q-tab name="addresses" label="Addresses"></q-tab>
          <q-tab name="history" label="History"></q-tab>
          <q-tab name="utxos" label="Coins"></q-tab>
        </q-tabs>
        <q-tab-panels v-model="tab">
          <q-tab-panel name="addresses">
            <address-list
              ref="addressList"
              :accounts="walletAccounts"
              :mempool_endpoint="config.data.mempool_endpoint"
              :sats-denominated="config.data.sats_denominated"
              @update:addresses="handleAddressesUpdated"
              @scan:address="scanAddress"
              @show-address-details="showAddressDetails"
              :inkey="g.user.wallets[0].inkey"
            >
            </address-list>
          </q-tab-panel>
          <q-tab-panel name="history">
            <history
              :history="history"
              :mempool_endpoint="config.data.mempool_endpoint"
              :sats-denominated="config.data.sats_denominated"
            ></history>
          </q-tab-panel>
          <q-tab-panel name="utxos">
            <div class="row items-center no-wrap q-mb-md">
              <div class="col">
                <q-toggle
                  label="New Payment"
                  color="secodary"
                  v-model="payment.show"
                  @input="initPaymentData()"
                ></q-toggle>
              </div>
              <div class="col-auto"></div>
            </div>

            <q-form @submit="createPsbt" class="q-gutter-md">
              <q-card v-if="payment.show">
                <q-card-section>
                  <div class="row items-center no-wrap q-mb-md">
                    <div class="col">
                      <q-table
                        flat
                        dense
                        hide-header
                        :data="payment.data"
                        :columns="paymentTable.columns"
                        :pagination.sync="paymentTable.pagination"
                      >
                        <template v-slot:body="props">
                          <q-tr :props="props">
                            <div class="row no-wrap">
                              <div class="col-1">
                                <q-btn
                                  flat
                                  dense
                                  size="l"
                                  @click="deletePaymentAddress(props.row)"
                                  icon="cancel"
                                  color="pink"
                                  class="q-mt-sm"
                                ></q-btn>
                              </div>
                              <div class="col-7 q-pr-lg">
                                <q-input
                                  filled
                                  dense
                                  v-model.trim="props.row.address"
                                  type="text"
                                  label="Address"
                                  :rules="[val => !!val || 'Field is required']"
                                ></q-input>
                              </div>
                              <div class="col-3 q-pr-lg">
                                <q-input
                                  filled
                                  dense
                                  v-model.number="props.row.amount"
                                  type="number"
                                  step="1"
                                  label="Amount (sats)"
                                  :rules="[val => !!val || 'Field is required', val => +val > DUST_LIMIT || 'Amount to small (below dust limit)'] "
                                ></q-input>
                              </div>
                              <div class="col-1">
                                <q-btn
                                  outline
                                  color="grey"
                                  @click="sendMaxToAddress(props.row)"
                                  >Max</q-btn
                                >
                              </div>
                            </div>
                          </q-tr>
                        </template>
                        <template v-slot:bottom-row>
                          <q-tr>
                            <q-td colspan="100%">
                              <div class="row items-center no-wrap">
                                <div class="col-3 q-pr-lg">
                                  <q-btn
                                    outline
                                    color="grey"
                                    @click="addPaymentAddress"
                                    >Add Send Address</q-btn
                                  >
                                </div>
                                <div class="col-4 q-pr-lg"></div>
                                <div class="col-5">
                                  <div class="float-right">
                                    <span class="text-weight-bold"
                                      >Payed Amount:
                                    </span>
                                    <q-badge
                                      class="text-subtitle2 q-ml-lg"
                                      color="blue"
                                    >
                                      {{satBtc(getTotalPaymentAmount())}}
                                    </q-badge>
                                  </div>
                                </div>
                              </div>
                            </q-td>
                          </q-tr>
                        </template>
                      </q-table>
                    </div>
                  </div>
                  <div
                    v-if="payment.changeAmount < 0"
                    class="row items-center no-wrap q-mb-md"
                  >
                    <div class="col-12">
                      <q-badge
                        class="text-subtitle2 float-left"
                        color="yellow"
                        text-color="black"
                      >
                        The payed amount is higher than the selected amount!
                      </q-badge>
                    </div>
                  </div>
                </q-card-section>
              </q-card>
              <utxo-list
                :utxos="utxos.data"
                :mempool_endpoint="config.data.mempool_endpoint"
                :sats-denominated="config.data.sats_denominated"
              ></utxo-list>
              <div v-if="payment.show" class="row items-center no-wrap q-mb-md">
                <div class="col">
                  <q-toggle
                    label="Show Advanced"
                    color="secodary"
                    v-model="payment.showAdvanced"
                  ></q-toggle>
                </div>
              </div>
              <q-card v-show="payment.show && payment.showAdvanced"
                ><q-card-section>
                  <div class="row items-center no-wrap q-mb-md">
                    <div class="col-2 q-pr-lg">Change Account:</div>
                    <div class="col-3 q-pr-lg">
                      <q-select
                        filled
                        dense
                        emit-value
                        v-model="payment.changeWallet"
                        :options="walletAccounts"
                        @input="selectChangeAddress"
                        :rules="[val => !!val || 'Field is required']"
                        label="Wallet Account"
                      ></q-select>
                    </div>
                    <div class="col-7">
                      <q-input
                        filled
                        dense
                        readonly
                        v-model.trim="payment.changeAddress.address"
                        :rules="[val => !!val || 'Field is required']"
                        type="text"
                        label="Change Address"
                      ></q-input>
                    </div>
                  </div>
                  <div class="row items-center no-wrap q-mb-md">
                    <div class="col-2 q-pr-lg">Fee Rate:</div>
                    <div class="col-3 q-pr-lg">
                      <q-input
                        filled
                        dense
                        v-model.number="payment.feeRate"
                        :rules="[val => !!val || 'Field is required']"
                        type="number"
                        label="sats/vbyte"
                      ></q-input>
                    </div>
                    <div class="col-7">
                      <q-slider
                        v-model="payment.feeRate"
                        color="orange"
                        markers
                        snap
                        label
                        label-always
                        :label-value="getFeeRateLabel(payment.feeRate)"
                        :min="1"
                        :max="payment.recommededFees.fastestFee"
                      />
                    </div>
                  </div>
                  <div
                    v-if="payment.feeRate < payment.recommededFees.hourFee || payment.feeRate > payment.recommededFees.fastestFee"
                    class="row items-center no-wrap q-mb-md"
                  >
                    <div class="col-2 q-pr-lg"></div>
                    <div class="col-10 q-pr-lg">
                      <q-badge
                        v-if="payment.feeRate < payment.recommededFees.hourFee"
                        color="pink"
                        size="lg"
                      >
                        Warning! The fee is too low. The transaction might take
                        a long time to confirm.
                      </q-badge>
                      <q-badge
                        v-if="payment.feeRate > payment.recommededFees.fastestFee"
                        color="pink"
                      >
                        Warning! The fee is too high. You might be overpaying
                        for this transaction.
                      </q-badge>
                    </div>
                  </div>

                  <div class="row items-center no-wrap q-mb-md">
                    <div class="col-2 q-pr-lg">Fee:</div>
                    <div class="col-3 q-pr-lg">{{computeFee()}} sats</div>
                    <div class="col-7 q-pr-lg">
                      <q-btn
                        outline
                        dense
                        size="md"
                        icon="refresh"
                        color="grey"
                        @click="refreshRecommendedFees()"
                        >Refresh Fee Rates</q-btn
                      >
                    </div>
                  </div>
                </q-card-section></q-card
              >
              <q-card v-if="payment.show"
                ><q-card-section>
                  <div class="row items-center no-wrap q-mb-md">
                    <div class="col">
                      <q-table
                        :columns="summaryTable.columns"
                        :data="summary.data"
                        hide-bottom
                      >
                        <template v-slot:body="props">
                          <q-tr :props="props">
                            <q-td key="totalInputs" :props="props">
                              <q-badge class="text-subtitle2" color="green">
                                {{satBtc(getTotalSelectedUtxoAmount())}}
                              </q-badge>
                            </q-td>
                            <q-td key="totalOutputs" :props="props">
                              <q-badge class="text-subtitle2" color="blue">
                                {{satBtc(getTotalPaymentAmount())}}
                              </q-badge>
                            </q-td>
                            <q-td key="fees" :props="props">
                              <q-badge class="text-subtitle2" color="orange">
                                {{satBtc(computeFee())}}
                              </q-badge>
                            </q-td>
                            <q-td key="change" :props="props">
                              <q-badge
                                v-if="payment.changeAmount >= 0"
                                class="text-subtitle2"
                                color="green"
                              >
                                {{payment.changeAmount ?
                                satBtc(payment.changeAmount): 'no change'}}
                              </q-badge>
                              <q-badge
                                v-if="payment.changeAmount > 0 && payment.changeAmount < DUST_LIMIT"
                                color="red"
                              >
                                Below dust limit. Will be used as feee.
                              </q-badge>
                            </q-td>
                          </q-tr>
                        </template>
                      </q-table>
                    </div>
                  </div>

                  <div class="row items-center no-wrap q-mb-md">
                    <div class="col-3 q-pr-lg">
                      <q-btn
                        unelevated
                        color="secondary"
                        type="submit"
                        class="btn-full"
                        >Check Tx</q-btn
                      >
                    </div>
                    <div class="col-9">
                      <q-input v-model="payment.psbtBase64" filled />
                    </div>
                  </div>
                  <q-separator
                    v-if="payment.psbtBase64"
                    class="q-mb-md"
                  ></q-separator>
                  <div
                    v-if="payment.psbtBase64"
                    class="row items-center no-wrap q-mb-md"
                  >
                    <div class="col-3 q-pr-lg">
                      <q-btn-dropdown
                        class="btn-full"
                        color="secondary"
                        label="Sign With"
                      >
                        <q-list>
                          <q-item
                            clickable
                            v-close-popup
                            @click="payment.signMode = 'serial-port'"
                          >
                            <q-item-section>
                              <q-item-label>Serial Port Device</q-item-label>
                              <q-item-label caption
                                >Connect via Serial Port and sign.</q-item-label
                              >
                            </q-item-section>
                          </q-item>

                          <q-item clickable disabled v-close-popup>
                            <q-item-section>
                              <q-item-label>Animated QR Code</q-item-label>
                              <q-item-label caption
                                >Share and Scan using animated QR
                                codes.</q-item-label
                              >
                            </q-item-section>
                          </q-item>
                        </q-list>
                      </q-btn-dropdown>
                    </div>
                    <div class="col-9">
                      <q-option-group
                        v-model="payment.signMode"
                        :options="payment.signModes"
                        color="primary"
                        inline
                      ></q-option-group>
                    </div>
                  </div>
                  <q-separator
                    v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
                    class="q-mb-md"
                  ></q-separator>
                  <div
                    v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
                    class="row items-center no-wrap q-mb-md q-mt-lg"
                  >
                    <div class="col-3 q-pr-lg">
                      <q-btn
                        v-if="!serial.selectedPort"
                        @click="openSerialPort()"
                        unelevated
                        color="secondary"
                        class="btn-full"
                        >Connect</q-btn
                      >
                      <q-btn
                        v-if="serial.selectedPort"
                        @click="closeSerialPort()"
                        outline
                        color="gray"
                        class="btn-full"
                        >Disconnect</q-btn
                      >
                    </div>
                    <div class="col-3">
                      <q-toggle
                        label="Advanced"
                        disabled
                        color="secodary float-left"
                        v-model="serial.showAdvancedConfig"
                      ></q-toggle>
                    </div>
                    <div class="col-6"></div>
                  </div>
                  <q-separator
                    v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
                    class="q-mb-md"
                  ></q-separator>
                  <div
                    v-if="serial.selectedPort && payment.psbtBase64 && payment.signMode === 'serial-port'"
                    class="row items-center no-wrap q-mb-md q-mt-lg"
                  >
                    <div class="col-3 q-pr-lg">
                      <q-btn-dropdown
                        split
                        class="btn-full"
                        color="secondary"
                        :label="hww.authenticated ? 'Sign Tx' : 'Login'"
                        @click="hwwExecuteDefaultCommand()"
                      >
                        <q-list>
                          <q-item
                            v-if="!hww.authenticated"
                            clickable
                            v-close-popup
                            @click="hwwShowPasswordDialog()"
                          >
                            <q-item-section>
                              <q-item-label>Login</q-item-label>
                              <q-item-label caption
                                >Enter password for Hardware
                                Wallet.</q-item-label
                              >
                            </q-item-section>
                          </q-item>

                          <q-item
                            v-if="hww.authenticated"
                            clickable
                            v-close-popup
                            @click="hwwLogout()"
                          >
                            <q-item-section>
                              <q-item-label>Logout</q-item-label>
                              <q-item-label caption
                                >Clear password for HWW.</q-item-label
                              >
                            </q-item-section>
                          </q-item>
                          <q-item
                            :disabled="!hww.authenticated"
                            clickable
                            v-close-popup
                            @click="hwwSendPsbt()"
                          >
                            <q-item-section>
                              <q-item-label>Sign</q-item-label>
                              <q-item-label caption
                                >Sign transaction on Hardware
                                Wallet</q-item-label
                              >
                            </q-item-section>
                          </q-item>
                          <q-item
                            clickable
                            v-close-popup
                            @click="hwwShowRestoreDialog()"
                          >
                            <q-item-section>
                              <q-item-label>Restore</q-item-label>
                              <q-item-label caption
                                >Restore wallet from existing word
                                list.</q-item-label
                              >
                            </q-item-section>
                          </q-item>
                          <q-item
                            :disabled="!hww.authenticated"
                            clickable
                            v-close-popup
                            @click="hwwShowSeed()"
                          >
                            <q-item-section>
                              <q-item-label>Show Seed</q-item-label>
                              <q-item-label caption
                                >Show seed on the Hardware Wallet
                                display.</q-item-label
                              >
                            </q-item-section>
                          </q-item>
                          <q-item
                            @click="hwwShowWipeDialog()"
                            clickable
                            v-close-popup
                          >
                            <q-item-section>
                              <q-item-label>Wipe</q-item-label>
                              <q-item-label caption
                                >Clean-up the wallet. New random
                                seed.</q-item-label
                              >
                            </q-item-section>
                          </q-item>
                          <q-item @click="hwwHelp()" clickable v-close-popup>
                            <q-item-section>
                              <q-item-label>Help</q-item-label>
                              <q-item-label caption
                                >View available comands.</q-item-label
                              >
                            </q-item-section>
                          </q-item>
                        </q-list>
                      </q-btn-dropdown>
                    </div>
                    <div class="col-3">
                      <q-toggle
                        label="Show Console"
                        color="secodary float-left"
                        v-model="hww.showConsole"
                      ></q-toggle>
                    </div>
                    <div class="col-3">
                      <q-spinner
                        v-if="hww.sendingPsbt == true"
                        color="primary"
                        size="2.55em"
                      ></q-spinner>
                    </div>
                    <div class="col-3"></div>
                  </div>
                  <div
                    v-if="hww.showConsole"
                    class="row items-center no-wrap q-mb-md"
                  >
                    <div class="col-3 q-pr-lg"></div>
                    <div class="col-9">
                      <q-input
                        for="watchonly-serial-port-data-input"
                        v-model="serial.receivedData"
                        filled
                        type="textarea"
                      />
                    </div>
                  </div>
                  <q-separator
                    v-if="hww.authenticated"
                    class="q-mb-md"
                  ></q-separator>
                  <div
                    v-if="hww.authenticated && hww.psbtSent"
                    class="row items-center no-wrap q-mb-md"
                  >
                    <div class="col-3 q-pr-lg">
                      <q-btn
                        @click="hwwSignPsbt()"
                        unelevated
                        color="green"
                        class="btn-full"
                        >Confirm
                        <q-spinner
                          v-if="hww.signingPsbt == true"
                          color="primary"
                        ></q-spinner>
                      </q-btn>
                    </div>
                    <div class="col-3">
                      <q-toggle
                        v-if="payment.psbtBase64Signed"
                        label="Show Signed Psbt"
                        color="secodary float-left"
                        v-model="hww.showSignedPsbt"
                      ></q-toggle>
                    </div>
                    <div class="col-6">
                      <q-badge
                        color="yellow"
                        text-color="black"
                        multi-line
                        class="text-subtitle2"
                        >Check transaction data on the Hardware Wallet
                        display</q-badge
                      >
                    </div>
                  </div>
                  <div
                    v-if="hww.showSignedPsbt"
                    class="row items-center no-wrap q-mb-md"
                  >
                    <div class="col-3 q-pr-lg"></div>

                    <div class="col-9">
                      <q-input
                        v-model="payment.psbtBase64Signed"
                        filled
                        readonly
                      />
                    </div>
                  </div>
                  <q-separator
                    v-if="payment.signedTx"
                    class="q-mb-md"
                  ></q-separator>
                  <div
                    v-if="payment.psbtBase64Signed"
                    class="row items-center no-wrap q-mb-md"
                  >
                    <div class="col-3 q-pr-lg">
                      <q-btn
                        v-if="payment.signedTx"
                        @click="broadcastTransaction()"
                        unelevated
                        color="secondary"
                        class="btn-full"
                        >Send Payment</q-btn
                      >
                    </div>
                    <div class="col-9">
                      <span class="text-subtitle2">Transaction Details</span>
                      <q-separator></q-separator>
                    </div>
                  </div>
                  <div
                    v-if="payment.signedTx"
                    class="row items-center no-wrap q-mb-md"
                  >
                    <div class="col-3 q-pr-lg"></div>
                    <div class="col-9">
                      <div class="row items-center no-wrap q-mb-sm">
                        <div class="col-3 q-pr-lg">Version</div>
                        <div class="col-9">{{payment.signedTx.version}}</div>
                      </div>
                      <div class="row items-center no-wrap q-mb-sm">
                        <div class="col-3 q-pr-lg">Locktime</div>
                        <div class="col-9">{{payment.signedTx.locktime}}</div>
                      </div>
                      <div class="row items-center no-wrap q-mb-sm">
                        <div class="col-3 q-pr-lg">Fee</div>
                        <div class="col-9">
                          <q-badge color="orange"
                            >{{satBtc(payment.signedTx.fee)}}
                          </q-badge>
                        </div>
                      </div>
                      <q-separator class="q-mb-lg"></q-separator>
                      <span class="text-subtitle2">Outputs</span>
                      <q-separator class="q-mb-lg"></q-separator>
                      <div
                        v-for="out in payment.signedTx.outputs"
                        class="row items-center no-wrap q-mb-sm"
                      >
                        <div class="col-3 q-pr-lg">
                          <q-badge color="orange"
                            >{{satBtc(out.amount)}}</q-badge
                          >
                        </div>

                        <div class="col-9">
                          <q-badge outline color="blue"
                            >{{out.address}}</q-badge
                          >
                        </div>
                      </div>
                    </div>
                  </div>

                  <q-separator
                    v-if="payment.sentTxId"
                    class="q-mb-lg"
                  ></q-separator>
                  <div
                    v-if="payment.sentTxId"
                    class="row items-center no-wrap q-mb-sm"
                  >
                    <div class="col-3">Transaction Id</div>
                    <div class="col-9">
                      <a
                        style="color: unset"
                        :href="config.data.mempool_endpoint + '/tx/' + payment.sentTxId"
                        target="_blank"
                      >
                        {{payment.sentTxId}}</a
                      >
                    </div>
                  </div>
                </q-card-section>
              </q-card>
            </q-form>
          </q-tab-panel>
        </q-tab-panels>
      </q-card-section>
    </q-card>
  </div>

  {% endraw %}

  <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}} Onchain Wallet (watch-only) Extension
        </h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "watchonly/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>
  {% raw %}
  <q-dialog v-model="showAddress" position="top">
    <q-card class="q-pa-lg lnbits__dialog-card">
      <h5 class="text-subtitle1 q-my-none">Address Details</h5>
      <q-separator></q-separator><br />

      <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
        <qrcode
          v-if="currentAddress"
          :value="currentAddress.address"
          :options="{width: 800}"
          class="rounded-borders"
        ></qrcode>
      </q-responsive>
      <p v-if="currentAddress">
        {{ currentAddress.address }}
        <q-btn
          flat
          dense
          size="ms"
          icon="launch"
          type="a"
          :href="config.mempool_endpoint + '/address/' + currentAddress.address"
          target="_blank"
        ></q-btn>
      </p>
      <p v-if="currentAddress">
        <q-input
          filled
          dense
          v-model.trim="addressNote"
          type="text"
          label="Note"
        ></q-input>
      </p>
      <div v-if="currentAddress && currentAddress.gapLimitExceeded">
        <q-badge color="yellow" text-color="black"
          >Gap limit of 20 addresses exceeded. Other wallets might not detect
          funds at this address.</q-badge
        >
      </div>
      <div class="row q-mt-lg q-gutter-sm">
        <q-btn
          v-if="currentAddress"
          outline
          v-close-popup
          color="grey"
          @click="updateNoteForAddress(currentAddress, addressNote)"
          class="q-ml-sm"
          >Save Note</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
      </div>
      <div class="row q-mt-lg q-gutter-sm"></div>
    </q-card>
  </q-dialog>

  <q-dialog v-model="hww.showPasswordDialog" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="hwwLogin" class="q-gutter-md">
        <span>Enter password for Hardware Wallet (8 numbers/letters)</span>
        <q-input
          filled
          dense
          v-model.trim="hww.password"
          type="password"
          label="Password"
        ></q-input>

        <div class="row q-mt-lg">
          <q-btn
            unelevated
            color="primary"
            :disable="!serial.selectedPort"
            type="submit"
            >Login</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="hww.showWipeDialog" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="hwwWipe" class="q-gutter-md">
        <q-badge color="pink" text-color="black">
          This action will remove all data from the Hardware Wallet. Please
          create a back-up for the seed!
        </q-badge>
        <span>Enter new password for Hardware Wallet (8 numbers/letters)</span>
        <q-input
          filled
          dense
          v-model.trim="hww.password"
          type="password"
          label="Password"
        ></q-input>
        <q-badge color="pink" text-color="black">
          This action cannot be reversed!
        </q-badge>

        <div class="row q-mt-lg">
          <q-btn
            unelevated
            color="primary"
            :disable="!serial.selectedPort"
            type="submit"
            >Wipe</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="hww.showRestoreDialog" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="hwwRestore" class="q-gutter-md">
        <q-badge
          color="pink"
          text-color="black"
          class="text-subtitle2"
          multi-line
        >
          For test purposes only. Do not enter word list with real funds!!!
        </q-badge>
        <br /><br /><br />
        <span>Enter new word list separated by space</span>
        <q-input
          v-model.trim="hww.mnemonic"
          filled
          :type="hww.showMnemonic ? 'text' : 'password'"
          filled
          dense
          hint="Word List"
        >
          <template v-slot:append>
            <q-icon
              :name="hww.showMnemonic ? 'visibility' : 'visibility_off'"
              class="cursor-pointer"
              @click="hww.showMnemonic = !hww.showMnemonic"
            />
          </template>
        </q-input>
        <br />
        <span>Enter new password (8 numbers/letters)</span>
        <q-input
          v-model.trim="hww.password"
          filled
          :type="hww.showPassword ? 'text' : 'password'"
          filled
          dense
          hint="New Password"
        >
          <template v-slot:append>
            <q-icon
              :name="hww.showPassword ? 'visibility' : 'visibility_off'"
              class="cursor-pointer"
              @click="hww.showPassword = !hww.showPassword"
            />
          </template>
        </q-input>
        <br /><br />
        <q-badge
          color="pink"
          text-color="black"
          class="text-subtitle2"
          multi-line
        >
          For test purposes only. Do not enter word list with real funds.
        </q-badge>

        <div class="row q-mt-lg">
          <q-btn
            unelevated
            color="primary"
            :disable="!serial.selectedPort"
            type="submit"
            >Restore</q-btn
          >
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>
  {% endraw %}
</div>

{% endblock %} {% block scripts %} {{ window_vars(user) }}
<style>
  .btn-full {
    width: 100%;
  }
</style>
<script type="text/javascript" src="https://mempool.space/mempool.js"></script>

<script src="{{ url_for('watchonly_static', path='js/tables.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='js/map.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='js/utils.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/my-checkbox/my-checkbox.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/wallet-config/wallet-config.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/wallet-list/wallet-list.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/address-list/address-list.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/history/history.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/utxo-list/utxo-list.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='js/index.js') }}"></script>
{% endblock %}