<template>
  <div>
    <div v-if="myel" :class="(editOn ? ` clEditDiv` : ``) +
      `` +
      getClass() +
      (!myel.active ? ` clEditNotActive` : ``)
      ">
      <div v-if="myel.type">
        <q-btn
          v-if="editOn"
          class="btn-edit-floating"
          rounded
          dense
          size="sm"
          color="primary"
          icon="fas fa-pencil-alt"
          @click="clickOnElem"
        >
        </q-btn>
        <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
          <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
            <div :class="myel.class +
              (editOn ? ` clEdit` : ``) +
              getClass() +
              ` ` +
              tools.getClassAnim(myel.anim)
              ">
              {{ myel.container }}
            </div>
          </transition>
        </div>
        <div v-if="myel.type === shared_consts.ELEMTYPE.CARD" class="card-carousel-container">
          <div v-if="editOn" class="elemEdit">Card</div>
          <q-carousel swipeable animated :autoplay="animarecard" v-model="slide" navigation control-text-color="white"
            ref="carousel" transition-next="slide-left" transition-prev="slide-right" :height="myel.heightcarousel"
            width="100%" control-type="flat" class="shadow-2 rounded-borders"
            :style="`background-color: ${myel.color} !important`" @mouseenter="animarecard = false"
            @mouseleave="animarecard = true">
            <template v-slot:control>
              <q-carousel-control position="top-left" :offset="[-10, -10]" class="q-gutter-xs" style="opacity: 0.7">
                <q-btn push round :color="$q.dark.isActive ? `black` : `white`"
                  :text-color="$q.dark.isActive ? `white` : `black`" icon="keyboard_arrow_left"
                  @click="$refs.carousel.previous()"></q-btn>
              </q-carousel-control>
              <q-carousel-control position="top-right" class="q-gutter-xs" :offset="[-10, -10]" style="opacity: 0.7">
                <q-btn push round :color="$q.dark.isActive ? `black` : `white`"
                  :text-color="$q.dark.isActive ? `white` : `black`" icon="keyboard_arrow_right"
                  @click="$refs.carousel.next()"></q-btn>
              </q-carousel-control>
            </template>
            <!-- Iteriamo sui gruppi di card invece che sulle singole card -->
            <q-carousel-slide v-for="(group, groupIndex) in cardGroups" :key="groupIndex" :name="groupIndex">
              <div class="row no-wrap justify-start items-center q-px-sm">
                <template v-for="(rec, cardIndex) in group" :key="cardIndex">
                  <div :class="cardColumnClass">
                    <q-card :class="`flex-card bordered ` +
                      myel.class3 +
                      (rec.link ? ' titolo_card' : '')
                      " :style="rec.style +
                        `; height: ${myel.heightimg || `300px`
                        } !important; width: ${myel.widthimg || `300px`
                        } !important;`
                        " @click="rec.link ? tools.openUrl(rec.link) : undefined">
                      <div class="img-container" :style="`height: ${myel.heightimg.replace('px', '') * 0.7
                        }px; overflow: hidden;`">
                        <q-img :class="tools.getClassAnim(myel.anim2) + ` ` + myel.class4
                          " :src="tools.getImgFileByElem(myel, rec, path)" />
                      </div>
                      <q-card-section class="q-card-section-small">
                        <div :class="rec.size" :style="`color: ` + rec.color">
                          {{ tools.getText(rec.alt) }}
                        </div>
                        <div :class="`q-mt-xs q-mb-xs ` + tools.getClassAnim(myel.anim)
                          " v-html="rec.content"></div>
                        <div v-if="rec.description" class="text-caption" :style="`color: ` + rec.colorsub">
                          {{ rec.description }}
                        </div>
                      </q-card-section>
                    </q-card>
                  </div>
                </template>
              </div>
            </q-carousel-slide>
          </q-carousel>
        </div>

        <div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
          <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem"
            :style="`margin: ` + myel.size">
            &nbsp;
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
          <div>
            <div :class="myel.class +
              (editOn ? ` clEdit` : ``) +
              getClass() +
              ` ` +
              tools.getClassAnim(myel.anim)
              " @click="clickOnElem">
              <CTitle :imgbackground="myel.imgback" :headtitle="myel.title" :sizes="myel.size"
                :styleadd="myel.styleadd">
              </CTitle>
            </div>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
          <div>
            <div :class="myel.class +
              (editOn ? ` clEdit` : ``) +
              getClass() +
              ` ` +
              tools.getClassAnim(myel.anim)
              " @click="clickOnElem">
              <CImgTitle v-if="myel.image" :src="tools.getImgFileByElem(myel, undefined, path)" :title="myel.container"
                :legendinside="myel.container2">
              </CImgTitle>
            </div>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
          <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
            <CImgPoster v-if="myel.image" :src="tools.getImgFileByElem(myel, undefined, path)" :title="myel.container"
              :myheight="myel.heightimg" :vertalign="myel.vertalign" :speed="myel.speed" :elemsText="myel.elemsText"
              :logo="tools.getImgFileByFilename(myel, myel.img)"
              :logoheight="myel.height ? myel.height.toString() : '100'"
              :logowidth="myel.width ? myel.width.toString() : '100'" :fit="myel.fit" :anim="myel.anim">
            </CImgPoster>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
          <div>
            <div :class="myel.class +
              (editOn ? ` clEdit` : ``) +
              getClass() +
              ` ` +
              tools.getClassAnim(myel.anim)
              " @click="clickOnElem" v-html="myel.containerHtml"></div>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.QRCODE">
          <div v-if="editOn" class="elemEdit">QRCODE:</div>
          <CQRCode :read="myel.parambool" :link="myel.container" :textlink="myel.container2"
            :imglogo="tools.getImgFileByElem(myel, undefined, path)"></CQRCode>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
          <div class="text-center">
            <div :class="myel.class +
              (editOn ? ` clEdit` : ``) +
              getClass() +
              ` ` +
              tools.getClassAnim(myel.anim)
              " @click="clickOnElem">
              <q-img :src="tools.getImgFileByElem(myel, undefined, path)" :fit="myel.fit" class="img"
                :width="myel.widthimg ? myel.widthimg : undefined"
                :height="myel.heightimg ? myel.heightimg : undefined"></q-img>
            </div>
          </div>
        </div>

        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
          <div class="text-center">
            <div :class="myel.class +
              (editOn ? ` clEdit` : ``) +
              getClass() +
              ` ` +
              tools.getClassAnim(myel.anim)
              " @click="clickOnElem">
              <q-img :src="tools.getImgFileByElem(myel, undefined, path)" :fit="myel.fit" class="img"
                :width="myel.widthimg ? myel.widthimg : undefined"
                :height="myel.heightimg ? myel.heightimg : undefined"></q-img>
            </div>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
          <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
            <q-video v-if="myel && !!myel.container" :src="myel.container" :ratio="myel.ratio">
            </q-video>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
          <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
            <div v-if="editOn" style="color: gray">
              Pagina: {{ myel.container }}
            </div>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
          <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
            <CMyPageIntro :mypath="myel.container" :maxheightimg="myel.heightimg" :maxwidthimg="myel.widthimg"
              :link="myel.link"></CMyPageIntro>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE">
          <CCardCarousel :myarr="getArrDisciplines()"> </CCardCarousel>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
          <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
            <div v-if="myel.container">
              <!-- Da Fare -->
              <COpenStreetMap :imgmap="myel.container" :urlmap="myel.container2" :title="myel.container3"
                :coordinates="myel.containerHtml" :coord_big="myel.link">
              </COpenStreetMap>
            </div>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
          <section :class="($q.dark.isActive
            ? `bg-black text-white`
            : `bg-white text-grey-10`) + ` padding_gallery text-center`
            ">
            <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
              <q-carousel swipeable animated :autoplay="myel.container2 ? myel.container2 * 1000 : 8000"
                v-model="slide2" arrows :fit="myel.fit" :thumbnails="myel.parambool2" infinite :height="myel.heightimg
                  ? myel.heightimg.toString()
                  : tools.getheightgallery()
                  ">
                <q-carousel-slide v-for="(rec, index) in myel.list" :key="index" :name="index" :img-src="getsrcbyimg(
                  tools.getDirUpload() +
                  `pages/` +
                  path +
                  `/` +
                  rec.imagefile
                )
                  " :alt="rec.alt" class="carousel_slide">
                  <div v-if="myel.parambool" class="absolute-bottom custom-caption" style="margin-bottom: 70px">
                    <div class="text-h5">
                      <span class="text-h6 text-grey-1 shadow-max">{{ index + 1 }}.
                      </span>
                      <span v-if="rec.alt" class="text-h6 text-grey-2 shadow">{{
                        rec.alt
                        }}</span>
                    </div>
                    <div class="text-subtitle1" v-if="rec.description">
                      <span class="text-grey-4 shadow">{{
                        rec.description
                        }}</span>
                    </div>
                  </div>
                </q-carousel-slide>
              </q-carousel>
            </div>
          </section>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
          <section>
            <div class="landing">
              <div class="landing__hero maxwidth1200 text-white">
                <q-carousel animated :autoplay="animare" swipeable infinite navigation transition-next="slide-left"
                  transition-prev="slide-right" v-model="slide" :height="getheightgallery()" width="100%">
                  <q-carousel-slide v-for="(myrec, ind) in myel.list" :key="ind" :name="ind"
                    :img-src="getsrcbyimg(`/images/` + myrec.imagefile)">
                    <div class="landing__header"></div>
                    <div class="landing__hero-content row justify-center q-gutter-xs clgutter">
                      <div class="row">&nbsp;</div>
                      <div class="flex justify-end">
                        <div class="q-gutter-xs testo-banda clgutter">
                          <h1 class="text-h1 shadow-max">
                            {{ tools.getappname() }}
                          </h1>
                          <div class="text-subtitle1 shadow text-italic q-pl-sm">
                            {{ myel.container }}&nbsp;
                          </div>
                          <div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
                            {{ myel.container2 }}
                          </div>
                          <div class="text-subtitle2 shadow text-italic q-pl-sm">
                            {{ myel.container3 }}
                          </div>
                          <div>
                            <br /><br />
                            <div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px" class="home">
                              <br /><br />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!--<div class="landing__arrow absolute-bottom text-center">
                  <i aria-hidden="true"
                     class="q-icon text-h2 text-white material-icons">expand_more</i>
                </div>-->
                  </q-carousel-slide>
                </q-carousel>
              </div>
            </div>
          </section>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
          <div v-if="editOn" class="elemEdit">Calendario Eventi</div>
          <CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
          </CEventsCalendar>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAINVIEW">
          <div v-if="editOn" class="elemEdit">CMainView</div>
          <CMainView></CMainView>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.PROFILETUTORIAL">
          <div v-if="editOn" class="elemEdit">CMyProFileTutorual</div>
          <CMyProfileTutorial />
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKAPPRUNNING">
          <div v-if="editOn" class="elemEdit">CheckAppRunning</div>
          <CCheckAppRunning />
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.REGISTRATION">
          <div v-if="editOn" class="elemEdit">Registrazione</div>

          <div>
            <CRegistration slide="start"/>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.BUTTON">
          <div v-if="editOn" class="elemEdit"></div>
          <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()" @click="clickOnElem">
            <q-btn class="text-center" v-if="myel.container" type="a" rounded :label="myel.container" size=""
              :color="myel.color" :text-color="myel.containerHtml" :icon="myel.container2" :href="myel.link"
              :target="myel.container3">
            </q-btn>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.DASHBOARD">
          <div v-if="editOn" class="elemEdit">CDashboard</div>
          <CDashboard></CDashboard>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.DASHGROUP">
          <div v-if="editOn" class="elemEdit">CDashGroup</div>
          <CDashGroup></CDashGroup>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MOVEMENTS">
          <div v-if="editOn" class="elemEdit">Lista Movimenti</div>
          <CMovements :showbuttolastmov="true"></CMovements>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CSENDRISTO">
          <div v-if="editOn" class="elemEdit">CSendRISTo</div>
          <CSendRISTo></CSendRISTo>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ">
          <div v-if="editOn" class="elemEdit">Visualizzatore Tabelle</div>
          <CGridOriz :table="myel.container" :tipovisu="myel.number" :prop_search="myel.parambool"
            :finder="myel.parambool2" :showMap="myel.parambool3" :heightcarousel="myel.heightcarousel"
            :prop_modif="myel.parambool4"></CGridOriz>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.SEARCHPRODUCT">
          <CSearchProduct v-model="myel.catalogo">
          </CSearchProduct>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGLIST">
          <div v-if="editOn" class="elemEdit">Cataloghi</div>
          <q-tabs v-if="tools.isEditor() || tools.isGrafico()" v-model="tabcatalogo" dense class="bg-green text-white">
            <q-tab name="griglia" icon="fas fa-eye" label="Griglia"> </q-tab>
            <q-tab name="statistiche" icon="fas fa-chart-pie" label="Statistiche"> </q-tab>
            <q-tab name="lista" icon="fas fa-list" label="Lista"> </q-tab>
            <q-tab name="tutorial" icon="fas fa-info" label="Tutorial"> </q-tab>
          </q-tabs>
          <q-tab-panels v-model="tabcatalogo" animated keep-alive>
            <q-tab-panel name="lista">
              <CGridOriz table="catalogs" :tipovisu="costanti.VISUTABLE_TABLELIST" :prop_search="true" :finder="true"
                :isCatalogoGenerale="myel.parambool3"
                :showMap="false" :prop_modif="tools.isAdmin()" :enableExport="true"></CGridOriz>
            </q-tab-panel>

            <q-tab-panel name="griglia">
              <CCatalogList :prop_search="myel.parambool" :finder="myel.parambool2"
                :heightcarousel="myel.heightcarousel" :heightimg="myel.heightimg" :widthimg="myel.widthimg"
                :heightcard="myel.heightcard" :widthcard="myel.widthcard"
                :isCatalogoGenerale="myel.parambool3">
              </CCatalogList>
            </q-tab-panel>
            <q-tab-panel name="tutorial">
              <div class="q-pa-md q-ma-sm text-center">
                <q-btn rounded label="Apri Tutorial" color="primary" @click="naviga('/tutorial')"></q-btn>
              </div>
            </q-tab-panel>
            <q-tab-panel name="statistiche">
              <div class="q-pa-md q-ma-sm text-center">
                <CStatMacro></CStatMacro>
              </div>
            </q-tab-panel>
          </q-tab-panels>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.STATUSREG">
          <div v-if="editOn" class="elemEdit">CStatusReg</div>
          <CStatusReg> </CStatusReg>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKIFISLOGGED">
          <div v-if="editOn" class="elemEdit">CCheckIfIsLogged</div>
          <CCheckIfIsLogged :showalways="myel.container"></CCheckIfIsLogged>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.VISUVIDEOPROMOANDPDF">
          <div v-if="editOn" class="elemEdit">Visu Video Promo and PDF</div>
          <CVisuVideoPromoAndPDF :showalways="myel.container"></CVisuVideoPromoAndPDF>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.INFO_VERSION">
          <div>Versione: {{ tools.getvers() }}</div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.BOTT_CONDIVIDI">
          <div class="row justify-evenly items-center q-pa-sm q-ma-sm">
            <q-btn icon="fas fa-share" text-color="blue" type="a" size="md" color="yellow" :class="myel.class +
              (editOn ? ` clEdit` : ``) +
              getClass() +
              ` ` +
              tools.getClassAnim(myel.anim)
              " rounded :label="$t('reg.link_reg_and_msg')" @click="clickshare">
            </q-btn>
          </div>
        </div>
        <div v-else-if="
          myel.type === shared_consts.ELEMTYPE.BOTT_CHAT_TERRITORIALE
        ">
          <div v-if="editOn" class="elemEdit">Bottone Chat Territoriale</div>
          <div class="row justify-evenly items-center">
            <q-btn v-if="tools.getLinkChatTerritoriale()" icon="fab fa-telegram" color="blue" type="a" size="md" rounded
              :label="$t('dashboard.link_gruppo_telegram', {
                prov: tools.getProvincia(),
              })
                " :href="tools.getLinkChatTerritoriale()" target="__blank">
            </q-btn>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
          <div v-if="editOn" class="elemEdit">
            Msg di Controllo Verifica Email
          </div>
          <div class="q-pa-xs q-gutter-md">
            <div v-if="tools.isLogged() && !tools.isVerified()" class="text-verified">
              {{ $t("components.authentication.email_verification.link_sent") }}
            </div>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.PRESENTAZIONE">
          <div v-if="editOn" class="elemEdit">Pagina di Presentazione</div>
          <CPresentazione></CPresentazione>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MYACTIVITIES">
          <div v-if="editOn" class="elemEdit">Pagina Attività</div>
          <CMyActivities></CMyActivities>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.ECOMMERCE">
          <div v-if="editOn" class="elemEdit">PRODOTTI ECOMMERCE:</div>
          <CECommerce></CECommerce>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGO">
          <CCatalogo v-model="myel.catalogo" :idPage="idPage" @updateCatalogo="updateCatalogoEmit(myel.catalogo)" />
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPA">
          <div v-if="editOn" class="elemEdit">MAPPA:</div>
          <!--<CMapMarker :coord_center="{lat: 47.41322, long: -1.219482}"

        ></CMapMarker>-->
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPAUTENTI">
          <div v-if="editOn" class="elemEdit">MAPPA UTENTI:</div>
          <CMapUsers></CMapUsers>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPAGETCOORDINATE">
          <div v-if="editOn" class="elemEdit">MAPPA COORDINATE:</div>
          <CMapGetCoordinates></CMapGetCoordinates>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.EDITADDRESSBYCOORD">
          <div v-if="editOn" class="elemEdit">EDIT ADDRESS BY COORD:</div>
          <CMapEditAddressByCoord :editaddress="true" v-model:model-value="coordaddr"></CMapEditAddressByCoord>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPACOMUNI">
          <div v-if="editOn" class="elemEdit">MAPPA COMUNI:</div>
          <CMapComuni></CMapComuni>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.TOOLSAI">
          <div v-if="editOn" class="elemEdit">STRUMENTI AI:</div>
          <CAITools></CAITools>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.NOTIFATTOP">
          <div v-if="editOn" class="elemEdit">Notifiche in Cima</div>
          <CNotifAtTop></CNotifAtTop>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKTESTENV">
          <div v-if="editOn" class="elemEdit">Check Sito di Test</div>
          <q-banner v-if="tools.isTest() && false" rounded dense class="bg-negative text-white" color="primary q-title"
            style="text-align: center">
            <template v-slot:avatar>
              <q-icon name="fas fa-exclamation-triangle" color="yellow" size="xs" />
            </template>
            <span class="mybanner"> TEST !</span>
          </q-banner>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKNEWVERSION">
          <div v-if="editOn" class="elemEdit">Controllo Nuova Versione</div>
          <q-banner v-if="globalStore.isNewVersionAvailable" rounded dense class="bg-green text-white"
            color="primary q-title" style="text-align: center">
            <template v-slot:avatar>
              <q-icon name="fas fa-exclamation-triangle" color="yellow" size="xs" />
            </template>
            <div v-if="$q.platform.is.ios">
              <span class="mybanner">Chiudere e Riaprire la App, per completare
                l'Aggiornamento</span>
            </div>
            <div v-else>
              <span class="mybanner">Aggiornamento APP in corso ... Se dopo 1 minuto non dovesse
                scomparire questo messaggio, chiudere e riaprire la
                pagina.</span>
            </div>
          </q-banner>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.BTN_REG">
          <q-btn rounded size="md" color="primary" :to="`/registrati/${tools.getInvitante()}`"
            :label="$t('reg.submit')">
          </q-btn>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.BTN_REG_BYBOT">
          <q-btn type="a" rounded size="lg" color="primary" href="/bot" :label="$t('reg.submit')" :class="myel.class +
            (editOn ? ` clEdit` : ``) +
            getClass() +
            ` ` +
            tools.getClassAnim(myel.anim)
            ">
          </q-btn>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.BTN_LOGIN">
          <q-btn :class="myel.class +
            (editOn ? ` clEdit` : ``) +
            getClass() +
            ` ` +
            tools.getClassAnim(myel.anim)
            " rounded size="lg" color="primary" @click="PagLogin">
            {{ $t("login.enter") }}
          </q-btn>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
          <LandingFooter />
        </div>
        <div v-if="editOn">
          <div class="q-ma-md"></div>
        </div>
      </div>
    </div>

    <q-dialog v-model="visushare" transition-show="slide-up" transition-hide="slide-down" :maximized="$q.screen.lt.sm">
      <CShareSocial v-if="social && social.description" :description="social.description" :title="social.title"
        :url="social.url">
      </CShareSocial>
    </q-dialog>
  </div>
</template>

<script lang="ts" src="./CMyElem.ts">
</script>
<style lang="scss" scoped>
@import "./CMyElem.scss";
</style>
