{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %} {% raw %}
<div class="row q-col-gutter-md">
  <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
    <div class="row q-col-gutter-md">
      <q-card
        v-for="type in ['invoice', 'admin']"
        v-bind:key="type"
        class="q-pa-sm q-ma-sm col-5"
      >
        <q-card-section class="q-pa-none">
          <div class="text-center">
            <a :href="selectedWallet[type]">
              <q-responsive :ratio="1" class="q-mx-sm">
                <qrcode
                  :value="selectedWallet[type]"
                  :options="{width: 800}"
                  class="rounded-borders"
                ></qrcode>
              </q-responsive>
            </a>
          </div>
          <div class="row q-mt-lg items-center justify-center">
            <q-btn
              outline
              color="grey"
              @click="copyText(selectedWallet[type])"
              class="text-center q-mb-md"
              >Copy LndHub {{type}} URL</q-btn
            >
          </div>
        </q-card-section>
      </q-card>
    </div>

    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form class="q-gutter-md">
        <q-select
          filled
          dense
          v-model="selectedWallet"
          :options="wallets"
          label="Select wallet:"
        >
        </q-select>
      </q-form>
    </q-card>
  </div>

  {% endraw %}

  <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}} LndHub extension
        </h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list>
          {% include "lndhub/_instructions.html" %}
          <q-separator></q-separator>
          {% include "lndhub/_lndhub.html" %}
        </q-list>
      </q-card-section>
    </q-card>
  </div>
</div>

{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      var wallets = JSON.parse('{{ user.wallets | tojson }}')
        .map(LNbits.map.wallet)
        .map(wallet => ({
          label: wallet.name,
          admin: `lndhub://admin:${wallet.adminkey}@${location.protocol}//${location.host}/lndhub/ext/`,
          invoice: `lndhub://invoice:${wallet.inkey}@${location.protocol}//${location.host}/lndhub/ext/`
        }))

      return {
        wallets: wallets,
        selectedWallet: wallets[0]
      }
    }
  })
</script>
{% endblock %}
