<template>
  <div v-if="showalways || (!showalways && !tools.isLogged())">
    <div class="q-pa-md q-gutter-sm">
      <div id="logo" class="text-center">
        <q-img
          id="logoimg"
          :src="tools.getimglogo()"
          class="q-my-sm"
          alt="logo APP"
          style="height: 100px; width: 100px"
        />
      </div>

      <q-banner
        v-if="site.confpages.videoPromo"
        rounded
        dense
        size="lg"
        class="bg-grey-3 shadow-5 q-my-sm"
        color="primary q-title"
        style="text-align: center"
      >
        <div class="mybanner bg-blue text-white">Video di Presentazione:</div>
        <br />
        <q-video :src="site.confpages.videoPromo" :ratio="16 / 9"> </q-video>
      </q-banner>

      <q-banner
        v-if="site.confpages.PDFPromo"
        rounded
        dense
        size="lg"
        class="bg-grey-3 shadow-5 q-my-sm"
        color="primary q-title"
        style="text-align: center"
      >
        <div class="mybanner bg-blue text-white">PDF Presentazione RISO:</div>
        <br />
        <template v-slot:action>
          <q-btn
            type="a"
            rounded
            icon="fab fa-telegram"
            color="primary"
            :href="site.confpages.PDFPromo"
            target="_blank"
            label="Scarica PDF"
          >
          </q-btn>
        </template>
      </q-banner>

      <div class="text-h6 text-center">
        <transition-group
          name="fade"
          mode="out-in"
          appear
          enter-active-class="animazione fadeIn"
          leave-active-class="animazione fadeOut"
        >
          <q-banner
            :key="1"
            rounded
            dense
            size="lg"
            class="shadow-5 q-my-sm"
            color="primary q-title"
            style="text-align: center"
          >
            <template v-slot:avatar>
              <q-icon :key="2" name="signal_wifi_off" color="primary" />
            </template>
            <div class="mybanner" :key="3">
              Accedi per Unirti alla RETE e al Circuito di scambio RIS
            </div>
            <template v-slot:action>
              <q-btn
                rounded
                icon="fas fa-user"
                color="primary"
                @click="tools.openrighttoolbar()"
                >{{ $t('login.enter') }}
              </q-btn>
              <CRegistration />
            </template>
          </q-banner>
        </transition-group>
        <q-banner
          rounded
          dense
          size="lg"
          class="shadow-5"
          color="primary q-title"
          style="text-align: center"
        >
          <div class="mybanner" :key="3">
            👉🏻 Entra nel canale Telegram per unirti al gruppo Provinciale:
          </div>
          <template v-slot:action>
            <q-btn
              type="a"
              rounded
              icon="fab fa-telegram"
              color="primary"
              href="https://t.me/+pZ40VpmL1NhkZjE0"
              target="_blank"
              label="Progetto RISO"
            >
            </q-btn>
          </template>
        </q-banner>
      </div>
      <br />
      <q-banner rounded class="bg-green-8 text-white">
        <div class="text-h6 text-center">
          Visualizza la pagina di Aiuto<br />
          <div class="text-center">
            <q-btn
              :color="$q.dark.isActive ? `black` : `white`"
              push
              glossy
              :text-color="$q.dark.isActive ? `white` : `black`"
              label="Pagina Aiuto"
              to="/istruzioni"
            />
          </div>
        </div>
      </q-banner>
    </div>
  </div>
</template>

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

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