{% extends "public.html" %} {% block page %}
<div class="q-pa-sm" style="width: 240px; margin: 10px auto">
  <q-card class="my-card">
    <div class="column">
      <div class="col">
        <center>
          <q-btn
            flat
            round
            dense
            @click="openCompose"
            icon="face"
            style="font-size: 60px"
          ></q-btn>
        </center>
      </div>
      <center>
        <div class="col" style="margin: 15px; font-size: 22px">
          Title: {% raw %} {{ copilot.title }} {% endraw %}
        </div>
      </center>
      <q-separator></q-separator>
      <div class="col">
        <div class="row">
          <div class="col">
            <q-btn
              class="q-mt-sm q-ml-sm"
              color="primary"
              @click="fullscreenToggle"
              label="Screen share"
              size="sm"
            >
            </q-btn>
          </div>
        </div>
        <div class="row q-pa-sm">
          <div class="col">
            <q-btn
              style="width: 95%"
              color="primary"
              @click="animationBTN('rocket')"
              label="rocket"
              size="sm"
            />
          </div>
          <div class="col">
            <q-btn
              style="width: 95%"
              color="primary"
              @click="animationBTN('confetti')"
              label="confetti"
              size="sm"
            />
          </div>
          <div class="col">
            <q-btn
              style="width: 95%"
              color="primary"
              @click="animationBTN('face')"
              label="face"
              size="sm"
            />
          </div>
        </div>
        <div class="row q-pa-sm">
          <div class="col">
            <q-btn
              style="width: 95%"
              color="primary"
              @click="animationBTN('rick')"
              label="rick"
              size="sm"
            />
          </div>
          <div class="col">
            <q-btn
              style="width: 95%"
              color="primary"
              @click="animationBTN('martijn')"
              label="martijn"
              size="sm"
            />
          </div>
          <div class="col">
            <q-btn
              style="width: 95%"
              color="primary"
              @click="animationBTN('bitcoin')"
              label="bitcoin"
              size="sm"
            />
          </div>
        </div>
      </div>
    </div>
  </q-card>
</div>

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

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data() {
      return {
        fullscreen_cam: true,
        textareaModel: '',
        iframe: '',
        copilot: {}
      }
    },
    methods: {
      iframeChange: function (url) {
        this.connection.send(String(url))
      },
      fullscreenToggle: function () {
        self = this
        self.animationBTN(String(this.fullscreen_cam))
        if (this.fullscreen_cam) {
          this.fullscreen_cam = false
        } else {
          this.fullscreen_cam = true
        }
      },
      openCompose: function () {
        let params =
          'scrollbars=no, resizable=no,status=no,location=no,toolbar=no,menubar=no,width=1200,height=644,left=410,top=100'
        open('../cp/', 'test', params)
      },
      animationBTN: function (name) {
        self = this
        LNbits.api
          .request(
            'GET',
            '/copilot/api/v1/copilot/ws/' + self.copilot.id + '/none/' + name
          )
          .then(function (response1) {
            self.$q.notify({
              color: 'green',
              message: 'Sent!'
            })
          })
          .catch(err => {
            LNbits.utils.notifyApiError(err)
          })
      }
    },
    created: function () {
      self = this
      self.copilot = JSON.parse(localStorage.getItem('copilot'))
    }
  })
</script>
{% endblock %}
