<template>
  <q-page>
    <CMyPage title="">
            <span>{{ setmeta({
                title: 'Home',
                description: $t('msg.myAppDescription'),
                keywords: $t('msg.keywords_base') } ) }}
            </span>

      <div class="landing">
        <div v-if="!isLogged">
          <div style="height: 15px;">
          </div>
          <div class="text-center">
            <q-img src="statics/images/background.jpg" class="logo"></q-img>
          </div>
        </div>

        <div v-if="!tools.sito_online(true)" class="row text-h4 text-center bg-warning">
          SITO IN AGGIORNAMENTO!
        </div>

        <!--
      <div class="row justify-center">
        <div class="text-h5 boldhigh text-uppercase"> {{ $t('event.dateTimeStart') }}</div>
      </div>
      <div class="text-center">
        <q-img src="statics/images/data_start.jpg" class="data_start"></q-img>
      </div>
      -->
        <div v-if="isLogged">
          <CVerifyEmail v-if="!isEmailVerified">

          </CVerifyEmail>

          <CVerifyTelegram v-if="TelegCode || !TelegVerificato">

          </CVerifyTelegram>

        </div>
        <div v-else>
          <div v-if="!isLogged && static_data.functionality.ENABLE_REGISTRATION" align="center"
               style="margin:20px;">
            <q-btn rounded size="lg" color="primary" @click="openrighttoolbar">{{$t('login.enter')}}
            </q-btn>
          </div>

          <!--
                    <div v-if="!isLogged && static_data.functionality.ENABLE_REGISTRATION" align="center" style="margin:20px;">
                      <q-btn rounded size="lg" color="primary" to="/signup">{{$t('reg.submit')}}
                      </q-btn>
                    </div>
          -->

        </div>

        <q-tabs
          v-model="tab"
          dense
          class="bg-blue text-white shadow-2"
          indicator-color="white"
          align="center"
          narrow-indicator
          :breakpoint="350"
          @input="changetab"
        >
          <q-tab name="guida" icon="fas fa-check" :label="$t('pages.home')"></q-tab>
          <q-tab name="zoom" icon="fas fa-video" :label="$t('pages.nextzoom')"></q-tab>
          <q-tab name="statistiche" icon="fas fa-chart-line" :label="$t('pages.status')"></q-tab>

        </q-tabs>

        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="guida">
            <div v-if="isLogged">
              <CStatus :dense="false"></CStatus>
            </div>

          </q-tab-panel>
          <q-tab-panel name="zoom">
            <CNextZoom>

            </CNextZoom>

          </q-tab-panel>
          <q-tab-panel name="statistiche">
            <CStatusReg>

            </CStatusReg>

          </q-tab-panel>
        </q-tab-panels>

        <!--<div v-if="false">
            <CTitleBanner v-if="false" class="q-pa-xs" :title="$t('text.how')" bgcolor="bg-primary"
                          clcolor="text-white"
                          mystyle=" " myclass="myshad" canopen="true">
                <CImgText src="">
                    <q-icon name="fas fa-gift" size="lg" inverted color="primary"></q-icon>
                    <div class="q-pa-sm" v-if="toolsext.isLang('it')">
                        <p class="cltexth4 text-green-8">È un gioco etico di <span class="boldhigh">Economia Circolare</span>
                            dove ognuno
                            entrando porta in dono <span class="boldhigh">33 €</span> ed esce con <span
                                    class="boldhigh">1848 €</span> alla fine del ciclo.</p>
                        <p class="cltexth4 text-red-8">E' uno scambio di Reciproco Aiuto</p>

                        <p class="cltexth4 text-blue-8">
                            E' un sistema Circolare Umano:<br>
                            "Con il minimo sforzo ottengo il massimo apporto".
                        </p>
                    </div>
                </CImgText>

            </CTitleBanner>

            <CTitleBanner class="q-pa-xs" :title="$t('text.step')" bgcolor="bg-positive" clcolor="text-white"
                          mystyle=" " canopen="true">
                <div class="q-gutter-md">
                    <q-carousel
                            v-model="mysteps"
                            transition-prev="slide-right"
                            transition-next="slide-left"
                            swipeable
                            control-color="white"
                            padding
                            ref="mysteps"
                            height="400px"
                            class="bg-primary text-white shadow-1 rounded-borders"
                    >
                        <template v-slot:control>
                            <q-carousel-control
                                    position="top-left"
                                    class="q-gutter-xs"
                                    style="opacity: 0.6;">
                                <q-btn
                                        push round color="white" text-color="black" icon="arrow_left"
                                        @click="$refs.mysteps.previous()"></q-btn>
                            </q-carousel-control>
                            <q-carousel-control
                                    position="top-right"
                                    class="q-gutter-xs"
                                    style="opacity: 0.6;">
                                <q-btn
                                        push round color="white" text-color="black" icon="arrow_right"
                                        @click="$refs.mysteps.next()"></q-btn>
                            </q-carousel-control>
                        </template>
                        <q-carousel-slide v-for="(rec, index) in arrsteps" :key="index" :name="index"
                                          class="column no-wrap flex-center">
                            <div class="row no-wrap items-center justify-around q-gutter-lg">
                                <q-icon :name="rec.myicon" size="56px"></q-icon>
                                <q-icon v-if="rec.myicon2" :name="rec.myicon2" size="56px"></q-icon>
                                <q-icon v-if="rec.myicon3" :name="rec.myicon3" size="56px"></q-icon>
                                <q-img v-if="rec.myimg" :src="rec.myimg"
                                       style="height: 56px; width: 56px;"></q-img>
                            </div>
                            <div class="q-mt-md text-center step-text" v-html="gettitle_advise(rec)">
                            </div>
                        </q-carousel-slide>
                    </q-carousel>
                    <div class="row justify-center">
                        <q-btn-toggle
                                glossy
                                v-model="mysteps"
                                :options="arrsteps"
                        ></q-btn-toggle>
                    </div>
                </div>
            </CTitleBanner>

            <section class="q-pa-sm bg-primary landing__swirl-bg text-center">
                <div class="landing__features row justify-center column" style="max-width: 800px;">
                    <q-carousel
                            animated
                            swipeable
                            navigation
                            infinite
                            transition-next="slide-left"
                            transition-prev="slide-right"
                            v-model="slide_video"
                            ref="slide_video"
                            :height="heightgallvideo"
                            width="100%"
                    >
                        <template v-slot:control>
                            <q-carousel-control
                                    position="top-left"
                                    class="q-gutter-xs"
                                    style="opacity: 0.6;">
                                <q-btn
                                        push round color="white" text-color="black" icon="keyboard_arrow_left"
                                        @click="$refs.slide_video.previous()"></q-btn>
                            </q-carousel-control>
                            <q-carousel-control
                                    position="top-right"
                                    class="q-gutter-xs"
                                    style="opacity: 0.6;">
                                <q-btn
                                        push round color="white" text-color="black" icon="keyboard_arrow_right"
                                        @click="$refs.slide_video.next()"></q-btn>
                            </q-carousel-control>
                        </template>

                        <q-carousel-slide v-if="getvideonum_mp4 > 0" v-for="index in getvideonum_mp4"
                                          :name="`mp4_`+index"
                                          :key="index">

                            <div v-if="tools.getvideourl(index, false)"
                                 class="row justify-evenly items-center q-gutter-sm ">
                                <div class="text-center">
                                    <div class="subtitle_small text-blue"
                                         v-html="tools.getvideotitle(index, false)"></div>

                                    <div class="">
                                        <q-media-player
                                                type="video"
                                                :sources="arrvideo_mp4[index]"
                                                :poster="tools.getvideoposter(index)"
                                        >
                                        </q-media-player>
                                    </div>
                                </div>

                            </div>

                        </q-carousel-slide>

                        <q-carousel-slide v-if="getvideonum_youtube > 0" v-for="index in getvideonum_youtube"
                                          :name="`yt_`+index"
                                          :key="index">
                            <div v-if="tools.getvideourl(index, true)"
                                 class="row justify-evenly items-center q-gutter-sm ">

                                <div class="text-center">
                                    <div class="subtitle_small text-blue"
                                         v-html="tools.getvideotitle(index, true)"></div>
                                    <div class="">
                                        <iframe
                                                :width="tools.getwidthscale(mythis, getValDb('YT_W', false), 800)"
                                                :height="tools.getheightbywidth(mythis, getValDb('YT_W', false), getValDb('YT_H', false), 800)"
                                                :src="arrvideo_yt[index]"
                                                frameborder="0"
                                                allowfullscreen
                                        ></iframe>
                                    </div>
                                </div>

                            </div>

                        </q-carousel-slide>


                    </q-carousel>

                </div>
            </section>


            <CTitleBanner class="q-pa-xs" :title="$t('text.what')" bgcolor="bg-secondary" clcolor="text-white"
                          mystyle=" " canopen="true">
                <div class="q-mx-md cltexth4">
                    1) Voglia di giocare, e desiderio di Donare 33 € per aiutare un'altra persona a realizzare i
                    propri
                    sogni.<br><br>
                    2) L'impegno di seguire delle indicazioni nei tempi stabiliti all' interno di una chat, dove
                    ogni
                    passaggio è spiegato e guidato.<br><br>
                    3) Parlare e condividere ai tuoi amici un messaggio dove spieghi questo sistema,
                    impegnandoti così a
                    trovare
                    2 persone interessate ad entrare.
                </div>

            </CTitleBanner>

            <CTitleBanner cl ass="q-pa-xs" :title="$t('text.advise')" bgcolor="bg-primary" clcolor="text-white"
                          mystyle=" " myclass="myshad" canopen="true">
                <div v-if="toolsext.isLang('it')">
                    <q-list dense bordered padding class="rounded-borders">
                        <div v-for="(rec, index) in advise" :key="index">
                            <q-item :class="rec.color">
                                <q-item-section avatar>
                                    <q-icon :name="geticonlist(rec)" :color="rec.iconcolor" inverted></q-icon>
                                </q-item-section>

                                <q-item-section>
                                    <span v-html="gettitle_advise(rec)" :style="`color: `+rec.textcolor"></span>
                                </q-item-section>
                            </q-item>
                            <q-separator spaced/>
                        </div>
                    </q-list>
                </div>
            </CTitleBanner>



            <div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>

        </div>-->


      </div>
    </CMyPage>
  </q-page>
</template>

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

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