{% extends "public.html" %} {% block page %}
<div class="row q-col-gutter-md justify-center">
  <div class="col-12 col-sm-6 col-md-5 col-lg-4">
    <q-card class="q-pa-lg">
      <q-card-section class="q-pa-none">
        <div class="text-center">
          <a class="text-secondary" href="lightning:{{ lnurl }}">
            <q-responsive :ratio="1" class="q-mx-md">
              <qrcode
                :value="'lightning:{{ lnurl }}'"
                :options="{width: 800}"
                class="rounded-borders"
              ></qrcode>
            </q-responsive>
          </a>
        </div>
        <div class="row q-mt-lg">
          <q-btn outline color="grey" @click="copyText('{{ lnurl }}')"
            >Copy Satsdice LNURL</q-btn
          >
        </div>
      </q-card-section>
    </q-card>
  </div>
  <div class="col-12 col-sm-6 col-md-5 col-lg-4 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-mb-sm q-mt-none">
          Chance of winning: {% raw %}{{ chance }}{% endraw %}, Amount
          multiplier: {{ multiplier }}
        </h6>
        <p class="q-my-none">
          Use a LNURL compatible bitcoin wallet to play the satsdice.
        </p>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "satsdice/_lnurl.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        here: location.protocol + '//' + location.host,
        chance: parseFloat('{{chance}}') + '%'
      }
    },
    filters: {
      percent(val) {
        return (chance / 100) * 100 + '%'
      }
    }
  })
</script>
{% endblock %}
