<template>
  <div
    v-if="myel"
    :class="(editOn ? ` clEditDiv` : ``) + `` + (!myel.active ? ` clEditNotActive` : ``)"
  >
    <div v-if="myel && myel.type">
      <div class="row justify-evenly q-gutter-sm">
        <q-btn
          class="q-ma-sm"
          dense
          @click="toggleSize"
          label="Espandi"
          icon="chevron_left"
          color="primary"
        />
        <q-btn
          v-if="enableAdd"
          class="q-ma-sm"
          label="Aggiungi"
          icon-right="arrow_upward"
          color="positive"
          dense
          @click="
            direzadd = -1;
            visuadd = true;
          "
        >
        </q-btn>
        <q-btn
          v-if="enableAdd"
          class="q-ma-sm"
          label="Aggiungi"
          icon-right="arrow_downward"
          color="positive"
          dense
          @click="
            direzadd = 1;
            visuadd = true;
          "
        >
        </q-btn>
      </div>
      <q-bar
        v-if="enableEdit"
        class="q-pa-md bg-orange text-white"
      >
        Pagina:

        <q-space />
        <q-btn
          icon="far fa-copy"
          label="Duplica"
          dense
          size="sm"
          color="primary"
          @click="dupPage()"
        >
        </q-btn>
        <q-btn
          icon="fas fa-expand-alt"
          label="Importa"
          dense
          size="sm"
          color="primary"
          @click="importPage()"
        >
        </q-btn>
        <q-btn
          icon="fas fa-expand-alt"
          label="Esporta"
          dense
          size="sm"
          color="primary"
          @click="exportPage()"
        >
        </q-btn>
      </q-bar>
      <q-bar
        v-if="enableEdit"
        class="q-pa-md bg-light-blue text-white"
      >
        Elemento:

        <q-space />
        <q-btn
          icon="fas fa-trash-alt"
          color="negative"
          label="Elimina"
          dense
          size="sm"
          @click="delElem"
        >
        </q-btn>
        <q-btn
          icon="far fa-copy"
          label="Duplica"
          dense
          size="sm"
          @click="dupElem(myel.order + 10 * direzadd)"
        >
        </q-btn>
        <q-btn
          dense
          icon="fas fa-check"
          color="positive"
          label="Salva"
          size="sm"
          @click="saveElem"
        >
        </q-btn>
      </q-bar>
      <div class="fixed-button">
        <div class="justify-center row q-ma-xs">
          <q-btn
            dense
            v-if="enableEdit && !disableSave"
            icon="fas fa-check"
            color="positive"
            label="Salva Modifiche"
            :disable="disableSave"
            @click="saveElem"
          >
          </q-btn>
          <!--<q-btn
            dense
            v-if="enableEdit && !disableSave"
            icon="fas fa-check"
            color="positive"
            label="Salva"
            :disable="disableSave"
            @click="saveElem(true)"
          >
          </q-btn>-->
        </div>
      </div>
      <q-list
        padding
        bordered
        class="rounded-borders"
      >
        <q-expansion-item
          dense
          dense-toggle
          expand-separator
          label="Visualizzazione"
          icon="fas fa-eye"
        >
          <div class="row q-gutter-sm q-pa-sm">
            <q-toggle
              v-model="myel.active"
              color="positive"
              icon="fas fa-eye"
              label="Attiva"
            >
            </q-toggle>
            <q-select
              v-model="neworder"
              :options="orderOptions"
              label="Posizionamento"
              options-dense
              dense
              emit-value
              map-options
              style="width: 100px"
              @update:model-value="modifElem"
              use-input
              hide-selected
              fill-input
              text-color="white"
              @new-value="addOrder"
            >
            </q-select>
          </div>
        </q-expansion-item>
        <q-btn
          v-if="enableAdd"
          class="q-ma-sm"
          label="Sposta in SU"
          icon-right="arrow_upward"
          color="positive"
          dense
          @click="moveElem(-1)"
        >
        </q-btn>
        <q-btn
          v-if="enableAdd"
          class="q-ma-sm"
          label="Sposta in GIU"
          icon-right="arrow_downward"
          color="positive"
          dense
          @click="moveElem(1)"
        >
        </q-btn>

        <q-expansion-item
          dense
          dense-toggle
          expand-separator
          label="Dimensioni"
          icon="fas fa-expand-alt"
          v-if="!isElementoSpecifico()"
        >
          <div class="row">
            <CMySlider
              label="Lunghezza:"
              v-model="myel.widthimg"
              :min="10"
              :max="1000"
              color="green"
              addstr="px"
              @update:model-value="modifElem"
            ></CMySlider>
          </div>
          <div class="row">
            <CMySlider
              label="Altezza:"
              v-model="myel.heightimg"
              :min="10"
              :max="1000"
              color="red"
              addstr="px"
              @update:model-value="modifElem"
            ></CMySlider>
          </div>
          <div class="row">
            <CMySlider
              v-if="
                myel.type === shared_consts.ELEMTYPE.CARD ||
                myel.type === shared_consts.ELEMTYPE.GRID_ORIZ ||
                myel.type === shared_consts.ELEMTYPE.CATALOGLIST ||
                myel.type === shared_consts.ELEMTYPE.RACCOLTE_CATALOGHI
              "
              label="Altezza Carosello:"
              v-model="myel.heightcarousel"
              :min="10"
              :max="1000"
              color="fuchsia"
              addstr="px"
              @update:model-value="modifElem"
            ></CMySlider>
          </div>
          <div class="row">
            <CMySlider
              v-if="
                myel.type === shared_consts.ELEMTYPE.CARD ||
                myel.type === shared_consts.ELEMTYPE.CATALOGLIST ||
                myel.type === shared_consts.ELEMTYPE.RACCOLTE_CATALOGHI
              "
              label="Lunghezza Card:"
              v-model="myel.widthcard"
              :min="10"
              :max="1000"
              color="green"
              addstr="px"
              @update:model-value="modifElem"
            ></CMySlider>
          </div>
          <div class="row">
            <CMySlider
              v-if="
                myel.type === shared_consts.ELEMTYPE.CATALOGLIST ||
                myel.type === shared_consts.ELEMTYPE.RACCOLTE_CATALOGHI
              "
              label="Altezza Card:"
              v-model="myel.heightcard"
              :min="10"
              :max="1000"
              color="red"
              addstr="px"
              @update:model-value="modifElem"
            ></CMySlider>
          </div>
        </q-expansion-item>

        <q-expansion-item
          dense
          dense-toggle
          expand-separator
          label="Allineamento"
          icon="fas fa-align-center"
          v-if="!isElementoSpecifico()"
        >
          <div class="row">
            <q-select
              :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
              v-if="enableEdit"
              rounded
              outlined
              v-model="myel.align"
              :options="tools.SelectListAlign"
              @update:model-value="modifElem"
              dense
              label="Allinea"
              style="width: 100px"
              emit-value
              map-options
              @save="saveCard"
            >
            </q-select>
            <q-select
              :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
              v-if="enableEdit"
              rounded
              outlined
              v-model="myel.vertalign"
              :options="tools.SelectListVertAlign"
              @update:model-value="modifElem"
              dense
              label="Vert Allinea"
              style="min-width: 150px"
              emit-value
              map-options
            >
            </q-select>
            <q-select
              :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
              v-if="enableEdit"
              rounded
              style="min-width: 150px"
              outlined
              v-model="myel.class"
              :options="tools.SelectListClass"
              @update:model-value="modifElem"
              dense
              label="Classe"
              emit-value
              map-options
            >
            </q-select>
            <q-select
              :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
              v-if="enableEdit && showFit"
              rounded
              style="width: 100px"
              outlined
              v-model="myel.fit"
              :options="tools.SelectListFit"
              @update:model-value="modifElem"
              dense
              label="Adatta:"
              emit-value
              map-options
            >
            </q-select>
          </div>
          <div class="row">
            <q-input
              dense
              label="Classe:"
              @update:model-value="modifElem"
              v-model="myel.class2"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
          </div>
        </q-expansion-item>
        <q-expansion-item
          dense
          dense-toggle
          expand-separator
          label="Animazione"
          icon="fas fa-play-circle"
          v-if="!isElementoSpecifico()"
        >
          <CSelectAnimation
            v-if="enableEdit && showAnimation"
            v-model="myel.anim"
            @update:model-value="modifElem"
          >
          </CSelectAnimation>
        </q-expansion-item>
        <q-expansion-item
          dense
          dense-toggle
          expand-separator
          label="Banner Iniziale"
          icon="fas fa-play-circle"
          v-if="!isElementoSpecifico()"
        >
          <div>Banner:</div>

          <q-input
            dense
            label="Titolo Banner:"
            @update:model-value="modifElem"
            v-model="myel.titleBanner"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Classe Banner:"
            @update:model-value="modifElem"
            v-model="myel.classBanner"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <CSelectColor
            v-if="enableEdit"
            style="min-width: 150px"
            v-model="myel.color"
            @update:model-value="modifElem"
            title="Colore Titolo"
          >
          </CSelectColor>
        </q-expansion-item>
        <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
          <div v-if="enableEdit">
            <q-input
              class="fa-border"
              @update:model-value="modifElem"
              v-model="myel.container"
              dense
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
          </div>
        </div>
        <div
          v-else-if="myel.type === shared_consts.ELEMTYPE.CARD"
          :class="myel.span ? '' : ''"
        >
          <CSelectColor
            v-if="enableEdit"
            style="min-width: 150px"
            v-model="myel.color"
            @update:model-value="modifElem"
            title="Colore Sfondo"
          >
          </CSelectColor>

          <q-select
            v-model="myel.num2"
            :options="[
              { label: '1', value: 1 },
              { label: '2', value: 2 },
              { label: '3', value: 3 },
              { label: '4', value: 4 },
            ]"
            label="Cards per Slide"
            emit-value
            map-options
            style="min-width: 120px"
            @input="saveElem"
          >
          </q-select>
          <q-expansion-item
            dense
            dense-toggle
            expand-separator
            label="Classi per l'Immagine"
            icon="fas fa-expand-alt"
          >
            <q-select
              label="Classi:"
              v-model="selectedClasses"
              emit-value
              map-options
              :options="classiImmagineOptions()"
              use-chips
              multiple
              @update:model-value="updateClass4"
              filled
              dense
              style="width: 350px"
            />
          </q-expansion-item>
          <div class="row">
            <q-input
              dense
              label="Classe per Card:"
              @update:model-value="modifElem"
              v-model="myel.class2"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              dense
              label="Classe Schede:"
              @update:model-value="modifElem"
              v-model="myel.class3"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
          </div>
          <q-btn
            rounded
            dense
            color="primary"
            label="Aggiungi"
            icon="fas fa-plus"
            @click="addNewCard"
          >
          </q-btn>
          <q-btn
            rounded
            dense
            color="primary"
            label="Duplica"
            icon="fas fa-copy"
            @click="dupNewCard"
          >
          </q-btn>

          <q-tabs
            v-model="tabCard"
            dense
            class="text-grey"
            active-color="primary"
            indicator-color="primary"
            align="justify"
            narrow-indicator
          >
            <q-tab
              v-for="(rec, ind) in myel.listcards"
              :key="ind"
              :name="ind"
              :label="`Scheda ` + (ind + 1)"
              icon="fas fa-pencil-alt"
            />
          </q-tabs>

          <q-tab-panels
            v-model="tabCard"
            animated
            keep-alive
          >
            <q-tab-panel
              v-for="(rec, ind) in myel.listcards"
              :key="ind"
              :name="ind"
            >
              <div
                v-if="enableEdit"
                class="column bordered q-ma-xs"
              >
                <q-bar class="bg-primary text-white">
                  Scheda {{ ind + 1 }}
                  <q-space />
                  <q-btn
                    icon="fas fa-trash-alt"
                    color="negative"
                    dense
                    size="sm"
                    @click="delRecCard(rec._id, myel)"
                  >
                  </q-btn>
                </q-bar>

                <CMyFieldRec
                  title="Immagine:"
                  table="imgcards"
                  :id="rec._id"
                  :rec="rec"
                  field="imagefile"
                  @update:model-value="modifElem"
                  :canEdit="true"
                  :canModify="true"
                  :nosaveToDb="true"
                  :path="path"
                  :fieldtype="costanti.FieldType.imgcard"
                  @save="saveCard"
                >
                </CMyFieldRec>

                <div
                  v-if="enableEdit"
                  class="row"
                >
                  <q-input
                    dense
                    style="min-width: 150px"
                    label="Titolo:"
                    class="fa-border"
                    @update:model-value="modifElem"
                    v-model="rec.alt"
                    filled
                    v-on:keyup.enter="saveElem"
                  >
                  </q-input>
                  <q-input
                    dense
                    style="min-width: 150px"
                    label="Style:"
                    class="fa-border"
                    @update:model-value="modifElem"
                    v-model="rec.style"
                    filled
                    v-on:keyup.enter="saveElem"
                  >
                  </q-input>
                  <q-input
                    dense
                    style="min-width: 450px"
                    label="Link:"
                    class="fa-border"
                    @update:model-value="modifElem"
                    v-model="rec.link"
                    filled
                    v-on:keyup.enter="saveElem"
                  >
                  </q-input>
                  <CSelectColor
                    v-if="enableEdit"
                    style="min-width: 150px"
                    v-model="rec.color"
                    @update:model-value="modifElem"
                    title="Col Titolo"
                  >
                  </CSelectColor>
                  <CSelectFontSize
                    v-if="enableEdit"
                    style="min-width: 200px"
                    v-model="rec.size"
                    @update:model-value="modifElem"
                    title="Font Titolo"
                  >
                  </CSelectFontSize>
                </div>
                <CMyEditor
                  v-model:value="rec.content"
                  title="Contenuto:"
                  @keyup.enter.stop
                  :showButtons="false"
                  :canModify="true"
                  @update:value="modifElem"
                  @showandsave="saveElem"
                >
                </CMyEditor>

                <q-input
                  label="Sottotitolo:"
                  class="fa-border"
                  dense
                  @update:model-value="modifElem"
                  v-model="rec.description"
                  filled
                  v-on:keyup.enter="saveElem"
                >
                </q-input>
              </div>
              <div
                v-if="enableEdit"
                class="row"
              >
                <CSelectColor
                  v-if="enableEdit"
                  v-model="rec.colorsub"
                  @update:model-value="modifElem"
                  title="Col Sottotitolo"
                >
                </CSelectColor>
              </div>
            </q-tab-panel>
          </q-tab-panels>
        </div>

        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
          <div v-if="enableEdit">
            <q-input
              dense
              label="Margine:"
              class="fa-border"
              @update:model-value="modifElem"
              v-model="myel.size"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
          <div v-if="enableEdit">
            <q-input
              dense
              label="Titolo"
              class="fa-border"
              @update:model-value="modifElem"
              v-model="myel.title"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              dense
              label="Style"
              class="fa-border"
              @update:model-value="modifElem"
              v-model="myel.styleadd"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              dense
              label="Immagine:"
              class="fa-border"
              @update:model-value="modifElem"
              v-model="myel.imgback"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
          <div v-if="enableEdit">
            <CMyFieldRec
              title="Immagine:"
              table="myelems"
              :id="myel._id"
              :rec="myel"
              field="image"
              @update:model-value="modifElem"
              :canEdit="true"
              :canModify="true"
              :fieldtype="costanti.FieldType.imagerec"
            >
            </CMyFieldRec>

            <q-input
              dense
              label="Title"
              class="fa-border"
              @update:model-value="modifElem"
              v-model="myel.container"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              dense
              label="Sottotitolo"
              class="fa-border"
              @update:model-value="modifElem"
              v-model="myel.container2"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
          <div v-if="enableEdit">
            <q-input
              dense
              label="Velocità"
              style="max-width: 100px"
              class="fa-border"
              @update:model-value="modifElem"
              v-model="myel.speed"
              type="number"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <CMyFieldRec
              title="Immagine:"
              table="myelems"
              :id="myel._id"
              :rec="myel"
              field="image"
              @update:model-value="modifElem"
              :canEdit="true"
              :canModify="true"
              :fieldtype="costanti.FieldType.imagerec"
            >
            </CMyFieldRec>
            <CMyFieldRec
              title="Logo:"
              table="myelems"
              :id="myel._id"
              :rec="myel"
              field="img"
              @update:model-value="modifElem"
              :canEdit="true"
              :canModify="true"
              :fieldtype="costanti.FieldType.imagerec"
            >
            </CMyFieldRec>
            <div class="row">
              <q-select
                label="Lunghezza Logo:"
                v-model="myel.widthimg"
                emit-value
                map-options
                :options="generateSizeOptions()"
                use-input
                use-chips
                @input="saveElem"
                filled
                dense
                @new-value="updateSizeWidth"
                style="width: 150px"
              />

              <q-select
                label="Altezza Logo:"
                v-model="myel.heightimg"
                emit-value
                map-options
                :options="generateSizeOptions()"
                use-input
                use-chips
                @input="saveElem"
                filled
                dense
                @new-value="updateSizeHeight"
                style="width: 150px"
              />
            </div>

            <q-btn
              rounded
              dense
              color="primary"
              label="Testo"
              icon="fas fa-plus"
              @click="addNewElemText"
            >
            </q-btn>

            <q-tabs
              v-model="tabElemsText"
              dense
              class="text-grey"
              active-color="primary"
              indicator-color="primary"
              align="justify"
              narrow-indicator
            >
              <q-tab
                v-for="(rec, ind) in myel.elemsText"
                :key="ind"
                :name="`elem` + ind"
                :label="`Testo ` + (ind + 1)"
                icon="fas fa-pencil-alt"
              />
            </q-tabs>

            <q-tab-panels
              v-model="tabElemsText"
              animated
              keep-alive
            >
              <q-tab-panel
                v-for="(rec, ind) in myel.elemsText"
                :key="ind"
                :name="`elem` + ind"
              >
                <div
                  v-if="enableEdit"
                  class="column bordered q-ma-xs"
                >
                  <q-bar class="bg-primary text-white">
                    Elem {{ ind + 1 }}
                    <q-space />
                    <q-btn
                      icon="fas fa-trash-alt"
                      color="negative"
                      dense
                      size="sm"
                      @click="delRecCard(rec._id, myel)"
                    >
                    </q-btn>
                  </q-bar>
                  <div
                    v-if="enableEdit"
                    class="row"
                  >
                    <CSelectColor
                      v-if="enableEdit"
                      style="min-width: 150px"
                      v-model="rec.color"
                      @update:model-value="modifElem"
                      title="Col Titolo"
                    >
                    </CSelectColor>
                    <CSelectFontSize
                      v-if="enableEdit"
                      style="min-width: 200px"
                      v-model="rec.size"
                      @update:model-value="modifElem"
                      title="Font Titolo"
                    >
                    </CSelectFontSize>
                  </div>
                  <q-input
                    dense
                    label="Classe:"
                    @update:model-value="modifElem"
                    v-model="rec.class"
                    filled
                    v-on:keyup.enter="saveElem"
                  >
                  </q-input>
                  <CMyEditor
                    v-model:value="rec.text"
                    title="Contenuto:"
                    @keyup.enter.stop
                    :showButtons="false"
                    :canModify="true"
                    @update:value="modifElem"
                    @showandsave="saveElem"
                  >
                  </CMyEditor>
                  <CSelectAnimation
                    v-if="enableEdit && showAnimation"
                    v-model="rec.anim"
                    @update:model-value="modifElem"
                    label="Animazione"
                  >
                  </CSelectAnimation>
                </div>
              </q-tab-panel>
            </q-tab-panels>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
          <div v-if="enableEdit">
            <CMyEditor
              v-model:value="myel.containerHtml"
              title=""
              @keyup.enter.stop
              :showButtons="false"
              :canModify="true"
              @update:value="modifElem"
              @showandsave="saveElem"
            >
            </CMyEditor>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
          <div v-if="enableEdit">
            <q-input
              label="NomeFile Img:"
              @update:model-value="modifElem"
              v-model="myel.image"
              filled
              dense
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <CMyFieldRec
              title="NomeFile Img:"
              table="myelems"
              :id="myel._id"
              :rec="myel"
              field="image"
              @update:model-value="modifElem"
              :canEdit="true"
              :canModify="true"
              :fieldtype="costanti.FieldType.imagerec"
            >
            </CMyFieldRec>
            <CMyFieldRec
              title="Versione Img:"
              table="myelems"
              :id="myel._id"
              :rec="myel"
              field="vers_img"
              @update:model-value="modifElem"
              :canEdit="true"
              :canModify="true"
              :fieldtype="costanti.FieldType.number"
            >
            </CMyFieldRec>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.QRCODE">
          <div v-if="enableEdit">
            <q-input
              dense
              label="Link:"
              @update:model-value="modifElem"
              v-model="myel.container"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              dense
              label="Testo Link:"
              @update:model-value="modifElem"
              v-model="myel.container2"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-toggle
              v-model="myel.parambool"
              color="positive"
              label="Leggi"
              @update:model-value="modifElem"
            ></q-toggle>
            <q-input
              label="NomeFile Img:"
              @update:model-value="modifElem"
              v-model="myel.image"
              filled
              dense
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <CMyFieldRec
              title="NomeFile Img:"
              table="myelems"
              :id="myel._id"
              :rec="myel"
              field="image"
              @update:model-value="modifElem"
              :canEdit="true"
              :canModify="true"
              :path="path"
              :fieldtype="costanti.FieldType.imagerec"
            >
            </CMyFieldRec>
          </div>
        </div>

        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
          <div v-if="enableEdit">
            <q-input
              dense
              label="NomeFile Img:"
              @update:model-value="modifElem"
              v-model="myel.image"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <CMyFieldRec
              title="NomeFile Img:"
              table="myelems"
              :id="myel._id"
              :rec="myel"
              :path="path"
              field="image"
              @update:model-value="modifElem"
              :canEdit="true"
              :canModify="true"
              :fieldtype="costanti.FieldType.imagerec"
            >
            </CMyFieldRec>
            <div class="">
              <!--<div
                class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-sticky"
              >
                <q-select
                  label="Lunghezza:"
                  v-model="myel.widthimg"
                  emit-value
                  map-options
                  :options="generateSizeOptions()"
                  @input="modifElem"
                  filled
                  dense
                  use-input
                  use-chips
                  @new-value="updateSizeWidth"
                  style="width: 150px"
                />
                <q-input
                  dense
                  label="Altezza:"
                  @update:model-value="modifElem"
                  v-model="myel.heightimg"
                  filled
                  v-on:keyup.enter="saveElem"
                >
                </q-input>

              </div>-->
            </div>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
          <div
            v-if="enableEdit"
            class="row"
          >
            <q-input
              dense
              label="NomeFile Video:"
              @update:model-value="modifElem"
              v-model="myel.container"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              dense
              label="Ratio:"
              type="number"
              @update:model-value="modifElem"
              v-model="myel.ratio"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.HEADING">
          <div
            v-if="enableEdit"
            class="row q-col-gutter-sm"
          >
            <q-input
              dense
              label="Titolo:"
              @update:model-value="modifElem"
              v-model="myel.container"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              dense
              label="Livello:"
              @update:model-value="modifElem"
              v-model="myel.number"
              type="number"
              min="1"
              max="5"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-btn
              dense
              flat
              icon="fas fa-palette"
              color="primary"
              @click="openColorPicker"
            >
            </q-btn>
            <CPickColor
              ref="colorPicker"
              v-model="myel.color"
              @update:model-value="modifElem"
            />
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO_YOUTUBE">
          <div
            v-if="enableEdit"
            class="row q-col-gutter-sm"
          >
            <!-- Link YouTube -->
            <div class="col-12">
              <q-input
                dense
                filled
                label="Link YouTube"
                v-model="myel.container"
                @update:model-value="modifElem"
                v-on:keyup.enter="saveElem"
                :rules="[(v) => !!v || 'Inserisci un link YouTube']"
              />
            </div>

            <!-- Titolo accessibile (facoltativo) -->
            <div class="col-12">
              <q-input
                dense
                filled
                label="Titolo (facoltativo)"
                v-model="myel.container2"
                @update:model-value="modifElem"
                v-on:keyup.enter="saveElem"
              />
            </div>

            <!-- Ratio -->
            <div class="col-12 col-sm-6">
              <q-input
                dense
                filled
                type="number"
                step="any"
                min="0.2"
                label="Ratio (es. 1.777 per 16/9)"
                v-model.number="myel.ratio"
                @update:model-value="modifElem"
                v-on:keyup.enter="saveElem"
              />
            </div>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER"></div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
          <div
            v-if="enableEdit"
            class="row"
          >
            <q-select
              :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
              rounded
              outlined
              v-model="myel.container"
              :options="arrPages"
              label="Pagina"
              emit-value
              map-options
              @change="saveElem"
            >
            </q-select>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
          <div
            v-if="enableEdit"
            class="row"
          >
            <q-input
              dense
              label="NomeFile Img:"
              @update:model-value="modifElem"
              v-model="myel.container"
              debounce="1000"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-sticky">
              <q-select
                label="Lunghezza:"
                v-model="myel.widthimg"
                emit-value
                map-options
                :options="generateSizeOptions()"
                use-input
                use-chips
                @input="saveElem"
                filled
                dense
                @new-value="updateSizeWidth"
                style="width: 150px"
              />
              <q-select
                label="Altezza:"
                v-model="myel.heightimg"
                emit-value
                map-options
                :options="generateSizeOptions()"
                use-input
                use-chips
                @input="saveElem"
                filled
                dense
                @new-value="updateSizeHeight"
                style="width: 150px"
              />
              <q-input
                dense
                label="Link:"
                @update:model-value="modifElem"
                debounce="1000"
                v-model="myel.link"
                filled
                v-on:keyup.enter="saveElem"
              >
              </q-input>
            </div>
          </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
            v-if="enableEdit"
            class="row"
          >
            <q-input
              dense
              label="ImgMap:"
              @update:model-value="modifElem"
              v-model="myel.container"
              debounce="1000"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              dense
              label="UrlMap:"
              @update:model-value="modifElem"
              v-model="myel.container2"
              debounce="1000"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              dense
              label="Title:"
              @update:model-value="modifElem"
              v-model="myel.container3"
              debounce="1000"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              dense
              label="Coordinata Mappa 1:"
              @update:model-value="modifElem"
              v-model="myel.containerHtml"
              debounce="1000"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              dense
              label="Coordinata Mappa Big:"
              @update:model-value="modifElem"
              v-model="myel.link"
              debounce="1000"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
          <div
            v-if="enableEdit"
            class="row"
          >
            <CMyFieldRec
              title="Lista Immagini:"
              table="myelems"
              :id="myel._id"
              :rec="myel"
              :path="path"
              field="list"
              @update:model-value="modifElem"
              :canEdit="true"
              :canModify="true"
            >
            </CMyFieldRec>

            <!--sss
          -->

            <q-input
              dense
              label="Secondi tra un'immagine e l'altra:"
              @update:model-value="modifElem"
              debounce="1000"
              v-model="myel.container2"
              type="number"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-toggle
              label="Sottotitoli"
              v-model="myel.parambool"
              color="positive"
              icon="far fa-eye"
            >
            </q-toggle>

            <q-toggle
              label="Miniature"
              v-model="myel.parambool2"
              color="positive"
              icon="far fa-eye"
            >
            </q-toggle>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME"></div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.BUTTON">
          <q-input
            dense
            label="Colore:"
            @update:model-value="modifElem"
            debounce="1000"
            v-model="myel.color"
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Colore Testo:"
            @update:model-value="modifElem"
            debounce="1000"
            v-model="myel.containerHtml"
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Link:"
            @update:model-value="modifElem"
            debounce="1000"
            v-model="myel.link"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Testo Bottone:"
            @update:model-value="modifElem"
            debounce="1000"
            v-model="myel.container"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Icona:"
            @update:model-value="modifElem"
            debounce="1000"
            v-model="myel.container2"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Dimensione"
            @update:model-value="modifElem"
            debounce="1000"
            v-model="myel.size"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Target:"
            @update:model-value="modifElem"
            debounce="1000"
            v-model="myel.container3"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ">
          <div
            v-if="enableEdit"
            class="row"
          >
            <q-select
              v-model="myel.container"
              :options="[
                { label: 'Eventi', value: 'mybachecas' },
                { label: 'Servizi', value: 'myskills' },
                { label: 'Lista Cataloghi', value: 'catalogs' },
                { label: 'Raccolta Cataloghi', value: 'raccoltacataloghis' },
              ]"
              label="Tabella"
              emit-value
              map-options
              @input="saveElem"
              style="min-width: 120px"
            >
            </q-select>
            <br />
            <q-select
              v-model="myel.number"
              :options="[
                { label: 'Orizzontale', value: costanti.VISUTABLE_GRID_ORIZ },
                { label: 'Griglia', value: costanti.VISUTABLE_LISTA },
                { label: 'Scheda User', value: costanti.VISUTABLE_SCHEDA_USER },
                { label: 'User Info', value: costanti.SHOW_USERINFO },
                { label: 'Lista Tabelle', value: costanti.VISUTABLE_TABLELIST },
              ]"
              label="Visualizzazione"
              emit-value
              map-options
              style="min-width: 120px"
              @input="saveElem"
            >
            </q-select>
            <q-toggle
              v-model="myel.parambool"
              color="positive"
              label="Search"
              @update:model-value="modifElem"
            ></q-toggle>
            <q-toggle
              v-model="myel.parambool2"
              color="positive"
              label="Finder"
              @update:model-value="modifElem"
            ></q-toggle>
            <q-toggle
              v-model="myel.parambool3"
              color="positive"
              label="Mostra Mappa"
              @update:model-value="modifElem"
            ></q-toggle>
            <q-toggle
              v-model="myel.parambool4"
              color="positive"
              label="Bottone Modifica"
              @update:model-value="modifElem"
            ></q-toggle>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.RACCOLTE_CATALOGHI"></div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGLIST">
          <div
            v-if="enableEdit"
            class="row"
          >
            <br />
            <q-toggle
              v-model="myel.parambool"
              color="positive"
              label="Search"
              @update:model-value="modifElem"
            ></q-toggle>
            <q-toggle
              v-model="myel.parambool2"
              color="positive"
              label="Finder"
              @update:model-value="modifElem"
            ></q-toggle>
            <q-toggle
              v-model="myel.parambool3"
              color="positive"
              label="Solo il Catalogo Generale"
              @update:model-value="modifElem"
            ></q-toggle>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
          <div
            v-if="enableEdit"
            class="row"
          >
            <q-input
              dense
              label="Visualizza ultimi N eventi:"
              @update:model-value="modifElem"
              debounce="1000"
              v-model="myel.number"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL"></div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKIFISLOGGED">
          <q-select
            v-model="myel.container"
            :options="[
              { label: 'Mostra Sempre', value: true },
              { label: 'Solo se Offline', value: false },
            ]"
            label="Quando mostrarlo"
            emit-value
            map-options
          >
          </q-select>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.SEARCHPRODUCT">
          <div v-if="enableEdit && myel.catalogo">
            <q-btn
              v-if="myel.catalogo.arrSchede.length === 0"
              rounded
              dense
              color="primary"
              label="Aggiungi"
              icon="fas fa-plus"
              @click="addNewScheda"
            >
            </q-btn>

            <div
              v-for="(recscheda, ind) in myel.catalogo.arrSchede"
              :key="recscheda._id"
              :name="ind"
              dense
              :label="
                `${ind}. ` + recscheda.scheda.name
                  ? recscheda.scheda.name
                  : `Scheda ` + (ind + 1)
              "
            >
              <div class="row">
                <q-select
                  :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                  v-if="enableEdit"
                  rounded
                  outlined
                  v-model="recscheda.scheda.linkIdTemplate"
                  :options="globalStore.getSchedeOptByTag('SEARCH_')"
                  @update:model-value="modifElem"
                  label="Scheda collegata:"
                  style="width: 350px"
                  emit-value
                  map-options
                >
                </q-select>
                <q-btn
                  v-if="recscheda.scheda.linkIdTemplate"
                  icon="fas fa-edit"
                  label="Modifica Template"
                  color="primary"
                  @click="
                    naviga(
                      productStore.getFilePathByLinkIdTemplate(
                        recscheda.scheda.linkIdTemplate
                      )
                    )
                  "
                >
                </q-btn>

                <q-toggle
                  v-model="recscheda.scheda.isTemplate"
                  color="positive"
                  icon="fas fa-file-pdf"
                  label="E' un template"
                  @update:model-value="modifElem"
                >
                </q-toggle>
                <q-input
                  label="Nome Template"
                  @update:model-value="modifElem"
                  v-model="recscheda.scheda.name"
                  filled
                  debounce="1000"
                  v-on:keyup.enter="saveElem"
                >
                </q-input>
              </div>

              <q-expansion-item
                dense
                dense-toggle
                expand-separator
                label="Schede"
                icon="fas fa-play-circle"
              >
                <CMySize
                  label="Immagini:"
                  :fit="true"
                  v-model="recscheda.scheda.dimensioni.immagine_prodotto.size"
                  @update:model-value="modifElem"
                ></CMySize>
              </q-expansion-item>
              <q-expansion-item
                dense
                dense-toggle
                expand-separator
                label="Testo"
                :disabled="recscheda.scheda.linkIdTemplate"
                icon="fas fa-play-circle"
              >
                <CMyText
                  v-model="recscheda.scheda.testo_right_attaccato"
                  @modifElem="modifElem"
                  @saveFieldElem="saveFieldElem"
                  @update:model-value="modifElem"
                  label="Testo a Destra attaccato"
                >
                </CMyText>
                <CMyText
                  v-model="recscheda.scheda.testo_right"
                  @modifElem="modifElem"
                  @saveFieldElem="saveFieldElem"
                  @update:model-value="modifElem"
                  label="Testo a Destra"
                >
                </CMyText>

                <CMyText
                  v-model="recscheda.scheda.testo_bottom"
                  @modifElem="modifElem"
                  @saveFieldElem="saveFieldElem"
                  @update:model-value="modifElem"
                  label="Testo in Basso"
                  :show_dimensioni="true"
                >
                </CMyText>

                <CMySize
                  label="Schede:"
                  v-model="recscheda.scheda.dimensioni.scheda_prodotto.size"
                  :gap="true"
                  @update:model-value="modifElem"
                ></CMySize>
                ˚
              </q-expansion-item>
            </div>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGO">
          <div v-if="enableEdit">
            <q-expansion-item
              dense
              dense-toggle
              expand-separator
              label="Selezione Collane/Editori"
              icon="fas fa-play-circle"
            >
              <div class="column">
                <q-toggle
                  v-model="myel.catalogo.showListaArgomenti"
                  color="positive"
                  icon="fas fa-file-pdf"
                  label="Mostra Lista Argomenti"
                  @update:model-value="modifElem"
                >
                </q-toggle>
                <q-toggle
                  v-model="myel.catalogo.showOnlyCatalogoPDF"
                  color="positive"
                  icon="fas fa-file-pdf"
                  label="Pagina solo Catalogo (PDF)"
                  @update:model-value="modifElem"
                >
                </q-toggle>
                <q-select
                  :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                  rounded
                  outlined
                  v-model="myel.catalogo.idCatalogSel"
                  :options="catalogStore.getCatalogsList()"
                  @update:model-value="modifElem"
                  label="Scegli il Catalogo"
                  style="width: 300px"
                  emit-value
                  map-options
                >
                </q-select>

                <q-toggle
                  v-model="myel.catalogo.showListaCollane"
                  color="positive"
                  icon="fas fa-file-pdf"
                  label="Mostra Lista Collane"
                  @update:model-value="modifElem"
                >
                </q-toggle>

                <q-toggle
                  v-model="myel.catalogo.pdf"
                  color="positive"
                  icon="fas fa-file-pdf"
                  label="Versione PDF"
                  @update:model-value="modifElem"
                >
                </q-toggle>

                <CMySlider
                  label="Numero massimo libri:"
                  v-model="myel.catalogo.maxnumlibri"
                  :min="0"
                  :max="1000"
                  color="green"
                  @update:model-value="modifElem"
                ></CMySlider>

                <q-input
                  label="NomeFile PDF"
                  @update:model-value="modifElem"
                  v-model="myel.catalogo.pdf_filename"
                  filled
                  v-on:keyup.enter="saveElem"
                >
                </q-input>

                <br />

                <!--++AddCATALOGO_FIELDS-->
                <q-select
                  :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                  v-if="enableEdit && myel.catalogo"
                  rounded
                  outlined
                  v-model="myel.catalogo.sort_field"
                  :options="shared_consts.ORDINAMENTO_CATALOGHI"
                  @update:model-value="modifElem"
                  label="Ordinamento"
                  style="width: 200px"
                  emit-value
                  map-options
                >
                </q-select>
                <q-select
                  :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                  v-if="enableEdit && myel.catalogo"
                  rounded
                  outlined
                  v-model="myel.catalogo.sort_dir"
                  :options="shared_consts.ORDINAMENTO_DIREZIONE"
                  @update:model-value="modifElem"
                  label="Direzione"
                  style="width: 200px"
                  emit-value
                  map-options
                >
                </q-select>

                <!--<q-select
                  :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                  v-if="enableEdit && myel.catalogo && myel.catalogo.productTypes"
                  rounded
                  outlined
                  v-model="myel.catalogo.productTypes"
                  :options="shared_consts.VERSIONI_PRODOTTO"
                  @update:model-value="modifElem"
                  multiple
                  label="Includi Stato Prodotto"
                  style="width: 300px"
                  emit-value
                  map-options
                >
                </q-select>-->

                <q-select
                  :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                  rounded
                  outlined
                  v-model="myel.catalogo.idTipologie"
                  :options="Products.tipologie"
                  @update:model-value="modifElem"
                  multiple
                  label="Tipologia"
                  style="width: 300px"
                  option-value="IdTipologia"
                  option-label="Descrizione"
                  emit-value
                  map-options
                >
                </q-select>
                <q-select
                  :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                  rounded
                  outlined
                  v-model="myel.catalogo.idTipoFormato"
                  :options="Products.tipoformato"
                  @update:model-value="modifElem"
                  multiple
                  label="Tipo Formato"
                  style="width: 300px"
                  option-value="IdTipoFormato"
                  option-label="Descrizione"
                  emit-value
                  map-options
                >
                </q-select>
                <q-select
                  :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                  v-if="enableEdit"
                  rounded
                  outlined
                  v-model="myel.catalogo.editore"
                  :options="globalStore.getTableJoinByName('publishers')"
                  @update:model-value="modifElem"
                  multiple
                  label="Editori"
                  style="width: 300px"
                  emit-value
                  map-options
                  option-value="_id"
                  option-label="name"
                >
                </q-select>
                <q-select
                  :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                  v-if="enableEdit"
                  rounded
                  outlined
                  v-model="myel.catalogo.argomenti"
                  :options="Products.catprods"
                  @update:model-value="modifElem"
                  multiple
                  label="Argomenti"
                  style="width: 300px"
                  emit-value
                  map-options
                  option-value="_id"
                  option-label="name"
                >
                </q-select>
                <q-select
                  :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                  v-if="enableEdit"
                  rounded
                  outlined
                  v-model="myel.catalogo.idCollane"
                  :options="Products.collane"
                  @update:model-value="modifElem"
                  label="Collane"
                  style="width: 300px"
                  multiple
                  emit-value
                  map-options
                  option-value="_id"
                  option-label="title"
                >
                </q-select>
              </div>
            </q-expansion-item>
            <q-expansion-item
              dense
              dense-toggle
              expand-separator
              label="Pagina di Default"
              icon="fas fa-play-circle"
            >
              <q-select
                v-model="myel.catalogo.selectedVersionStampabile"
                :options="[
                  { label: 'Versione Web', value: shared_consts.PREPARA_PDF.WEB },
                  {
                    label: 'Versione Stampabile',
                    value: shared_consts.PREPARA_PDF.STAMPA,
                  },
                ]"
                label="Seleziona Versione"
                emit-value
                map-options
                style="width: 300px"
                @update:model-value="modifElem"
              >
              </q-select>

              <q-toggle
                v-model="myel.catalogo.dimensioni_def.isTemplate"
                color="positive"
                icon="fas fa-file-pdf"
                label="E' un template"
                @update:model-value="modifElem"
              >
              </q-toggle>
              <q-select
                :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                v-if="enableEdit"
                rounded
                outlined
                v-model="myel.catalogo.dimensioni_def.linkIdTemplate"
                :options="Products.getOptCatalogoTemplate()"
                @update:model-value="modifElem"
                label="Catalogo collegato:"
                style="width: 250px"
                emit-value
                :disabled="myel.catalogo.dimensioni_def.isTemplate"
                map-options
              >
              </q-select>

              <div
                v-if="myel.catalogo.dimensioni_def.pagina"
                class="sfondo_margine row"
              >
                <CMyDimensioni
                  v-model="myel.catalogo.dimensioni_def.pagina"
                  :path="costanti.DIR_CATALOGO"
                  :disabled="myel.catalogo.dimensioni_def.linkIdTemplate"
                  @modifElem="modifElem"
                  :show_imgsfondo="true"
                  @update:model-value="modifElem"
                ></CMyDimensioni>
              </div>
            </q-expansion-item>
            <q-expansion-item
              dense
              dense-toggle
              expand-separator
              label="Configura Catalogo"
              icon="fas fa-play-circle"
            >
              <div class="row">
                <q-btn
                  rounded
                  dense
                  color="primary"
                  label="Aggiungi"
                  icon="fas fa-plus"
                  @click="addNewScheda"
                >
                </q-btn>
              </div>

              <div class="row">
                <q-tabs
                  v-model="tabScheda"
                  dense
                  class="text-grey"
                  active-color="primary"
                  indicator-color="primary"
                  align="center"
                  vertical
                  narrow-indicator
                >
                  <q-tab
                    v-for="(rec, ind) in myel.catalogo.arrSchede"
                    :key="rec._id"
                    :name="ind"
                    dense
                    :label="
                      `${ind}. ` + rec.scheda.name
                        ? rec.scheda.name
                        : `Scheda ` + (ind + 1)
                    "
                  >
                  </q-tab>
                </q-tabs>

                <q-tab-panels
                  v-model="tabScheda"
                  animated
                  keep-alive
                >
                  <q-tab-panel
                    v-for="(recscheda, ind) in myel.catalogo.arrSchede"
                    :key="recscheda._id"
                    :name="ind"
                  >
                    <q-bar
                      v-if="recscheda"
                      class="bg-primary text-white"
                    >
                      {{ ind + 1 }}.
                      <span v-if="recscheda.scheda"> '{{ recscheda.scheda.name }}'</span>
                      <q-space />
                      <q-btn
                        rounded
                        dense
                        color="primary"
                        label="Duplica"
                        icon="fas fa-copy"
                        @click="dupNewScheda(recscheda._id)"
                      >
                      </q-btn>
                      <q-btn
                        icon="fas fa-trash-alt"
                        color="negative"
                        dense
                        size="sm"
                        @click="delRecScheda(recscheda._id, myel)"
                      >
                      </q-btn>
                    </q-bar>
                    <div v-if="recscheda && recscheda.scheda">
                      <q-select
                        v-model="recscheda.order"
                        :options="orderOptions"
                        label="Posizionamento"
                        options-dense
                        dense
                        emit-value
                        map-options
                        style="width: 100px"
                        @update:model-value="modifElem"
                        fill-input
                        text-color="white"
                      >
                      </q-select>

                      <q-toggle
                        v-model="recscheda.scheda.isTemplate"
                        color="positive"
                        icon="fas fa-file-pdf"
                        label="E' un template"
                        @update:model-value="modifElem"
                      >
                      </q-toggle>
                      <q-toggle
                        v-model="recscheda.scheda.isPagIntro"
                        color="positive"
                        icon="fas fa-file-pdf"
                        :label="$t('scheda.isPagIntro')"
                        @update:model-value="modifElem"
                      >
                      </q-toggle>
                      <q-input
                        label="Nome Template"
                        @update:model-value="modifElem"
                        v-model="recscheda.scheda.name"
                        filled
                        debounce="1000"
                        v-on:keyup.enter="saveElem"
                      >
                      </q-input>

                      <div class="row">
                        <q-select
                          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                          v-if="enableEdit"
                          rounded
                          outlined
                          v-model="recscheda.scheda.linkIdTemplate"
                          :options="globalStore.getSchedeOptByTag()"
                          @update:model-value="modifElem"
                          label="Scheda collegata:"
                          style="width: 350px"
                          emit-value
                          map-options
                        >
                        </q-select>
                        <q-btn
                          v-if="recscheda.scheda.linkIdTemplate"
                          icon="fas fa-edit"
                          label="Modifica Template"
                          color="primary"
                          @click="
                            naviga(
                              Products.getFilePathByLinkIdTemplate(
                                recscheda.scheda.linkIdTemplate
                              )
                            )
                          "
                        >
                        </q-btn>

                        <CMySlideNumber
                          v-model="recscheda.scheda.scalex"
                          label="Scale X:"
                          :min="0.5"
                          :max="1.5"
                          @update:model-value="modifElem"
                        />
                        <CMySlideNumber
                          v-model="recscheda.scheda.scaley"
                          label="Scale Y:"
                          :min="0.5"
                          :max="1.5"
                          @update:model-value="modifElem"
                        />

                        <br />
                        <div class="row">
                          <q-select
                            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                            v-if="enableEdit"
                            rounded
                            outlined
                            v-model="idSchedaDaCopiare"
                            :options="globalStore.getSchedeOptByTag()"
                            @update:model-value="modifElem"
                            label="Scegli Scheda"
                            style="width: 250px"
                            emit-value
                            map-options
                          >
                          </q-select>
                          <q-btn
                            icon="far fa-copy"
                            label="Copia da Template"
                            :disable="!idSchedaDaCopiare"
                            color="primary"
                            @click="copyfromTemplate(ind)"
                          >
                          </q-btn>
                        </div>
                      </div>
                      <br />

                      <CMySlider
                        label="Pagine max da visualizzare"
                        v-model="recscheda.numPagineMax"
                        :min="1"
                        :max="100"
                        color="green"
                        @update:model-value="modifElem"
                      ></CMySlider>

                      <q-expansion-item
                        dense
                        dense-toggle
                        expand-separator
                        label="Filtri"
                        :disabled="recscheda.scheda.linkIdTemplate"
                        icon="fas fa-play-circle"
                      >
                        <div class="column">
                          <q-select
                            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                            v-if="enableEdit && myel.catalogo"
                            rounded
                            outlined
                            v-model="recscheda.scheda.sort_field"
                            :options="shared_consts.ORDINAMENTO_CATALOGHI"
                            @update:model-value="modifElem"
                            label="Ordinamento"
                            style="width: 300px"
                            emit-value
                            map-options
                          >
                          </q-select>
                          <q-select
                            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                            v-if="enableEdit && myel.catalogo"
                            rounded
                            outlined
                            v-model="myel.catalogo.sort_dir"
                            :options="shared_consts.ORDINAMENTO_DIREZIONE"
                            @update:model-value="modifElem"
                            label="Direzione"
                            style="width: 200px"
                            emit-value
                            map-options
                          >
                          </q-select>
                          <q-select
                            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                            rounded
                            outlined
                            v-model="recscheda.scheda.idTipologie"
                            :options="Products.tipologie"
                            @update:model-value="modifElem"
                            multiple
                            option-value="IdTipologia"
                            option-label="Descrizione"
                            label="Includi"
                            style="width: 300px"
                            emit-value
                            map-options
                          >
                          </q-select>
                          <!--<q-select
                            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                            v-if="enableEdit && myel.catalogo && myel.catalogo.excludeproductTypes"
                            rounded
                            outlined
                            v-model="recscheda.scheda.excludeproductTypes"
                            :options="shared_consts.VERSIONI_PRODOTTO"
                            @update:model-value="modifElem"
                            multiple
                            label="Escludi"
                            style="width: 300px"
                            emit-value
                            map-options
                          >
                          </q-select>-->
                          <q-select
                            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                            v-if="enableEdit"
                            rounded
                            outlined
                            v-model="recscheda.scheda.editore"
                            :options="globalStore.getTableJoinByName('publishers')"
                            @update:model-value="modifElem"
                            multiple
                            label="Editori"
                            style="width: 300px"
                            emit-value
                            map-options
                            option-value="_id"
                            option-label="name"
                          >
                          </q-select>

                          <q-select
                            label="Prodotti Speciali:"
                            v-model="recscheda.scheda.arrProdottiSpeciali"
                            emit-value
                            map-options
                            :options="[]"
                            use-chips
                            multiple
                            @update:model-value="recscheda.scheda.arrProdottiSpeciali"
                            filled
                            use-input
                            new-value-mode="add-unique"
                            style="width: 350px"
                          />
                        </div>
                      </q-expansion-item>

                      <q-expansion-item
                        dense
                        dense-toggle
                        expand-separator
                        label="Pagina"
                        :disabled="recscheda.scheda.linkIdTemplate"
                        icon="fas fa-play-circle"
                      >
                        <CMyDimensioni
                          v-model="recscheda.scheda.dimensioni.pagina.dimensioni"
                          :path="costanti.DIR_SCHEDA"
                          @modifElem="modifElem"
                          :show_imgsfondo="true"
                          @update:model-value="modifElem"
                        ></CMyDimensioni>
                        <CMyText
                          v-model="recscheda.scheda.dimensioni.pagina.testo_title"
                          @modifElem="modifElem"
                          @saveFieldElem="saveFieldElem"
                          @update:model-value="modifElem"
                          label="Titolo in Alto"
                        >
                        </CMyText>
                        <CMyText
                          v-model="recscheda.scheda.dimensioni.pagina.testo_up"
                          @modifElem="modifElem"
                          @saveFieldElem="saveFieldElem"
                          @update:model-value="modifElem"
                          label="Testo in Alto"
                        >
                        </CMyText>
                        <CMyText
                          v-model="recscheda.scheda.dimensioni.pagina.testo_down"
                          @modifElem="modifElem"
                          @saveFieldElem="saveFieldElem"
                          @update:model-value="modifElem"
                          label="Testo in Basso"
                        >
                        </CMyText>
                      </q-expansion-item>

                      <q-expansion-item
                        dense
                        dense-toggle
                        expand-separator
                        label="Righe"
                        :disabled="recscheda.scheda.linkIdTemplate"
                        icon="fas fa-play-circle"
                      >
                        <CMyDimensioni
                          v-model="recscheda.scheda.dimensioni.riga"
                          :path="costanti.DIR_SCHEDA"
                          :showDim="false"
                          @modifElem="modifElem"
                          :show_imgsfondo="false"
                          @update:model-value="modifElem"
                        ></CMyDimensioni>
                      </q-expansion-item>

                      <q-expansion-item
                        dense
                        dense-toggle
                        expand-separator
                        label="Schede"
                        :disabled="recscheda.scheda.linkIdTemplate"
                        icon="fas fa-play-circle"
                      >
                        <q-toggle
                          v-model="recscheda.scheda.show_separatore"
                          color="primary"
                          label="Separatore righe"
                          @update:model-value="modifElem"
                        >
                        </q-toggle>
                        <div class="row">
                          <CMySlider
                            label="Schede per Riga"
                            v-model="recscheda.scheda.numschede_perRiga"
                            :min="1"
                            :max="10"
                            color="green"
                            @update:model-value="modifElemAndSchede"
                          ></CMySlider>
                          <CMySlider
                            label="Schede per Colonna"
                            v-model="recscheda.scheda.numschede_perCol"
                            :min="1"
                            :max="10"
                            color="red"
                            @update:model-value="modifElemAndSchede"
                          ></CMySlider>

                          <CMySize
                            label="Schede:"
                            v-model="recscheda.scheda.dimensioni.scheda_prodotto.size"
                            :gap="true"
                            @update:model-value="modifElem"
                          ></CMySize>

                          <CBorders
                            label="Margini Schede:"
                            v-model="recscheda.scheda.dimensioni.scheda_prodotto.margini"
                            @update:model-value="modifElem"
                          ></CBorders>

                          <CMySize
                            label="Immagini:"
                            :fit="true"
                            v-model="recscheda.scheda.dimensioni.immagine_prodotto.size"
                            @update:model-value="modifElem"
                          ></CMySize>
                        </div>
                      </q-expansion-item>

                      <q-expansion-item
                        dense
                        dense-toggle
                        expand-separator
                        label="Testo"
                        :disabled="recscheda.scheda.linkIdTemplate"
                        icon="fas fa-play-circle"
                      >
                        <CMyText
                          v-model="recscheda.scheda.testo_right_attaccato"
                          @modifElem="modifElem"
                          @saveFieldElem="saveFieldElem"
                          @update:model-value="modifElem"
                          label="Testo a Destra attaccato"
                        >
                        </CMyText>
                        <CMyText
                          v-model="recscheda.scheda.testo_right"
                          @modifElem="modifElem"
                          @saveFieldElem="saveFieldElem"
                          @update:model-value="modifElem"
                          label="Testo a Destra"
                        >
                        </CMyText>

                        <CMyText
                          v-model="recscheda.scheda.testo_bottom"
                          @modifElem="modifElem"
                          @saveFieldElem="saveFieldElem"
                          @update:model-value="modifElem"
                          label="Testo in Basso"
                          :show_dimensioni="true"
                        >
                        </CMyText>
                      </q-expansion-item>

                      <q-expansion-item
                        dense
                        dense-toggle
                        expand-separator
                        label="Codice a Barre"
                        :disabled="recscheda.scheda.linkIdTemplate"
                        icon="fas fa-play-circle"
                      >
                        <q-toggle
                          v-model="recscheda.scheda.barcode.show"
                          color="positive"
                          icon="fas fa-file-pdf"
                          label="Mostra Codice a Barre"
                          @update:model-value="modifElem"
                        >
                        </q-toggle>
                        <q-select
                          v-model="recscheda.scheda.barcode.format"
                          :options="tools.formatOptions"
                          label="Formato"
                          options-dense
                          dense
                          emit-value
                          map-options
                          style="width: 100px"
                          @update:model-value="modifElem"
                          fill-input
                          text-color="white"
                        >
                        </q-select>
                        <CMySlider
                          label="Width Linee:"
                          v-model="recscheda.scheda.barcode.widthlines"
                          :min="1"
                          :max="10"
                          color="green"
                          @update:model-value="modifElem"
                        ></CMySlider>
                        <q-toggle
                          v-model="recscheda.scheda.barcode.show_at_right"
                          color="positive"
                          label="Mostra a Destra"
                          @update:model-value="modifElem"
                        >
                        </q-toggle>

                        <CMySlider
                          label="Font Size:"
                          v-model="recscheda.scheda.barcode.font.size"
                          :min="8"
                          :max="40"
                          color="green"
                          addstr="px"
                          @update:model-value="modifElem"
                        ></CMySlider>

                        <CMySize
                          label="Dimensioni:"
                          v-model="recscheda.scheda.barcode.size"
                          @update:model-value="modifElem"
                          :addstr="false"
                          :gap="true"
                        ></CMySize>
                      </q-expansion-item>

                      <q-expansion-item
                        dense
                        dense-toggle
                        expand-separator
                        label="Etichette Speciali"
                        :disabled="recscheda.scheda.linkIdTemplate"
                        icon="fas fa-play-circle"
                      >
                        <q-toggle
                          v-model="recscheda.scheda.etichette.novita.show"
                          color="positive"
                          label="Novità"
                          @update:model-value="modifElem"
                        >
                        </q-toggle>
                        <CMySlider
                          label="Pubblicato meno di X mesi fà"
                          v-model="recscheda.scheda.etichette.novita.months"
                          :min="1"
                          :max="24"
                          color="green"
                          @update:model-value="modifElem"
                        ></CMySlider>
                        <q-toggle
                          v-model="recscheda.scheda.etichette.bestseller.show"
                          color="positive"
                          label="Bestseller"
                          @update:model-value="modifElem"
                        >
                        </q-toggle>
                        <CMySlider
                          label="Primi N in Classifica"
                          v-model="
                            recscheda.scheda.etichette.bestseller.quantiFattRaggiunti
                          "
                          :min="1"
                          :max="100"
                          color="green"
                          @update:model-value="modifElem"
                        ></CMySlider>
                      </q-expansion-item>
                    </div>
                  </q-tab-panel>
                </q-tab-panels>
              </div>
            </q-expansion-item>
          </div>

          <q-expansion-item
            dense
            dense-toggle
            expand-separator
            label="Prima Pagina"
            v-if="false"
            icon="fas fa-play-circle"
          >
            <div class="row">
              <CMyDimensioni
                :path="costanti.DIR_CATALOGO"
                v-model="myel.catalogo.first_page"
                @modifElem="modifElem"
                :show_imgsfondo="true"
                @update:model-value="modifElem"
              ></CMyDimensioni>
              <CMyText
                v-model="myel.catalogo.first_page.text_html"
                @modifElem="modifElem"
                @saveFieldElem="saveFieldElem"
                @update:model-value="modifElem"
                label="Testo"
              >
              </CMyText>
            </div>

            <br />
          </q-expansion-item>

          <q-expansion-item
            dense
            dense-toggle
            expand-separator
            label="Ultima Pagina"
            v-if="false"
            icon="fas fa-play-circle"
          >
            <div class="row">
              <CMyDimensioni
                :path="costanti.DIR_CATALOGO"
                v-model="myel.catalogo.last_page"
                @modifElem="modifElem"
                :show_imgsfondo="true"
                @update:model-value="modifElem"
              ></CMyDimensioni>
              <CMyText
                v-model="myel.catalogo.last_page.text_html"
                @modifElem="modifElem"
                @saveFieldElem="saveFieldElem"
                @update:model-value="modifElem"
                label="Testo"
              >
              </CMyText>
            </div>
          </q-expansion-item>
          <div v-if="enableEdit">
            <q-expansion-item
              dense
              dense-toggle
              expand-separator
              label="Per Stampa"
              v-if="tools.isAdmin()"
              icon="fas fa-play-circle"
            >
              <q-toggle
                v-model="myel.catalogo.print_isTemplate"
                color="positive"
                icon="fas fa-file-pdf"
                label="E' un template"
                @update:model-value="modifElem"
              >
              </q-toggle>
              <q-select
                :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                v-if="enableEdit"
                rounded
                outlined
                v-model="myel.catalogo.print_linkIdTemplate"
                :options="Products.getOptCatalogoPrintTemplate()"
                @update:model-value="modifElem"
                label="Catalogo Stampa collegato:"
                style="width: 350px"
                emit-value
                map-options
              >
              </q-select>

              <div
                :class="{
                  sfondo_print: !myel.catalogo.print_linkIdTemplate,
                  'bg-grey': myel.catalogo.print_linkIdTemplate,
                }"
              >
                Per Stampa:
                <q-toggle
                  v-model="myel.catalogo.printable"
                  color="positive"
                  icon="fas fa-file-pdf"
                  label="Versione Stampabile"
                  @update:model-value="modifElem"
                >
                </q-toggle>

                <q-toggle
                  v-model="myel.catalogo.indebug"
                  color="positive"
                  icon="fas fa-file-pdf"
                  label="In Debug"
                  @update:model-value="modifElem"
                >
                </q-toggle>

                <q-select
                  rounded
                  style="width: 350px"
                  outlined
                  v-model="myel.catalogo.areadistampa.format"
                  :options="tools.SelectListFormatPDF"
                  @update:model-value="modifElem"
                  dense
                  label="Formato:"
                  emit-value
                  map-options
                >
                </q-select>
                <div v-if="myel.catalogo.areadistampa.format.length > 1">
                  Ratio:
                  {{
                    myel.catalogo.areadistampa.format[0] /
                    myel.catalogo.areadistampa.format[1]
                  }}
                </div>
                <q-select
                  rounded
                  style="width: 350px"
                  outlined
                  v-model="myel.catalogo.areadistampa.format_printable"
                  :options="tools.SelectListFormatPDF"
                  @update:model-value="modifElem"
                  dense
                  label="Formato per Stampa:"
                  emit-value
                  map-options
                >
                </q-select>
                <div v-if="myel.catalogo.areadistampa.format_printable?.length > 1">
                  Ratio:
                  {{
                    myel.catalogo.areadistampa.format_printable[0] /
                    myel.catalogo.areadistampa.format_printable[1]
                  }}
                </div>
                <CMySlideNumber
                  v-model="myel.catalogo.areadistampa.scalex"
                  label="Scale X:"
                  :min="0.5"
                  :max="1.5"
                  @update:model-value="modifElem"
                />
                <CMySlideNumber
                  v-model="myel.catalogo.areadistampa.scaley"
                  label="Scale Y:"
                  :min="0.5"
                  :max="1.5"
                  @update:model-value="modifElem"
                />
                <CMySlideNumber
                  v-model="myel.catalogo.areadistampa.scale_printablex"
                  label="Scale X Stampa:"
                  :min="0.5"
                  :max="1.5"
                  @update:model-value="modifElem"
                />
                <CMySlideNumber
                  v-model="myel.catalogo.areadistampa.scale_printabley"
                  label="Scale Y Stampa:"
                  :min="0.5"
                  :max="1.5"
                  @update:model-value="modifElem"
                />

                <q-select
                  rounded
                  style="width: 200px"
                  outlined
                  v-model="myel.catalogo.areadistampa.scalecanvas"
                  :options="tools.SelectListQualityPDF"
                  @update:model-value="modifElem"
                  dense
                  label="Qualità:"
                  emit-value
                  map-options
                >
                </q-select>
                <q-select
                  rounded
                  style="width: 150px"
                  outlined
                  v-model="myel.catalogo.areadistampa.orientation"
                  :options="tools.SelectListOrientamentoPDF"
                  @update:model-value="modifElem"
                  dense
                  label="Orientamento:"
                  emit-value
                  map-options
                >
                </q-select>
                <q-select
                  rounded
                  style="width: 150px"
                  outlined
                  v-model="myel.catalogo.areadistampa.unit"
                  :options="tools.SelectListUnitPDF"
                  @update:model-value="modifElem"
                  dense
                  label="Unità:"
                  emit-value
                  map-options
                >
                </q-select>
                <q-toggle
                  v-model="myel.catalogo.areadistampa.compress"
                  color="positive"
                  icon="fas fa-file-pdf"
                  label="Comprimi"
                  @update:model-value="modifElem"
                >
                </q-toggle>
                <CBorders
                  label="Margini di Stampa (mm):"
                  v-model="myel.catalogo.areadistampa.margini"
                  @update:model-value="modifElem"
                  addstr=""
                ></CBorders>
              </div>
            </q-expansion-item>
            <div></div>
          </div>
        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE_SECTION">
          <!-- Edita i seguenti campi:
            Title, subtitle, features {name, icon, description }-->

            <q-toggle
              v-model="myel.parambool2"
              color="positive"
              icon="fas fa-moon"
              label="Dark"
              @update:model-value="modifElem"
            ></q-toggle>
            <q-input
              dense
              label="Sottotitolo Primario"
              @update:model-value="modifElem"
              v-model="myel.container3"
              filled
              v-on:keyup.enter="saveElem"
            ></q-input>

            <q-input
              dense
              label="Titolo"
              @update:model-value="modifElem"
              v-model="myel.container"
              filled
              v-on:keyup.enter="saveElem"
            ></q-input>
            <q-input
              dense
              label="Sottotitolo"
              @update:model-value="modifElem"
              v-model="myel.container2"
              filled
              v-on:keyup.enter="saveElem"
            ></q-input>
            <div v-if="myel.features && myel.features.length > 0" class="q-mt-md">
              <div v-for="(feature, index) in myel.features" :key="index">
                <div class="bg-blue text-white">Testo {{index + 1}}:</div>
                <q-input
                  dense
                  label="Nome"
                  @update:model-value="modifElem"
                  v-model="myel.features[index].name"
                  filled
                  v-on:keyup.enter="saveElem"
                ></q-input>
                <q-input
                  dense
                  label="Icona"
                  @update:model-value="modifElem"
                  v-model="myel.features[index].icon"
                  filled
                  v-on:keyup.enter="saveElem"
                ></q-input>
                <q-input
                  dense
                  label="Descrizione"
                  @update:model-value="modifElem"
                  v-model="myel.features[index].description"
                  filled
                  v-on:keyup.enter="saveElem"
                ></q-input>
                <q-btn
                  icon="fas fa-times"
                  color="negative"
                  @click="removeFeature(index)"
                ></q-btn>
              </div>
            </div>
            <q-btn
              icon="fas fa-plus"
              color="positive"
              @click="addFeature()"
            ></q-btn>
          </div>
      </q-list>
    </div>
    <br /><br /><br />
  </div>
  <div>
    <q-dialog
      v-model="visuadd"
      style="
        width: 600px;
        max-width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
      "
      transition-show="slide-up"
      transition-hide="slide-down"
    >
      <CMyElemAdd
        v-if="visuadd"
        :myelem="myel"
        :myElemParent="myel"
        :idPage="idPage"
        :path="path"
        :editOn="editOn"
        :direzadd="direzadd"
        :addOn="addOn"
        @AddedNewElem="AddedNewElem"
        @close="visuadd = false"
      >
      </CMyElemAdd>
    </q-dialog>
  </div>
</template>

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