{% extends "public.html" %} {% block toolbar_title %} Boltcard: ${
card.card_name }{% endblock %} {% block page %}
<div class="row q-col-gutter-md justify-center">
  <div class="col-12 col-md-6 col-lg-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <div class="text-h6">Card Info</div>
        <div class="text-subtitle2">
          <b>Balance: </b>
          <span v-text="balance"></span> sats
        </div>
        <div class="text-subtitle2">This card is ${enabled}</div>
      </q-card-section>

      <q-separator dark inset></q-separator>

      <q-card-section>
        <q-list>
          <q-item v-for="item in cardInfo">
            <q-item-section>
              <q-item-label lines="1">${item.label}</q-item-label>
              <q-item-label caption>${card[item.value]}</q-item-label>
            </q-item-section>
            <q-item-section
              side
              v-if="!['tx_limit', 'daily_limit'].includes(item.value)"
            >
              <q-tooltip>Click to copy</q-tooltip>
              <q-btn
                flat
                round
                icon="content_copy"
                @click="copyText(item.value)"
              />
            </q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
    </q-card>
  </div>
  <div class="col-12 col-md-6 col-lg-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <div class="text-h6">Transactions</div>
        <div class="text-subtitle2">Latest transactions</div>
      </q-card-section>

      <q-separator dark inset></q-separator>

      <q-card-section>
        <q-list>
          <q-item v-for="hit in hits">
            <q-item-section avatar>
              <q-icon
                :name="hit.spent > 0 ? 'done_all' : 'done'"
                :color="hit.spent > 0 ? 'green' : 'grey'"
              />
            </q-item-section>
            <q-item-section class="overflow-hidden">
              <q-item-label
                >ID: ${hit.id} ${refunds.some(r => r.hit_id == hit.id) ?
                '(Refunded)' : null}
                <q-tooltip><span v-text="hit.id"></span></q-tooltip>
              </q-item-label>
              <q-item-label caption lines="1"
                >IP: ${hit.ip}<q-tooltip
                  ><span v-text="hit.ip"></span></q-tooltip
              ></q-item-label>
            </q-item-section>

            <q-item-section side top>
              <q-item-label caption>${hit.date}</q-item-label>
              <q-item-label caption>${hit.amount} sats</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
    </q-card>
  </div>
</div>

{% endblock %}{% block scripts %}
<script>
  const mapHits = obj => {
    obj.date = Quasar.date.formatDate(
      new Date(obj.time),
      'YYYY-MM-DD HH:mm'
    )

    return obj
  }

  window.app = Vue.createApp({
    el: '#vue',
    delimiters: ['${', '}'],
    mixins: [windowMixin],
    data() {
      return {
        card: null,
        balance: 0,
        hits: null,
        cardInfo: [
          {
            label: 'Card UID',
            value: 'uid'
          },
          {
            label: 'Auth Key',
            value: 'k0'
          },
          {
            label: 'Meta Key',
            value: 'k1'
          },
          {
            label: 'File Key',
            value: 'k2'
          },
          {
            label: 'Transaction Limit',
            value: 'tx_limit'
          },
          {
            label: 'Daily Limit',
            value: 'daily_limit'
          }
        ]
      }
    },
    created() {
      const hits = {{ hits | tojson | safe }}
      const refunds = {{ refunds | tojson | safe }}
      const balance = {{ balance }}
      this.card = JSON.parse({{ card | tojson }})
      this.hits = hits.map(JSON.parse).map(mapHits)
      this.refunds = refunds || []
      this.balance = LNbits.utils.formatSat(balance)
    },
    computed: {
      enabled() {
        return this.card.enable ? 'Enabled' : 'Disabled'
      }
    },
    methods: {
      copyText(text, message, position) {
        Quasar.copyToClipboard(text).then(() => {
          Quasar.Notify.create({
            message: message || 'Copied to clipboard!',
            position: position || 'bottom'
          })
        })
      }
    }
  })
</script>
{% endblock %}