{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md justify-center">
  <div class="col q-gutter-y-md">
    <q-card>
      <div class="q-pa-md">
        <div class="q-gutter-y-md">
          <q-tabs v-model="tab" active-color="primary" align="justify">
            <q-tab
              name="funding"
              label="Funding"
              @update="val => tab = val.name"
            ></q-tab>
            <q-tab
              name="users"
              label="Users"
              @update="val => tab = val.name"
            ></q-tab>
            <q-tab
              name="server"
              label="Server"
              @update="val => tab = val.name"
            ></q-tab>
            <q-tab
              name="theme"
              label="Theme"
              @update="val => tab = val.name"
            ></q-tab>
          </q-tabs>
        </div>
      </div>

      <q-form @submit="UpdateLNbits">
      <q-tab-panels v-model="tab" animated>
        <q-tab-panel name="funding">
          <q-card-section class="q-pa-none">
            <h6 class="q-my-none">Wallets Management</h6>
            <br />
              <div>
                <div class="row">
                  <div class="col">
                    <p>Funding Source Info</p>
                    <ul>
                      {%raw%}
                      <li>Funding Source: {{data.admin.funding_source}}</li>
                      <li>Balance: {{data.admin.balance / 1000}} sats</li>
                      {%endraw%}
                    </ul>
                    <br />
                  </div>
                </div>
                <div class="row q-col-gutter-md">
                  <div class="col-12 col-md-6">
                    <p>Active Funding</p>
                    <q-select
                      filled
                      v-model="data.admin.funding_source"
                      hint="Select the active funding wallet"
                      :options="data.funding_source"
                    ></q-select>
                    <br />
                  </div>
                  <div class="col-12 col-md-6">
                    <!-- <q-form @submit="topupWallet"> -->
                      <p>TopUp a wallet</p>
                      <div class="row">
                        <div class="col-12">
                          <q-input
                            dense
                            type="text"
                            filled
                            v-model="wallet.data.id"
                            label="Wallet ID"
                            hint="Use the wallet ID to topup any wallet"
                          ></q-input>
                          <br />
                        </div>
                        <div class="col-12">
                          <q-input
                            dense
                            type="number"
                            filled
                            v-model="wallet.data.amount"
                            label="Topup amount"
                          ></q-input>
                        </div>
                      </div>
                      <div>
                        <q-btn
                          class="q-mt-md float-right"
                          label="Topup"
                          color="primary"
                          @click="topupWallet"
                        ></q-btn>
                      </div>
                    <!-- </q-form> -->
                    <br />
                  </div>
                </div>
                <p>Funding Sources</p>
                <q-list bordered class="rounded-borders">
                  <q-expansion-item
                    expand-separator
                    icon="payments"
                    :label="data.admin.funding.CLightningWallet.backend_wallet"
                    @click="data.admin.funding.CLightningWallet[7] = 1"
                  >
                    <q-card>
                      <q-card-section>
                        <q-input
                          filled
                          v-model="data.admin.funding.CLightningWallet.endpoint"
                          label="GRPC Endpoint"
                          class="q-pr-md"
                          hint="ie /home/bob/.lightning/bitcoin/lightning-rpc"
                        ></q-input>
                      </q-card-section>
                    </q-card>
                  </q-expansion-item>
        
                  <q-expansion-item
                    expand-separator
                    icon="payments"
                    :label="data.admin.funding.SparkWallet.backend_wallet"
                    @click="data.admin.funding.SparkWallet[7] = 1"
                  >
                    <q-card>
                      <q-card-section>
                        <div class="row">
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.SparkWallet.endpoint"
                              label="LND REST Endpoint"
                              class="q-pr-md"
                              hint="ie http://localhost:9737/rpc"
                            ></q-input>
                          </div>
                          <div class="col"></div>
                        </div>
                        <div class="row">
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.SparkWallet.admin_key"
                              label="Access token"
                              class="q-pr-md"
                              hint="Your access token"
                            ></q-input>
                          </div>
                          <div class="col"></div>
                        </div>
                      </q-card-section>
                    </q-card>
                  </q-expansion-item>
        
                  <q-expansion-item
                    expand-separator
                    icon="payments"
                    :label="data.admin.funding.LndRestWallet.backend_wallet"
                    @click="data.admin.funding.LndRestWallet[7] = 1"
                  >
                    <q-card>
                      <q-card-section>
                        <div class="row">
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.LndRestWallet.endpoint"
                              label="LND REST Endpoint"
                              class="q-pr-md"
                              hint="default 127.0.0.1"
                            ></q-input>
                          </div>
                          <div class="col"></div>
                        </div>
                        <div class="row">
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.LndRestWallet.cert"
                              label="LND self-signed cert"
                              class="q-pr-md"
                              hint="Location of your ssl cert"
                            ></q-input>
                          </div>
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.LndRestWallet.admin_key"
                              label="LND admin macaroon"
                              class="q-pr-md"
                              hint="Your admin macaroon as hex or location"
                            ></q-input>
                          </div>
                        </div>
                      </q-card-section>
                    </q-card>
                  </q-expansion-item>
        
                  <q-expansion-item
                    expand-separator
                    icon="payments"
                    :label="data.admin.funding.LndWallet.backend_wallet"
                    @click="data.admin.funding.LndWallet[7] = 1"
                  >
                    <q-card>
                      <q-card-section>
                        <div class="row">
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.LndWallet.endpoint"
                              label="LND GRPC Endpoint"
                              class="q-pr-md"
                              hint="default 127.0.0.1"
                            ></q-input>
                          </div>
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.LndWallet.port"
                              label="LND GRPC port"
                              class="q-pr-md"
                              hint="Deafault 11009"
                            ></q-input>
                          </div>
                        </div>
        
                        <div class="row">
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.LndWallet.cert"
                              label="LND self-signed cert"
                              class="q-pr-md"
                              hint="Location of your ssl cert"
                            ></q-input>
                          </div>
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.LndWallet.admin_key"
                              label="LND admin macaroon"
                              class="q-pr-md"
                              hint="Your admin macaroon as hex or location"
                            ></q-input>
                          </div>
                        </div>
                      </q-card-section>
                    </q-card>
                  </q-expansion-item>
        
                  <q-expansion-item
                    expand-separator
                    icon="payments"
                    :label="data.admin.funding.LntxbotWallet.backend_wallet"
                    @click="data.admin.funding.LntxbotWallet[7] = 1"
                  >
                    <q-card>
                      <q-card-section>
                        <div class="row">
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.LntxbotWallet.admin_key"
                              label="Admin key"
                              class="q-pr-md"
                              hint="use /api in LNTXBOT"
                            ></q-input>
                          </div>
                          <div class="col"></div>
                        </div>
                      </q-card-section>
                    </q-card>
                  </q-expansion-item>
        
                  <q-expansion-item
                    expand-separator
                    icon="payments"
                    :label="data.admin.funding.LNPayWallet.backend_wallet"
                    @click="data.admin.funding.LNPayWallet[7] = 1"
                  >
                    <q-card>
                      <q-card-section>
                        <div class="row">
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.LNPayWallet.cert"
                              label="API key"
                              class="q-pr-md"
                            ></q-input>
                          </div>
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.LNPayWallet.admin_key"
                              label="Admin key"
                              class="q-pr-md q-pb-md"
                            ></q-input>
                          </div>
                        </div>
                      </q-card-section>
                    </q-card>
                  </q-expansion-item>
        
                  <q-expansion-item
                    expand-separator
                    icon="payments"
                    :label="data.admin.funding.LnbitsWallet.backend_wallet"
                    @click="data.admin.funding.LnbitsWallet[7] = 1"
                  >
                    <q-card>
                      <q-card-section>
                        <div class="row">
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.LnbitsWallet.endpoint"
                              label="LNbits endpoint"
                              class="q-pr-md"
                              hint="ie https://lnbits.com, default 127.0.0.1"
                            ></q-input>
                          </div>
                          <div class="col"></div>
                        </div>
                        <div class="row">
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.LnbitsWallet.admin_key"
                              label="Admin key"
                              class="q-pr-md q-pb-md"
                            ></q-input>
                          </div>
                          <div class="col"></div>
                        </div>
                      </q-card-section>
                    </q-card>
                  </q-expansion-item>
        
                  <q-expansion-item
                    expand-separator
                    icon="payments"
                    :label="data.admin.funding.OpenNodeWallet.backend_wallet"
                    @click="data.admin.funding.OpenNodeWallet[7] = 1"
                  >
                    <q-card>
                      <q-card-section>
                        <div class="row">
                          <div class="col">
                            <q-input
                              filled
                              v-model="data.admin.funding.OpenNodeWallet.admin_key"
                              label="Admin key"
                              class="q-pr-md"
                            ></q-input>
                          </div>
                          <div class="col"></div>
                        </div>
                      </q-card-section>
                    </q-card>
                  </q-expansion-item> </q-list
                >
            </div>
            
            <div class="row q-mt-lg">
              <q-btn
                unelevated
                color="primary"
                type="submit"
                >Save</q-btn
              >
            </div>
          </q-card-section>
        </q-tab-panel>
        <q-tab-panel name="users">
          <q-card-section class="q-pa-none">
            <h6 class="q-my-none">User Management</h6>
            <br />
            <p class="q-my-none">
              Super Admin: {% raw
              %}{{this.data.admin.user}}{% endraw %}
            </p>
            <br />
              <div>
                <p>Admin Users</p>
                <q-input
                  filled
                  v-model="data.admin_users_add"
                  @keydown.enter="addAdminUser"
                  type="text"
                  label="User ID"
                  hint="Users with admin privileges">
                  <q-btn @click="addAdminUser" dense flat icon="add"></q-btn>
                </q-input>
                <div>
                  {% raw %}
                  <q-chip v-for="user in data.admin.admin_users.slice(1)"
                    removable
                    @remove="removeAdminUser(user)"
                    color="primary"
                    text-color="white"
                  >
                    {{ user }}
                  </q-chip>
                  {% endraw %}
                </div>
                <br />
            </div>
            <div>
              <p>Allowed Users</p>
              <q-input
                filled
                v-model="data.allowed_users_add"
                @keydown.enter="addAllowedUser"
                type="text"
                label="User ID"
                hint="Only these users can use LNbits">
                <q-btn @click="addAllowedUser" dense flat icon="add"></q-btn>
              </q-input>
              <div>
                {% raw %}
                <q-chip v-for="user in data.admin.allowed_users"
                  removable
                  @remove="removeAllowedUser(user)"
                  color="primary"
                  text-color="white"
                >
                  {{ user }}
                </q-chip>
                {% endraw %}
              </div>
              <br />
            </div>
            <div class="row q-col-gutter-md">
              <div class="col-12 col-md-6">
                <p>Admin Extensions</p>
                <q-select
                  filled
                  v-model="data.admin.admin_ext"
                  multiple
                  hint="Extensions only user with admin privileges can use"
                  :options="options"
                  label="Admin extensions"
                ></q-select>
                <br />
              </div>
              <div class="col-12 col-md-6">
                <p>Disabled Extensions</p>
                <q-select
                  filled
                  v-model="data.admin.disabled_ext"
                  multiple
                  hint="Disable extensions *amilk disabled by default as resource heavy"
                  :options="options"
                  label="Disable extensions"
                ></q-select>
                <br />
              </div>
            </div>
            <div class="row q-mt-lg">
              <q-btn
                unelevated
                color="primary"
                type="submit"
                >Save</q-btn
              >
            </div>
          </q-card-section>
        </q-tab-panel>
        <q-tab-panel name="server">
          <q-card-section class="q-pa-none">
            <h6 class="q-my-none">Server Management</h6>
            <br />
              <div>
                <div class="row">
                  <div class="col">
                    <p>Server Info</p>
                    <ul>
                      {%raw%}
                      <li v-if="data.admin.data_folder">SQlite: {{data.admin.data_folder}}</li>
                      <li v-if="data.admin.database_url">Postgres: {{data.admin.database_url}}</li>
                      {%endraw%}
                    </ul>
                    <br />
                  </div>
                </div>
                <div class="row q-col-gutter-md">
                  <div class="col-12 col-md-6">
                    <p>Service Fee</p>
                    <q-input
                      filled
                      type="number"
                      v-model.number="data.admin.service_fee"
                      label="Service fee (%)"
                      step="0.1"
                      hint="Fee charged per tx (%)"
                    ></q-input>
                    <br />
                  </div>
                  <div class="col-12 col-md-6">
                    <p>Miscelaneous</p>
                    <q-item tag="label" v-ripple>
                      <q-item-section>
                        <q-item-label>Force HTTPS</q-item-label>
                        <q-item-label caption>Prefer secure URLs</q-item-label>
                      </q-item-section>
                      <q-item-section avatar>
                        <q-toggle
                          size="md"
                          v-model="data.admin.force_https"
                          checked-icon="check"
                          color="green"
                          unchecked-icon="clear"
                        />
                      </q-item-section>
                    </q-item>
                    <q-item tag="label" v-ripple>
                      <q-item-section>
                        <q-item-label>Hide API</q-item-label>
                        <q-item-label caption>Hides wallet api, extensions can choose to honor</q-item-label>
                      </q-item-section>
                      <q-item-section avatar>
                        <q-toggle
                          size="md"
                          v-model="data.admin.hide_api"
                          checked-icon="check"
                          color="green"
                          unchecked-icon="clear"
                        />
                      </q-item-section>
                    </q-item>
                    <br />
                  </div>
                </div>
            </div>
            
            <div class="row q-mt-lg">
              <q-btn
                unelevated
                color="primary"
                type="submit"
                >Save</q-btn
              >
            </div>
          </q-card-section>
        </q-tab-panel>
        <q-tab-panel name="theme">
          <q-card-section class="q-pa-none">
            <h6 class="q-my-none">UI Management</h6>
            <br />
              <div>
                <div class="row q-col-gutter-md">
                  <div class="col-12 col-md-6">
                    <p>Site Title</p>
                    <q-input
                      filled
                      type="text"
                      v-model="data.admin.site_title"
                      label="Site title"
                    ></q-input>
                    <br />
                  </div>
                  <div class="col-12 col-md-6">
                    <p>Site Tagline</p>
                    <q-input
                      filled
                      type="text"
                      v-model="data.admin.site_tagline"
                      label="Site tagline"
                    ></q-input>
                    <br />
                  </div>
                </div>
                <div>
                    <p>Site Description</p>
                    <q-input
                      v-model="data.admin.site_description"
                      filled
                      type="textarea"
                      hint="Use plain text or raw HTML"
                    />
                  </div>
                  <br />
                <div class="row q-col-gutter-md">
                  <div class="col-12 col-md-6">
                    <p>Default Wallet Name</p>
                    <q-input
                      filled
                      type="text"
                      v-model="data.admin.default_wallet_name"
                      label="LNbits wallet"
                    ></q-input>
                    <br />
                  </div>
                  <div class="col-12 col-md-6">
                    <p>Denomination</p>
                    <q-input
                      filled
                      type="text"
                      v-model="data.admin.denomination"
                      label="sats"
                      hint="The name for the FakeWallet token"
                    ></q-input>
                    <br />
                  </div>
                </div>
                <div class="row q-col-gutter-md">
                  <div class="col-12 col-md-6">
                    <p>Themes</p>
                    <q-select
                      filled
                      v-model="data.admin.theme"
                      multiple
                      hint="Choose themes available for users"
                      :options="themes"
                      label="Themes"
                    ></q-select>
                    <br />
                  </div>
                  <div class="col-12 col-md-6">
                    <p>Advertisement Slots</p>
                    <q-input
                      filled
                      v-model="data.ad_space_add"
                      @keydown.enter="addAdSpace"
                      type="text"
                      label="Ad image URL"
                      hint="Ad image filepaths or urls, extensions can choose to honor">
                      <q-btn @click="addAdSpace" dense flat icon="add"></q-btn>
                    </q-input>
                    <div>
                      {% raw %}
                      <q-chip v-for="space in data.admin.ad_space"
                        removable
                        @remove="removeAdSpace(space)"
                        color="primary"
                        text-color="white"
                      >
                        {{ space.slice(0, 8) + " ... " + space.slice(-8) }}
                      </q-chip>
                      {% endraw %}
                    </div>
                    <br />
                  </div>
                </div>
            </div>
            
            <div class="row q-mt-lg">
              <q-btn
                unelevated
                color="primary"
                type="submit"
                >Save</q-btn
              >
            </div>
          </q-card-section>
        </q-tab-panel>
      </q-tab-panels>
    </q-form>
    </q-card>
  </div>
  </div>
  <!-- END TABS -->
<h3 class="q-my-none">Admin</h3>
<p></p>
<!--
  Forked from:
  https://quasar.dev/vue-components/form#Example--Basic
-->
<div class="row">
  <!-- <div class="col-8">
    <q-card class="q-mr-md">
      <q-form @submit="UpdateLNbits" class="q-px-md q-py-md">
        <h6 class="q-my-md">Settings</h6>
        <div class="row">
          <div class="col">
            <q-input
              filled
              v-model="data.admin.site_title"
              label="Site title"
              class="q-pr-md"
              hint="To replace the default 'LNbits' name and tagline"
            ></q-input>
          </div>
          <div class="col">
            <q-input
              filled
              v-model="data.admin.tagline"
              label="Tagline"
            ></q-input>
          </div>
        </div>

        <div class="row">
          <div class="col">
            <q-input
              filled
              class="q-pr-md"
              type="text"
              v-model="data.admin.description"
              label="Description"
              hint="Short blurb about your lnbits"
            ></q-input>
          </div>
          <div class="col">
            <q-select
              filled
              v-model="data.admin.disabled_ext"
              multiple
              hint="Disable extensions *amilk disabled by default as resource heavy"
              :options="options"
              label="Disable extensions"
            ></q-select>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <q-input
              filled
              class="q-pr-md"
              type="number"
              v-model="data.admin.service_fee"
              label="Sevice fee"
              hint="What percentage to charge per transaction *default 0"
            ></q-input>
          </div>
          <div class="col">
            <q-input
              filled
              v-model="data.admin.default_wallet_name"
              label="Default wallet name"
              hint="Default name for wallets generated without being named"
            ></q-input>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <q-input
              filled
              class="q-pr-md"
              v-model="data.admin.data_folder"
              label="Data folder"
              hint="Where your databases will be saved"
            ></q-input>
          </div>
          <div class="col">
            <q-input
              filled
              class="q-pr-md"
              v-model="data.admin.admin_users"
              label="Admin user"
              hint=""
            ></q-input>
          </div>
        </div>
        <br />

        <q-list bordered class="rounded-borders">
          <q-expansion-item
            expand-separator
            icon="payments"
            :label="data.admin.funding.CLightningWallet.backend_wallet"
            @click="data.admin.funding.CLightningWallet[7] = 1"
          >
            <q-card>
              <q-card-section>
                <q-input
                  filled
                  v-model="data.admin.funding.CLightningWallet.endpoint"
                  label="GRPC Endpoint"
                  class="q-pr-md"
                  hint="ie /home/bob/.lightning/bitcoin/lightning-rpc"
                ></q-input>
              </q-card-section>
            </q-card>
          </q-expansion-item>

          <q-expansion-item
            expand-separator
            icon="payments"
            :label="data.admin.funding.SparkWallet.backend_wallet"
            @click="data.admin.funding.SparkWallet[7] = 1"
          >
            <q-card>
              <q-card-section>
                <div class="row">
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.SparkWallet.endpoint"
                      label="LND REST Endpoint"
                      class="q-pr-md"
                      hint="ie http://localhost:9737/rpc"
                    ></q-input>
                  </div>
                  <div class="col"></div>
                </div>
                <div class="row">
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.SparkWallet.admin_key"
                      label="Access token"
                      class="q-pr-md"
                      hint="Your access token"
                    ></q-input>
                  </div>
                  <div class="col"></div>
                </div>
              </q-card-section>
            </q-card>
          </q-expansion-item>

          <q-expansion-item
            expand-separator
            icon="payments"
            :label="data.admin.funding.LndRestWallet.backend_wallet"
            @click="data.admin.funding.LndRestWallet[7] = 1"
          >
            <q-card>
              <q-card-section>
                <div class="row">
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.LndRestWallet.endpoint"
                      label="LND REST Endpoint"
                      class="q-pr-md"
                      hint="default 127.0.0.1"
                    ></q-input>
                  </div>
                  <div class="col"></div>
                </div>
                <div class="row">
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.LndRestWallet.cert"
                      label="LND self-signed cert"
                      class="q-pr-md"
                      hint="Location of your ssl cert"
                    ></q-input>
                  </div>
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.LndRestWallet.admin_key"
                      label="LND admin macaroon"
                      class="q-pr-md"
                      hint="Your admin macaroon as hex or location"
                    ></q-input>
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </q-expansion-item>

          <q-expansion-item
            expand-separator
            icon="payments"
            :label="data.admin.funding.LndWallet.backend_wallet"
            @click="data.admin.funding.LndWallet[7] = 1"
          >
            <q-card>
              <q-card-section>
                <div class="row">
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.LndWallet.endpoint"
                      label="LND GRPC Endpoint"
                      class="q-pr-md"
                      hint="default 127.0.0.1"
                    ></q-input>
                  </div>
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.LndWallet.port"
                      label="LND GRPC port"
                      class="q-pr-md"
                      hint="Deafault 11009"
                    ></q-input>
                  </div>
                </div>

                <div class="row">
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.LndWallet.cert"
                      label="LND self-signed cert"
                      class="q-pr-md"
                      hint="Location of your ssl cert"
                    ></q-input>
                  </div>
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.LndWallet.admin_key"
                      label="LND admin macaroon"
                      class="q-pr-md"
                      hint="Your admin macaroon as hex or location"
                    ></q-input>
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </q-expansion-item>

          <q-expansion-item
            expand-separator
            icon="payments"
            :label="data.admin.funding.LntxbotWallet.backend_wallet"
            @click="data.admin.funding.LntxbotWallet[7] = 1"
          >
            <q-card>
              <q-card-section>
                <div class="row">
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.LntxbotWallet.admin_key"
                      label="Admin key"
                      class="q-pr-md"
                      hint="use /api in LNTXBOT"
                    ></q-input>
                  </div>
                  <div class="col"></div>
                </div>
              </q-card-section>
            </q-card>
          </q-expansion-item>

          <q-expansion-item
            expand-separator
            icon="payments"
            :label="data.admin.funding.LNPayWallet.backend_wallet"
            @click="data.admin.funding.LNPayWallet[7] = 1"
          >
            <q-card>
              <q-card-section>
                <div class="row">
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.LNPayWallet.cert"
                      label="API key"
                      class="q-pr-md"
                    ></q-input>
                  </div>
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.LNPayWallet.admin_key"
                      label="Admin key"
                      class="q-pr-md q-pb-md"
                    ></q-input>
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </q-expansion-item>

          <q-expansion-item
            expand-separator
            icon="payments"
            :label="data.admin.funding.LnbitsWallet.backend_wallet"
            @click="data.admin.funding.LnbitsWallet[7] = 1"
          >
            <q-card>
              <q-card-section>
                <div class="row">
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.LnbitsWallet.endpoint"
                      label="LNbits endpoint"
                      class="q-pr-md"
                      hint="ie https://lnbits.com, default 127.0.0.1"
                    ></q-input>
                  </div>
                  <div class="col"></div>
                </div>
                <div class="row">
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.LnbitsWallet.admin_key"
                      label="Admin key"
                      class="q-pr-md q-pb-md"
                    ></q-input>
                  </div>
                  <div class="col"></div>
                </div>
              </q-card-section>
            </q-card>
          </q-expansion-item>

          <q-expansion-item
            expand-separator
            icon="payments"
            :label="data.admin.funding.OpenNodeWallet.backend_wallet"
            @click="data.admin.funding.OpenNodeWallet[7] = 1"
          >
            <q-card>
              <q-card-section>
                <div class="row">
                  <div class="col">
                    <q-input
                      filled
                      v-model="data.admin.funding.OpenNodeWallet.admin_key"
                      label="Admin key"
                      class="q-pr-md"
                    ></q-input>
                  </div>
                  <div class="col"></div>
                </div>
              </q-card-section>
            </q-card>
          </q-expansion-item> </q-list
        ><br />
        <q-select
          outlined
          v-model="data.admin.funding_source_primary"
          style="max-width: 300px"
          class="q-pr-md"
          label="Select main funding source"
          :options="data.funding_source"
          label="Outlined"
        ></q-select
        ><br />
        <div>
          <q-btn label="Update" type="submit" color="primary"></q-btn>
        </div>
      </q-form>
    </q-card>
  </div> -->

  <div class="col-4">
    <q-card class="q-mr-md">
      <q-form class="q-px-md q-py-md" @submit="topupWallet">
        <div class="text-h6" class="q-px-md">Wallet topup</div>
        <div class="row">
          <div class="col-8">
            <q-input
              type="text"
              filled
              v-model="wallet.data.id"
              label="Wallet ID"
              class="q-pr-md"
              hint="Use the wallet ID to topup any wallet"
            ></q-input>
          </div>
          <div class="col-4">
            <q-input
              type="number"
              filled
              v-model="wallet.data.amount"
              label="Topup amount"
            ></q-input>
          </div>
        </div>
        <div>
          <q-btn
            class="q-mt-md"
            label="Topup"
            type="submit"
            color="primary"
          ></q-btn>
        </div>
      </q-form>
    </q-card>
  </div>
</div>

{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
  const queryString = window.location.search
  const urlParams = new URLSearchParams(queryString)
  const usr = urlParams.get('usr')
  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        wallet: {data: {}},
        cancel: {},
        tab: 'funding',
        data: {
          funding_source: [
            'CLightningWallet',
            'LndRestWallet',
            'LndWallet',
            'LntxbotWallet',
            'LNPayWallet',
            'LnbitsWallet',
            'OpenNodeWallet'
          ],
          
          admin: {
            edited: [],
            funding: {},
            senddata: {}
          }
        },
        themes: ['classic', 'bitcoin', 'flamingo', 'mint', 'autumn', 'monochrome', 'salvador'],
        options: [
          'bleskomat',
          'captcha',
          'events',
          'example',
          'livestream',
          'lndhub',
          'lnurlp',
          'offlineshop',
          'paywall',
          'splitpayments',
          'subdomains',
          'tpos',
          'usermanager',
          'watchonly',
          'withdraw',
          'copilot',
          'hivemind',
          'jukebox',
          'lnticket',
          'ngrok',
          'amilk'
        ]
      }
    },
    created: function () {
      var self = this
      if (usr != null) {
        self.cancel.on = true
      }
      funding = JSON.parse(String('{{ funding  | tojson|safe }}'))
      var i
      for (i = 0; i < funding.length; i++) {
        self.data.admin.funding[funding[i].backend_wallet] = funding[i]
      }
      let settings = JSON.parse('{{ settings | tojson|safe }}')
      settings.balance = '{{ balance }}'
      this.data.admin = {...this.data.admin, ...settings}
      console.log(this.data.admin)
      console.log(settings)
    },
    methods: {
      addAdminUser(){
        let addUser = this.data.admin_users_add
        let admin_users = this.data.admin.admin_users
        if(addUser.length && !admin_users.includes(addUser)){
          admin_users.push(addUser)
          this.data.admin.admin_users = admin_users
          this.data.admin_users_add = ""
        }
      },
      removeAdminUser(user){
        let admin_users = this.data.admin.admin_users
        this.data.admin.admin_users = admin_users.filter(u => u !== user)
      },
      addAllowedUser(){
        let addUser = this.data.allowed_users_add
        let allowed_users = this.data.admin.allowed_users
        if(addUser.length && !allowed_users.includes(addUser)){
          allowed_users.push(addUser)
          this.data.admin.allowed_users = allowed_users
          this.data.allowed_users_add = ""
        }
      },
      removeAllowedUser(user){
        let allowed_users = this.data.admin.allowed_users
        this.data.admin.allowed_users = allowed_users.filter(u => u !== user)
      },
      addAdSpace(){
        let adSpace = this.data.ad_space_add
        let spaces = this.data.admin.ad_space
        if(adSpace.length && !spaces.includes(adSpace)){
          spaces.push(adSpace)
          this.data.admin.ad_space = spaces
          this.data.ad_space_add = ""
        }
      },
      removeAdSpace(ad){
        let spaces = this.data.admin.ad_space
        this.data.admin.ad_space = spaces.filter(s => s !== ad)
      },
      topupWallet() {
        LNbits.api
          .request(
            'GET',
            '/admin/api/v1/admin/' +
              this.wallet.data.id +
              '/' +
              this.wallet.data.amount,
            this.g.user.wallets[0].adminkey
          )
          .then((response) => {
            this.$q.notify({
              type: 'positive',
              message:
              'Success! Added ' +
              this.wallet.data.amount +
              ' to ' +
              this.wallet.data.id,
              icon: null
            })
            this.wallet.data = {}
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },

      createWallet: function () {
        LNbits.href.createWallet(this.walletName)
      },
      addSource: function (source) {
        var self = this
        self.data.admin.edited.push(source)
        console.log(self.data.admin.edited)
      },
      UpdateLNbits() {
        let {
          admin_users,
          allowed_users,
          admin_ext,
          disabled_ext,
          funding_source,
          force_https,
          service_fee,
          hide_api,
          site_title,
          site_tagline,
          site_description,
          default_wallet_name,
          denomination,
          theme,
          ad_space
        } = this.data.admin
        //console.log("this", this.data.admin)
        let data = {
          admin_users: admin_users.toString(),
          allowed_users: allowed_users.toString(),
          admin_ext: admin_ext.toString(),
          disabled_ext: disabled_ext.toString(),
          funding_source,
          force_https,
          service_fee,
          hide_api,
          site_title,
          site_tagline,
          site_description,
          default_wallet_name,
          denomination,
          theme: theme.toString(),
          ad_space: ad_space.toString()
        }
        console.log(data)
        LNbits.api
          .request(
            'POST',
            '/admin/api/v1/admin/',
            this.g.user.wallets[0].adminkey,
            data
          )
          .then(response => {
            console.log(response.data)
            this.$q.notify({
              type: 'positive',
              message:
                'Success! Added ' +
                this.wallet.amount +
                ' to ' +
                this.wallet.id,
              icon: null
            })
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },

      processing: function () {
        this.$q.notify({
          timeout: 0,
          message: 'Processing...',
          icon: null
        })
      }
    }
  })
</script>
{% endblock %}