<template>
  <div v-if="false && tools.isDebugOn()" class="bg-red text-white">
    <span> isAppRunning: {{ isAppRunning }} - </span>
    <span> deferredPrompt: {{ deferredPrompt }} - </span>
    <span> homescreen: {{ homescreen }} </span>
  </div>
  <div v-if="finishLoading" class="row justify-center">
    <div v-if="!isAppRunning">
      <!-- App not running -->

      <q-btn
        v-if="deferredPrompt"
        glossy
        size="xl"
        label="Installa App"
        @click="installApp"
        icon="fas fa-mobile-alt"
        color="green"
        text-color="white"
      ></q-btn>
      <div v-else>
        <div v-if="$q.platform.is.ios && $q.platform.is.safari && !tools.isDevelop()">
          <q-btn
            glossy
            size="xl"
            label="Installa App"
            @click="viewiOS = !viewiOS"
            icon="fab fa-apple"
            color="green"
            text-color="white"
          ></q-btn>

          <q-slide-transition>
            <!-- Mostra spiegazione per iOS -->
            <div v-if="viewiOS">
              <q-img
                src="images/install_app_on_ios_1.png"
                fit="contain"
                style="min-width: 350px"
                class="q-my-sm"
              ></q-img
              ><br />

              <q-img
                src="images/install_app_on_ios_1b.jpg"
                class="q-mb-md"
              ></q-img
              ><br />

              <q-img
                src="images/install_app_on_ios_2.jpg"
                fit="contain"
              ></q-img>
            </div>
          </q-slide-transition>
        </div>
        <div v-if="$q.platform.is.android">
          <q-btn
            v-if="!tools.isDevelop()"
            glossy
            size="lg"
            label="Installa App"
            @click="viewAndroid = !viewAndroid"
            icon="fab fa-android"
            color="green"
            text-color="white"
          ></q-btn>

          <q-slide-transition>
            <!-- Mostra spiegazione per Android -->
            <div v-if="viewAndroid">
              <div class="q-ma-sm text-h6"> 1) Cliccare sui 3 puntini verticali<br>
              2) Cliccare sulla voce 'Installa App' o 'Schermata Home'<br>
              3) Andare sulla schermata HOME e cliccare sull'icona di RISO.
              </div>
              <q-img
                src="images/install_app_on_android_1.jpg"
                fit="contain"
                style="min-width: 350px"
                class="q-my-sm"
              ></q-img
              ><br />
              <q-img
                src="images/install_app_on_android_2.jpg"
                fit="contain"
                style="min-width: 350px"
                class="q-my-sm"
              ></q-img
              ><br />
              ><br />
              <q-img
                src="images/install_app_on_android_3.jpg"
                fit="contain"
                style="min-width: 350px"
                class="q-my-sm"
              ></q-img
              ><br />
            </div>
          </q-slide-transition>
        </div>
      </div>

    </div>
  </div>
  <!--<div class="row justify-center">
    <CBigBtn
      label="Info" to="" @click="showInfo = true" icon="fas fa-info" color="primary"
      :numcol="3"
      >
    </CBigBtn>
  </div>
  <div v-if="showInfo">

  </div>-->
</template>

<script lang="ts" src="./CCheckAppRunning.ts">
</script>

<style lang="scss" scoped>
@import './CCheckAppRunning.scss';
</style>
