<template>
  <div v-if="showalways || (!showalways && !tools.isLogged())">
    <div class="q-pa-md q-gutter-sm">
      <div class=" 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
            class="text-white bg-red"
            color="primary q-title"
            style="text-align: center"
          >
            <template v-slot:avatar>
              <q-icon :key="2" name="fas fa-sign-in-alt" color="white" />
            </template>
            <div :key="3">
              Accedi con le tue credenziali per utilizzare la APP e per unirti
              al Circuito di scambio RIS del tuo territorio
            </div>
            <template v-slot:action>
              <div>
                <q-btn
                  flat
                  color="white"
                  @click="tools.openrighttoolbar()"
                  >{{ $t('login.enter') }}
                </q-btn>
              </div>

              <!--<CRegistration />-->
            </template>
          </q-banner>
        </transition-group>
        <q-separator inset />
        <br>
        <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>
