{% extends "public.html" %} {% 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-img v-if="banner" :src="banner" transition="slide-up"></q-img>
      <q-card-section class="q-pa-none">
        <h3 class="q-my-none q-pa-lg">{{ event_name }}</h3>
        <br />
        <div v-html="formatDescription"></div>
        <br />
      </q-card-section>
    </q-card>
    <q-card class="q-pa-lg">
      <q-card-section class="q-pa-none">
        <h5 class="q-mt-none">Buy Ticket</h5>
        <q-form @submit="Invoice()" class="q-gutter-md">
          <q-input
            filled
            dense
            v-model.trim="formDialog.data.name"
            label="Your name "
            :rules="[val => nameValidation(val)]"
          ></q-input>
          <q-input
            filled
            dense
            v-model.trim="formDialog.data.email"
            type="email"
            label="Your email "
            :rules="[val => !!val || '* Required', val => emailValidation(val)]"
            lazy-rules
          ></q-input>

          <div class="row q-mt-lg">
            <q-btn
              unelevated
              color="primary"
              :disable="formDialog.data.name == '' || formDialog.data.email == '' || Boolean(paymentReq)"
              type="submit"
              >Submit</q-btn
            >
            <q-btn @click="resetForm" flat color="grey" class="q-ml-auto"
              >Cancel</q-btn
            >
          </div>
        </q-form>
      </q-card-section>
    </q-card>

    <q-card v-show="ticketLink.show" class="q-pa-lg">
      <div class="text-center q-mb-lg">
        <q-btn
          unelevated
          size="xl"
          :href="ticketLink.data.link"
          target="_blank"
          color="primary"
          type="a"
          >Link to your ticket!</q-btn
        >
        <br /><br />
        <p>You'll be redirected in a few moments...</p>
      </div>
    </q-card>
  </div>

  <q-dialog v-model="receive.show" position="top" @hide="closeReceiveDialog">
    <q-card
      v-if="!receive.paymentReq"
      class="q-pa-lg q-pt-xl lnbits__dialog-card"
    >
    </q-card>
    <q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <div class="text-center q-mb-lg">
        <lnbits-qrcode
          :href="'lightning:' + receive.paymentReq"
          :value="'lightning:' + receive.paymentReq.toUpperCase()"
        ></lnbits-qrcode>
      </div>
      <div class="row q-mt-lg">
        <q-btn outline color="grey" @click="copyText(receive.paymentReq)"
          >Copy invoice</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
      </div>
    </q-card>
  </q-dialog>
</div>

{% endblock %} {% block scripts %}
<script>
  const event_id = '{{ event_id }}'
  const event_name = '{{ event_name }}'
  const event_info = '{{ event_info | tojson }}'
  const event_banner = JSON.parse('{{ event_banner | tojson | safe }}')
</script>
<script src="{{ static_url_for('events/static', path='js/display.js') }}"></script>
{% endblock %}