<template>
  <div>
    <!-- CMyElem -->
    <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>
        <CCardCarouselComp
          v-else-if="myel.type === shared_consts.ELEMTYPE.CARD"
          :myel="myel"
          :edit-on="editOn"
          :path="path"
          :card-column-class="cardColumnClass()"
          :card-width="myel.widthcard"
          :card-height="myel.heightcarousel"
          :card-img="myel.heightimg"

        />
        <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"
          class="myElemBase"
        >
          <div>
            <div
              :class="
                myel.class +
                (editOn ? ` clEdit` : ``) +
                getClass() +
                ` ` +
                tools.getClassAnim(myel.anim)
              "
              @click="clickOnElem"
            >
              <CTitle
                :imgbackground="myel.imgback"
                :headtitle="myel.container"
                :sizes="myel.size"
                :styleadd="myel.styleadd"
              >
              </CTitle>
            </div>
          </div>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE"
          class="myElemBase"
        >
          <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"
          class="myElemBase"
        >
          <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="speedSafe"
              :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"
          class="myElemBase"
        >
          <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"
          class="myElemBase"
        >
          <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"
          class="myElemBase"
        >
          <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"
          class="myElemBase"
        >
          <div class="text-center">
            <div
              :class="
                myel.class +
                (editOn ? ` clEdit` : ``) +
                getClass() +
                ` ` +
                tools.getClassAnim(myel.anim)
              "
              @click="clickOnElem"
            >
              <q-img
                v-if="tools.getImgFileByElem(myel, undefined, path)"
                :src="tools.getImgFileByElem(myel, undefined, path)"
                :fit="myel.fit ? myel.fit : 'contain'"
                class="img"
                :width="myel.widthimg ? myel.widthimg : undefined"
                :height="myel.heightimg ? myel.heightimg : undefined"
              ></q-img>
              <q-img
                v-else
                src="images/noimg.png"
                :fit="myel.fit ? myel.fit : 'contain'"
                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"
          class="myElemBase"
        >
          <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.VIDEO_YOUTUBE"
          class="myElemBase"
        >
          <CMyVideoYoutube
            :url="myelem.container"
            :title="myelem.container2 || ''"
            :ratio="myelem.ratio || 16 / 9"
            :privacyMode="myelem.privacyMode ?? true"
            :thumbnailClickToPlay="myelem.thumbnailClickToPlay ?? true"
            :autoplay="myelem.autoplay ?? false"
            :controls="myelem.controls ?? true"
            :mute="myelem.mute ?? false"
            :loop="myelem.loop ?? false"
            :start="myelem.start || 0"
            :end="myelem.end || 0"
            :rel="myelem.rel ?? false"
            :modestBranding="myelem.modestBranding ?? true"
            :playsinline="myelem.playsinline ?? true"
            :ccLang="myelem.ccLang || ''"
            :ccLoad="myelem.ccLoad ?? false"
          />
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE_GALLERY"
          class="myElemBase"
        >
          <CMyImageGallery> </CMyImageGallery>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.HEADING">
          <CMyHeading
            :text="myel.container"
            :level="myelem.number"
            :color="myelem.color"
          >
          </CMyHeading>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.LIST">
          <CMyList> </CMyList>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CODE">
          <CMyCode> </CMyCode>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.DIVIDER">
          <CMyDivider> </CMyDivider>
        </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"
          class="myElemBase"
        >
          <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.REGISTRATION"
          class="myElemBase"
        >
          <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"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            CDashboard
          </div>
          <CDashboard></CDashboard>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.DASHGROUP"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            CDashGroup
          </div>
          <CDashGroup></CDashGroup>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.MOVEMENTS"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            Lista Movimenti
          </div>
          <CMovements :showbuttolastmov="true"></CMovements>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.CSENDRISTO"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            CSendRISTo
          </div>
          <CSendRISTo></CSendRISTo>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ"
          class="myElemBase"
        >
          <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"
          class="myElemBase"
        >
          <CSearchProduct
            v-model="myel.catalogo"
            table="products"
          >
          </CSearchProduct>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGLIST"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            Cataloghi
          </div>
          <q-tabs
            v-if="tools.isCollaboratore()"
            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.STAT_PAGES"
          class="myElemBase"
        >
          <CPageViewStats></CPageViewStats>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.RACCOLTE_CATALOGHI"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            Raccolte Cataloghi
          </div>
          <q-tabs
            v-if="tools.isCollaboratore()"
            v-model="tabcatalogo"
            dense
            class="bg-green text-white"
          >
            <q-tab
              name="griglia"
              icon="fas fa-eye"
              label="Griglia"
            >
            </q-tab>
            <q-tab
              name="lista"
              icon="fas fa-list"
              label="Lista"
            >
            </q-tab>
          </q-tabs>
          <q-tab-panels
            v-model="tabcatalogo"
            animated
            keep-alive
          >
            <q-tab-panel name="lista">
              <CGridOriz
                table="raccoltacataloghis"
                :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">
              <CRaccoltaCataloghi
                :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"
              >
              </CRaccoltaCataloghi>
            </q-tab-panel>
          </q-tab-panels>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.STATUSREG"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            CStatusReg
          </div>
          <CStatusReg> </CStatusReg>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKIFISLOGGED"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            CCheckIfIsLogged
          </div>
          <CCheckIfIsLogged :showalways="myel.container"></CCheckIfIsLogged>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.VISUVIDEOPROMOANDPDF"
          class="myElemBase"
        >
          <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"
          class="myElemBase"
        >
          <div>Versione: {{ tools.getvers() }}</div>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.BOTT_CONDIVIDI"
          class="myElemBase"
        >
          <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"
          class="myElemBase"
        >
          <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"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            Pagina Attività
          </div>
          <CMyActivities></CMyActivities>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.ECOMMERCE"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            PRODOTTI ECOMMERCE:
          </div>
          <CECommerce></CECommerce>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGO"
          class="myElemBase"
        >
          <CCatalogo
            v-model="myel.catalogo"
            :idPage="idPage"
            @updateCatalogo="updateCatalogoEmit(myel.catalogo)"
          />
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.RACCOLTA"
          class="myElemBase"
        >
          <CRaccolta
            v-model="myel.catalogo"
            :idPage="idPage"
            @updateCatalogo="updateCatalogoEmit(myel.catalogo)"
          />
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPA"
          class="myElemBase"
        >
          <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"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            MAPPA UTENTI:
          </div>
          <CMapUsers></CMapUsers>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPAGETCOORDINATE"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            MAPPA COORDINATE:
          </div>
          <CMapGetCoordinates></CMapGetCoordinates>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.EDITADDRESSBYCOORD"
          class="myElemBase"
        >
          <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"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            MAPPA COMUNI:
          </div>
          <CMapComuni></CMapComuni>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.TOOLSAI"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            STRUMENTI AI:
          </div>
          <CAITools></CAITools>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.CHATBOT"
          class="myElemBase"
        >
          <div
            v-if="editOn"
            class="elemEdit"
          >
            CHATBOT:
          </div>
          <ChatBot></ChatBot>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKAPPRUNNING">
          <div
            v-if="editOn"
            class="elemEdit"
          >
            CheckAppRunning
          </div>
          <CCheckAppRunning v-if="enablePwa" />
        </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="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 il
                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-else-if="myel.type === shared_consts.ELEMTYPE.PAGE_SECTION">
          <FeaturesSection
            :title="myel.container"
            :subtitle="myel.container2"
            :description="myel.container3"
            :features="myel.features"
            :isDark="myel.parambool2"
          >
          </FeaturesSection>
        </div>

        <div v-if="editOn">
          <div class="q-ma-md"></div>
        </div>
      </div>

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