{% extends "public.html" %} {% block scripts %}
<script src="/core/static/js/index.js"></script>
{% endblock %} {% block page %}
<div class="row q-col-gutter-md justify-center">
  <div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
    <q-card>
      <q-card-section>
        {% if lnurl %}
        <q-btn
          unelevated
          color="primary"
          @click="processing"
          type="a"
          href="{{ url_for('core.lnurlwallet') }}?lightning={{ lnurl }}"
        >
          Press to claim bitcoin
        </q-btn>
        {% else %}
        <q-form @submit="createWallet" class="q-gutter-md">
          <q-input
            filled
            dense
            v-model="walletName"
            label="Name your {{SITE_TITLE}} wallet *"
          ></q-input>
          <q-btn
            unelevated
            color="primary"
            :disable="walletName == ''"
            type="submit"
            >Add a new wallet</q-btn
          >
        </q-form>
        {% endif %}
      </q-card-section>
    </q-card>

    <q-card>
      <q-card-section>
        <h3 class="q-my-none">{{SITE_TITLE}}</h3>
        <h5 class="q-my-md">{{SITE_TAGLINE}}</h5>
        <div v-if="'{{SITE_TITLE}}' == 'LNbits'">
          <p>
            Easy to set up and lightweight, LNbits can run on any
            lightning-network funding source, currently supporting LND,
            c-lightning, OpenNode, lntxbot, LNPay and even LNbits itself!
          </p>
          <p>
            You can run LNbits for yourself, or easily offer a custodian
            solution for others.
          </p>
          <p>
            Each wallet has its own API keys and there is no limit to the number
            of wallets you can make. Being able to partition funds makes LNbits
            a useful tool for money management and as a development tool.
          </p>
          <p>
            Extensions add extra functionality to LNbits so you can experiment
            with a range of cutting-edge technologies on the lightning network.
            We have made developing extensions as easy as possible, and as a
            free and open-source project, we encourage people to develop and
            submit their own.
          </p>
          <div class="row q-mt-md q-gutter-sm">
            <q-btn
              outline
              color="grey"
              type="a"
              href="https://github.com/lnbits/lnbits-legend"
              target="_blank"
              rel="noopener"
              >View project in GitHub</q-btn
            >
            <q-btn
              outline
              color="grey"
              type="a"
              href="https://legend.lnbits.com/paywall/GAqKguK5S8f6w5VNjS9DfK"
              target="_blank"
              rel="noopener"
              >Donate</q-btn
            >
          </div>
        </div>
        <p v-else>{{SITE_DESCRIPTION}}</p>
      </q-card-section>
    </q-card>
  </div>

  <!-- Ads -->
  <div class="col-12 col-md-3 col-lg-3" v-if="'{{SITE_TITLE}}' == 'LNbits'">
    <div class="row q-col-gutter-lg justify-center">
      <div class="col-6 col-sm-4 col-md-8 q-gutter-y-sm">
        <q-btn
          flat
          color="secondary"
          label="Runs on"
          class="full-width"
        ></q-btn>
        <div class="row">
          <div class="col">
            <a href="https://github.com/ElementsProject/lightning">
              <q-img
                contain
                :src="($q.dark.isActive) ? '/static/images/cln.png' : '/static/images/clnl.png'"
              ></q-img>
            </a>
          </div>
          <div class="col q-pl-md">
            <a href="https://github.com/lightningnetwork/lnd">
              <q-img
                contain
                :src="($q.dark.isActive) ? '/static/images/lnd.png' : '/static/images/lnd.png'"
              ></q-img>
            </a>
          </div>
        </div>

        <div class="row">
          <div class="col">
            <a href="https://opennode.com">
              <q-img
                contain
                :src="($q.dark.isActive) ? '/static/images/opennode.png' : '/static/images/opennodel.png'"
              ></q-img>
            </a>
          </div>
          <div class="col q-pl-md">
            <a href="https://lnpay.co/">
              <q-img
                contain
                :src="($q.dark.isActive) ? '/static/images/lnpay.png' : '/static/images/lnpayl.png'"
              ></q-img>
            </a>
          </div>
        </div>

        <div class="row">
          <div class="col">
            <a href="https://github.com/shesek/spark-wallet">
              <q-img
                contain
                :src="($q.dark.isActive) ? '/static/images/spark.png' : '/static/images/sparkl.png'"
              ></q-img>
            </a>
          </div>
          <div class="col q-pl-md">
            <a href="https://t.me/lntxbot">
              <q-img
                contain
                :src="($q.dark.isActive) ? '/static/images/lntxbot.png' : '/static/images/lntxbotl.png'"
              ></q-img>
            </a>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <a href="https://github.com/rootzoll/raspiblitz">
              <q-img
                contain
                :src="($q.dark.isActive) ? '/static/images/blitz.png' : '/static/images/blitzl.png'"
              ></q-img>
            </a>
          </div>
          <div class="col q-pl-md">
            <a href="https://getumbrel.com/">
              <q-img
                contain
                :src="($q.dark.isActive) ? '/static/images/umbrel.png' : '/static/images/umbrell.png'"
              ></q-img>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
