<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>
