{% 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-8 col-lg-7 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col">
            <div class="row justify-start" style="width: 150px">
              <div class="col">
                <h5 class="text-subtitle1 q-my-none">Cards</h5>
              </div>
              <div class="col">
                <q-btn
                  round
                  size="sm"
                  icon="add"
                  unelevated
                  color="primary"
                  @click="addCardOpen"
                >
                  <q-tooltip>Add card</q-tooltip>
                </q-btn>
              </div>
            </div>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportCardsCSV"
              >Export to CSV</q-btn
            >
          </div>
        </div>
        <q-table
          dense
          flat
          :rows="cards"
          row-key="id"
          :columns="cardsTable.columns"
          v-model:pagination="cardsTable.pagination"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <q-th auto-width></q-th>
              <q-th
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                v-text="col.label"
              ></q-th>
              <q-th auto-width></q-th>
              <q-th auto-width></q-th>
              <q-th auto-width></q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width>
                <q-btn
                  unelevated
                  dense
                  icon="qr_code"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  @click="openQrCodeDialog(props.row.id, false)"
                >
                  <q-tooltip>Card key credentials</q-tooltip>
                </q-btn>
              </q-td>
              <q-td auto-width>
                <q-btn
                  unelevated
                  dense
                  icon="query_stats"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  type="a"
                  :href="'/boltcards/' + props.row.external_id"
                  target="_blank"
                >
                  <q-tooltip>Card Stats</q-tooltip>
                </q-btn>
              </q-td>
              <q-td
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                v-text="col.value"
              ></q-td>
              <q-td auto-width>
                <q-btn
                  v-if="props.row.enable"
                  dense
                  @click="enableCard(props.row.wallet, props.row.id, false)"
                  color="pink"
                  >DISABLE</q-btn
                >
                <q-btn
                  v-else
                  dense
                  @click="enableCard(props.row.wallet, props.row.id, true)"
                  color="green"
                  >ENABLE
                </q-btn>
              </q-td>
              <q-td auto-width>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="updateCardDialog(props.row.id)"
                  icon="edit"
                  color="light-blue"
                >
                  <q-tooltip>Edit card</q-tooltip>
                </q-btn>
              </q-td>
              <q-td auto-width>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="openQrCodeDialog(props.row.id, true)"
                  icon="cancel"
                  color="pink"
                >
                  <q-tooltip
                    >Deleting card will also delete all records</q-tooltip
                  >
                </q-btn>
              </q-td>
            </q-tr>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col">
            <h5 class="text-subtitle1 q-my-none">Hits</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportCardsCSV"
              >Export to CSV</q-btn
            >
          </div>
        </div>
        <q-table
          dense
          flat
          :rows="hits"
          row-key="id"
          :columns="hitsTable.columns"
          v-model:pagination="hitsTable.pagination"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                v-text="col.label"
              ></q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                v-text="col.value"
              ></q-td>
            </q-tr>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col">
            <h5 class="text-subtitle1 q-my-none">Refunds</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportRefundsCSV"
              >Export to CSV</q-btn
            >
          </div>
        </div>
        <q-table
          dense
          flat
          :rows="refunds"
          row-key="id"
          :columns="refundsTable.columns"
          v-model:pagination="refundsTable.pagination"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                v-text="col.label"
              ></q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                v-text="col.value"
              ></q-td>
            </q-tr>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
  </div>
  <div class="col-12 col-md-4 col-lg-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-my-none">
          {{SITE_TITLE}} Bolt Cards extension
        </h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "boltcards/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>
  <q-dialog v-model="cardDialog.show" position="top" @hide="closeFormDialog">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="sendFormData" class="q-gutter-md">
        <q-select
          filled
          dense
          emit-value
          v-model="cardDialog.data.wallet"
          :options="g.user.walletOptions"
          :disable="cardDialog.data.id != null"
          label="Wallet *"
        >
        </q-select>
        <div class="row">
          <div class="col">
            <q-input
              filled
              dense
              emit-value
              v-model="cardDialog.data.tx_limit"
              type="number"
              label="Max transaction ({{LNBITS_DENOMINATION}})"
              class="q-pr-sm"
            ></q-input>
          </div>
          <div class="col">
            <q-input
              filled
              dense
              emit-value
              v-model="cardDialog.data.daily_limit"
              type="number"
              label="Daily limit ({{LNBITS_DENOMINATION}})"
            ></q-input>
          </div>
        </div>
        <q-input
          filled
          dense
          emit-value
          v-model="cardDialog.data.card_name"
          type="text"
          label="Card name "
        >
        </q-input>
        <div class="row">
          <div class="col-10">
            <q-input
              filled
              dense
              emit-value
              v-model="cardDialog.data.uid"
              type="text"
              label="Card UID "
            >
            </q-input>
          </div>
          <div class="col-2 q-pl-sm">
            <q-btn
              outline
              color="grey"
              icon="nfc"
              :disable="disableNfcButton"
              @click="readNfcTag()"
            >
              <q-tooltip>Tap card to scan UID</q-tooltip>
            </q-btn>
          </div>
        </div>
        <q-toggle
          v-model="toggleAdvanced"
          label="Show advanced options"
        ></q-toggle>

        <div v-show="toggleAdvanced" class="q-gutter-y-md">
          <q-input
            filled
            dense
            v-model="cardDialog.data.k0"
            type="text"
            label="Card Auth key (K0)"
            hint="Used to authentificate with the card (16 bytes in HEX). "
            @randomkey
          ></q-input>
          <q-input
            filled
            dense
            v-model="cardDialog.data.k1"
            type="text"
            label="Card Meta key (K1)"
            hint="Used for encypting of the message (16 bytes in HEX)."
          ></q-input>
          <q-input
            filled
            dense
            v-model="cardDialog.data.k2"
            type="text"
            label="Card File key (K2)"
            hint="Used for CMAC of the message (16 bytes in HEX)."
          ></q-input>
          <q-input
            filled
            dense
            v-model.number="cardDialog.data.counter"
            type="number"
            label="Initial counter"
          >
            <q-tooltip class="bg-grey-8" anchor="bottom left" self="top left"
              >Zero if you don't know.</q-tooltip
            >
          </q-input>
          <q-btn
            unelevated
            color="primary"
            class="q-ml-auto"
            @click="generateKeys"
            >Generate keys</q-btn
          >
        </div>
        <div class="row q-mt-lg">
          <q-btn
            v-if="cardDialog.data.id"
            unelevated
            color="primary"
            type="submit"
            >Update Card</q-btn
          >
          <q-btn
            v-else
            unelevated
            color="primary"
            :disable="cardDialog.data.uid == null"
            type="submit"
            >Create Card
          </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="qrCodeDialog.show" position="top">
    <q-card v-if="qrCodeDialog.data" class="q-pa-lg lnbits__dialog-card">
      <div class="col q-mt-lg text-center">
        <lnbits-qrcode
          :value="qrCodeDialog.data.link"
          v-show="!qrCodeDialog.wipe"
        ></lnbits-qrcode>
        <p class="text-center" v-show="!qrCodeDialog.wipe">
          (QR for <strong>create</strong> the card in
          <a
            class="text-secondary"
            href="https://play.google.com/store/apps/details?id=com.lightningnfcapp"
            target="_blank"
            style="color: inherit"
            >Boltcard NFC Card Creator</a
          >)
        </p>
        <lnbits-qrcode
          :value="qrCodeDialog.data_wipe"
          v-show="qrCodeDialog.wipe"
        ></lnbits-qrcode>
        <p class="text-center" v-show="qrCodeDialog.wipe">
          (QR for <strong>wipe</strong> the card in
          <a
            class="text-secondary"
            href="https://play.google.com/store/apps/details?id=com.lightningnfcapp"
            target="_blank"
            style="color: inherit"
            >Boltcard NFC Card Creator</a
          >)
        </p>
      </div>
      <div class="col q-mt-md q-mb-md text-center">
        <q-btn-toggle
          v-model="qrCodeDialog.wipe"
          rounded
          unelevated
          toggle-color="primary"
          color="white"
          text-color="primary"
          :options="[
            {label: 'Create', value: false},
            {label: 'Wipe', value: true}
          ]"
        />
      </div>
      <p style="word-break: break-all">
        <strong>Name: </strong><span v-text="qrCodeDialog.data.name"></span
        ><br />
        <strong>UID: </strong> <span v-text="qrCodeDialog.data.uid"></span
        ><br />
        <strong>External ID:</strong>
        <span v-text="qrCodeDialog.data.external_id"></span><br />
        <strong>Lock key (K0):</strong>
        <span v-text="qrCodeDialog.data.k0"></span><br />
        <strong>Meta key (K1 & K3):</strong>
        <span v-text="qrCodeDialog.data.k1"></span><br />
        <strong>File key (K2 & K4):</strong>
        <span v-text="qrCodeDialog.data.k2"></span><br />
      </p>
      <p>
        Always backup all keys that you're trying to write on the card. Without
        them you may not be able to change them in the future!
      </p>
      <q-btn
        unelevated
        outline
        color="grey"
        @click="copyText(qrCodeDialog.data.link)"
        label="Create link"
        v-show="!qrCodeDialog.wipe"
      >
        <q-tooltip>Click to copy, then paste to NFC Card Creator</q-tooltip>
      </q-btn>
      <q-btn
        unelevated
        outline
        color="grey"
        @click="copyText(qrCodeDialog.data_wipe)"
        label="Wipe data"
        v-show="qrCodeDialog.wipe"
      >
        <q-tooltip>Click to copy, then paste to NFC Card Creator</q-tooltip>
      </q-btn>
      <q-btn
        class="q-ml-sm"
        unelevated
        outline
        color="red"
        @click="deleteCard(qrCodeDialog.data.id)"
        label="Delete card"
        v-show="qrCodeDialog.wipe"
        v-close-popup
      >
        <q-tooltip>Backup the keys, or wipe the card first!</q-tooltip>
      </q-btn>
      <q-btn
        class="q-ml-sm"
        unelevated
        outline
        color="grey"
        :href="deeplinkUrl"
        target="_blank"
        label="Use Boltcard App"
      >
        <q-tooltip>Use Boltcard Programmer App</q-tooltip>
      </q-btn>
      <div class="row q-mt-lg q-gutter-sm">
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
      </div>
    </q-card>
  </q-dialog>
</div>

{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script src="{{ static_url_for('boltcards/static', path='js/index.js') }}"></script>
{% endblock %}