<template>
  <div
    v-if="myrec && myrec._id"
    :class="
      $q.screen.lt.md || nopopup ? ' fulldiv ' : ' well-positioned-dialog'
    "
  >
    <div
      :class="'items-start ' + (!isSmall ? ' q-gutter-xs full-height ' : '')"
    >
      <div class="row">
        <q-toolbar v-if="!nopopup" class="bg-white text-black riempi">
          <q-toolbar-title> </q-toolbar-title>
          <q-btn
            v-if="!isSmall && showAnteprima"
            :label="isSmall ? 'Apri scheda' : 'Riduci scheda'"
            @click="toggleShowScheda"
            text-color="purple"
            :icon="!isSmall ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
            class="q-mr-sm"
          />
          <q-btn flat round color="black" icon="close" v-close-popup></q-btn>
        </q-toolbar>

        <q-card
          ref="cardRef"
          :style="cardStyle"
          :class="'my-card  visudialog no-padding '"
          bordered
        >
          <q-card-section>
            <div v-if="!isSmall">
              <CGalleryImages
                v-if="myrec.photos.length > 0"
                :imgGallery="myrec.photos"
                :directory="
                  tools.getDirUpload() +
                  tools.getDirectoryGall(myrec, table, '')
                "
              >
              </CGalleryImages>
              <div v-else class="text-center">
                <img
                  class="text-center"
                  :src="tools.getimglogo()"
                  height="50"
                  alt="Immagine Logo"
                />
              </div>
            </div>

            <div v-if="!isSmall" class="absolute-top-right q-mr-sm q-my-md">
              <div class="column">
                <q-btn flat round icon="fas fa-ellipsis-h" style="z-index: 1">
                  <q-menu>
                    <q-list v-if="true" style="min-width: 200px">
                      <q-item
                        v-if="myrec.profile && myrec.profile.username_telegram"
                        clickable
                        v-close-popup
                        @click.stop="tools.copyToClip($q, getlinkpage(), true)"
                      >
                        <q-item-section avatar>
                          <q-icon color="blue" name="fas fa-share" />
                        </q-item-section>
                        <q-item-section>
                          {{ $t("reaction.condividi") }}
                        </q-item-section>
                      </q-item>
                      <q-item
                        v-if="myrec.profile && myrec.profile.username_telegram"
                        clickable
                        v-close-popup
                      >
                        <q-item-section avatar>
                          <q-icon color="blue" name="telegram" />
                        </q-item-section>
                        <q-item-section>
                          <a
                            v-if="
                              myrec.profile && myrec.profile.username_telegram
                            "
                            :href="
                              tools.getHttpForTelegram(
                                myrec.profile.username_telegram
                              )
                            "
                            target="_blank"
                            >{{ $t("dialog.telegram") }} -
                            {{ tools.getNomeUtenteByRecUser(myrec) }}</a
                          >
                        </q-item-section>
                      </q-item>
                      <q-item
                        v-else-if="
                          myrec.profile && !myrec.profile.username_telegram
                        "
                        clickable
                        v-close-popup
                      >
                        <q-item-section avatar>
                          <q-icon color="blue" name="email" />
                        </q-item-section>
                        <q-item-section>
                          <a
                            v-if="myrec.email"
                            :href="
                              tools.isUserOk()
                                ? tools.getemailto(myrec.email)
                                : null
                            "
                            target="_blank"
                            >{{ $t("msgs.write_email") }} -
                            {{ tools.getNomeUtenteByRecUser(myrec) }}</a
                          >
                        </q-item-section>
                      </q-item>
                      <q-item
                        v-if="!nopopup && myrec.myreact"
                        clickable
                        v-close-popup
                        @click.stop="
                          naviga(tools.getPathByTableAndRec(table, myrec))
                        "
                      >
                        <q-item-section avatar>
                          <q-icon color="blue" name="fas fa-globe" />
                        </q-item-section>
                        <q-item-section>
                          {{ $t("event.openpage") }}
                        </q-item-section>
                      </q-item>
                      <q-separator />
                      <q-item
                        v-if="myrec"
                        clickable
                        v-close-popup
                        @click.stop="
                          clicca(
                            costanti.TIPOFAVBOOK.SEEN,
                            false,
                            $t('cmd.seen', {
                              num: myrec.numseen ? myrec.numseen : 0,
                            })
                          )
                        "
                      >
                        <q-item-section avatar>
                          <q-icon color="blue" name="far fa-eye" />
                        </q-item-section>
                        <q-item-section>
                          {{
                            $t("cmd.seen", {
                              num: myrec.numseen ? myrec.numseen : 0,
                            })
                          }}
                        </q-item-section>
                      </q-item>
                      <q-item
                        v-if="myrec"
                        clickable
                        v-close-popup
                        @click.stop="
                          clicca(
                            costanti.TIPOFAVBOOK.FAVORITE,
                            false,
                            $t('cmd.favorite', {
                              num: myrec.numfav ? myrec.numfav : 0,
                            })
                          )
                        "
                      >
                        <q-item-section avatar>
                          <q-icon color="red" name="favorite" />
                        </q-item-section>
                        <q-item-section>
                          {{
                            $t("cmd.favorite", {
                              num: myrec.numfav ? myrec.numfav : 0,
                            })
                          }}
                        </q-item-section>
                      </q-item>
                      <q-item
                        v-if="table === shared_consts.TABLES_MYBACHECAS"
                        clickable
                        v-close-popup
                        @click.stop="
                          clicca(
                            costanti.TIPOFAVBOOK.ATTEND,
                            false,
                            $t('cmd.attend', {
                              num: numpart,
                            })
                          )
                        "
                      >
                        <q-item-section avatar>
                          <q-icon color="green" name="fas fa-user-check" />
                        </q-item-section>
                        <q-item-section>
                          {{
                            $t("cmd.attend", {
                              num: numpart,
                            })
                          }}
                        </q-item-section>
                      </q-item>
                      <q-item
                        v-if="myrec"
                        clickable
                        v-close-popup
                        @click.stop="
                          clicca(
                            costanti.TIPOFAVBOOK.BOOKMARK,
                            false,
                            $t('cmd.bookmark', {
                              num: myrec.numbook ? myrec.numbook : 0,
                            })
                          )
                        "
                      >
                        <q-item-section avatar>
                          <q-icon color="teal" name="bookmark" />
                        </q-item-section>
                        <q-item-section>
                          {{
                            $t("cmd.bookmark", {
                              num: myrec.numbook ? myrec.numbook : 0,
                            })
                          }}
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-menu>
                </q-btn>
                <q-btn
                  flat
                  round
                  color="blue"
                  icon="share"
                  style="z-index: 1"
                  @click.stop="tools.copyToClip($q, getlinkpage(), true)"
                >
                </q-btn>
                <q-btn
                  flat
                  round
                  color="blue"
                  icon="far fa-eye"
                  style="z-index: 1"
                >
                  <q-badge
                    v-if="myrec"
                    text-color="primary"
                    color="white"
                    class="badge-favbook"
                    :label="myrec.numseen ? myrec.numseen : 0"
                    floating
                    transparent
                  />
                </q-btn>
                <q-btn
                  style="z-index: 1"
                  v-if="table === shared_consts.TABLES_MYBACHECAS"
                  flat
                  round
                  color="green"
                  :icon="
                    calendarStore.isPartecipero(myrec._id, table)
                      ? 'fas fa-user-check'
                      : 'far fa-check-circle'
                  "
                  @click.stop="EditBookEvent(true)"
                >
                  <q-badge
                    v-if="myrec.mybookings"
                    style="z-index: 1"
                    text-color="primary"
                    color="white"
                    class="badge-favbook"
                    :label="numpart"
                    floating
                    transparent
                  />
                </q-btn>
                <q-btn
                  style="z-index: 1"
                  flat
                  round
                  color="red"
                  :icon="
                    userStore.isFavorite(myrec._id, table)
                      ? 'favorite'
                      : 'far fa-heart'
                  "
                  @click.stop="clicca(costanti.TIPOFAVBOOK.FAVORITE, true, '')"
                >
                  <q-badge
                    v-if="myrec"
                    text-color="primary"
                    color="white"
                    class="badge-favbook"
                    :label="myrec.numfav ? myrec.numfav : 0"
                    floating
                    transparent
                  />
                </q-btn>
                <div class="">
                  <q-btn
                    style="z-index: 1"
                    flat
                    round
                    color="teal"
                    :icon="
                      userStore.isBookmarked(myrec._id, table)
                        ? 'bookmark'
                        : 'far fa-bookmark'
                    "
                    @click.stop="
                      clicca(costanti.TIPOFAVBOOK.BOOKMARK, true, '')
                    "
                  >
                    <q-badge
                      v-if="myrec"
                      text-color="primary"
                      color="white"
                      class="badge-favbook"
                      :label="myrec.numbook ? myrec.numbook : 0"
                      floating
                      transparent
                    />
                  </q-btn>
                </div>
              </div>
            </div>

            <q-separator v-if="!isSmall" />

            <q-list style="z-index: 5">
              <q-item v-if="myrec.tipodiAttivita">
                <q-item-section avatar>
                  <q-icon color="blue" name="fas fa-balance-scale" />
                </q-item-section>
                <q-item-section>
                  <q-item-label class="text-bold text-h7">
                    <q-chip dense color="green" text-color="white"
                      >{{ getTipodiAttivita() }}
                    </q-chip>
                  </q-item-label>
                </q-item-section>
              </q-item>
              <q-item v-if="myrec.adType">
                <q-item-section avatar>
                  <div v-if="showBadge()" class="text-center">
                    <q-chip
                      dense
                      :color="fieldsTable.getColByAdType(myrec.adType)"
                      text-color="white"
                      >{{
                        fieldsTable.getValByTabAndId(
                          table,
                          "adType",
                          myrec.adType
                        )
                      }}
                    </q-chip>
                  </div>
                </q-item-section>
              </q-item>
              <q-item v-if="myrec.typeHosp">
                <q-item-section avatar>
                  <q-icon color="blue" name="fas fa-balance-scale" />
                </q-item-section>
                <q-item-section>
                  <q-item-label class="text-bold text-h7">
                    <q-chip dense color="green" text-color="white"
                      >{{ getTypeHosps() }}
                    </q-chip>
                  </q-item-label>
                </q-item-section>
              </q-item>
              <q-item v-if="myrec.descr">
                <q-item-section>
                  <q-item-label
                    v-if="table === shared_consts.TABLES_MYBACHECAS"
                    class="text-h6 text-bold"
                    >{{ myrec.descr }}</q-item-label
                  >
                  <q-item-label v-else class="text-h7">{{
                    myrec.descr
                  }}</q-item-label>
                </q-item-section>
              </q-item>
              <q-item
                v-if="
                  myrec.idStatusSkill &&
                  myrec.idStatusSkill.length > 0 &&
                  JSON.stringify(myrec.idStatusSkill) !== '[1]'
                "
              >
                <q-item-section avatar>
                  <q-icon color="green" name="mood" />
                </q-item-section>

                <q-item-section>
                  <q-item-label>
                    <span
                      v-for="(recstatus, index) in myrec.idStatusSkill"
                      :key="index"
                    >
                      <q-chip
                        dense
                        :color="globalStore.getColByStatusSkills(recstatus)"
                        text-color="white"
                      >
                        {{ globalStore.getStatusSkillById(recstatus) }}
                      </q-chip>
                    </span>
                  </q-item-label>
                </q-item-section>
              </q-item>
              <div v-if="!isSmall">
                <q-item v-if="myrec.dateTimeStart">
                  <q-item-section avatar>
                    <q-icon color="green" name="far fa-calendar-alt" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label>
                      <span>{{
                        tools.getstrDateMonthTimeLong(myrec.dateTimeStart)
                      }}</span>
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item v-if="myrec.dateTimeEnd">
                  <q-item-section avatar>
                    <q-icon color="red" name="far fa-calendar-alt" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label>
                      <span>{{
                        tools.getstrDateMonthTimeLong(myrec.dateTimeEnd)
                      }}</span>
                    </q-item-label>
                  </q-item-section>
                </q-item>

                <q-item v-if="getSectorByRec(myrec)">
                  <q-item-section avatar>
                    <q-icon color="blue" name="category" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label>
                      <q-chip
                        v-if="
                          getSectorByRec(myrec) &&
                          getSectorByRec(myrec)[0].descr
                        "
                        class="glossy"
                        color="blue"
                        text-color="white"
                        dense
                      >
                        <span class="cal__quota-content">{{
                          getSectorByRec(myrec)[0].descr
                        }}</span>
                      </q-chip>
                      <q-chip
                        v-if="
                          getRecGoodSkillByRec(myrec) &&
                          getRecGoodSkillByRec(myrec).length > 0 &&
                          getRecGoodSkillByRec(myrec)[0].descr
                        "
                        class="glossy"
                        dense
                        color="blue"
                        text-color="white"
                      >
                        <span class="cal__quota-content">{{
                          getRecGoodSkillByRec(myrec)[0].descr
                        }}</span>
                      </q-chip>
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item v-if="myrec.numMaxPeopleHosp" class="q-mt-sm">
                  <q-item-section avatar>
                    <q-icon color="blue" name="fas fa-users" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label class="q-px-xs q-ma-xs">
                      <span class="accom_maxosp">{{
                        myrec.numMaxPeopleHosp
                      }}</span
                      >{{ t("hosps.numMaxPeopleHosp") }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  v-if="!!myrec.accomodation && myrec.accomodation.length > 0"
                >
                  <q-item-section avatar>
                    <q-icon color="orange" name="fas fa-bed" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>
                      <CAccomodation
                        v-if="!!myrec.accomodation"
                        :mylist="myrec.accomodation"
                        :isInModif="false"
                        :edit="false"
                        :canModify="false"
                      >
                      </CAccomodation>
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  v-if="!!myrec.preferences && myrec.preferences.length > 0"
                >
                  <q-item-section avatar>
                    <q-icon color="red" name="fas fa-asterisk" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>
                      <CMyChipList
                        :rec="myrec"
                        :type="costanti.FieldType.multiselect"
                        :value="myrec.preferences"
                        :options="
                          globalStore.getTableJoinByName(
                            toolsext.TABPREF,
                            false,
                            false,
                            null
                          )
                        "
                        :optval="fieldsTable.getKeyByTable(toolsext.TABPREF)"
                        :optlab="fieldsTable.getLabelByTable(toolsext.TABPREF)"
                        :opticon="fieldsTable.getIconByTable(toolsext.TABPREF)"
                      ></CMyChipList>
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-separator />
                <q-item-label v-if="myrec.note"
                  ><div
                    v-html="myrec.note"
                    class="q-my-sm clBorderService clDescrEstesa"
                  ></div
                ></q-item-label>

                <q-item
                  v-if="
                    myrec.mycities &&
                    myrec.mycities.length > 0 &&
                    myrec.mycities[0].comune
                  "
                >
                  <q-item-section avatar>
                    <q-icon color="amber" name="fas fa-map-marker-alt" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>
                      <div v-if="myrec.address">
                        {{ myrec.address }}
                      </div>
                      <span
                        v-for="(city, index) in myrec.mycities"
                        :key="index"
                      >
                        <span v-if="city.comune">
                          {{ city.comune }} ({{ city.prov }})</span
                        ><span v-if="myrec.mycities.length > 1"> - </span>
                      </span>
                    </q-item-label>
                    <q-item-label v-if="myrec.profile.qualifica" caption>{{
                      myrec.biografia
                    }}</q-item-label>
                  </q-item-section>
                </q-item>

                <q-item clickable v-if="table === 'mybachecas'">
                  <q-item-section avatar>
                    <q-icon color="green" name="fas fa-house-user" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label lines="1">
                      {{ $t("event.organisedBy") }}: {{ myrec.organisedBy }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-card
                  v-if="myrec.mygrp && myrec.mygrp.groupname"
                  class="my-card clBorderUser"
                  bordered
                  @click="naviga(tools.getPathByGroup(myrec.mygrp))"
                >
                  <CMyGroup
                    :mygrp="myrec.mygrp"
                    :visu="costanti.USER_GROUPS"
                    :noaut="true"
                  >
                  </CMyGroup>
                </q-card>
                <q-card
                  v-else-if="
                    !myrec.organisedBy &&
                    shared_consts.TABLES_VISU_LISTA_USER.includes(table)
                  "
                  class="my-card clBorderUser"
                  bordered
                >
                  <CMyUser
                    :mycontact="myrec"
                    :visu="costanti.FIND_PEOPLE"
                    @setCmd="tools.setCmd"
                  >
                  </CMyUser>
                </q-card>
                <q-item
                  clickable
                  v-if="table === 'mybachecas' && myrec.contact_phone"
                >
                  <q-item-section avatar>
                    <q-icon color="green" name="fas fa-phone" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label lines="1">
                      <CLabel
                        v-bind="$attrs"
                        :copy="true"
                        :value="myrec.contact_phone"
                        :label="$t('event.contact_phone')"
                      />
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-if="myrec.contact_email">
                  <q-item-section avatar>
                    <q-icon color="blue" name="fas fa-mail-bulk" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label lines="1">
                      {{ $t("event.contact_email") }}:
                      <span v-html="tools.getlinkEmailTo(myrec.contact_email)"
                    /></q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  clickable
                  v-if="table === 'mybachecas' && myrec.contact_telegram"
                >
                  <q-item-section avatar>
                    <q-icon color="blue" name="fab fa-telegram" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label lines="1">
                      {{ $t("msgs.telegrammsg") }}:
                      <a
                        :href="tools.getHttpForTelegram(myrec.contact_telegram)"
                        target="_blank"
                        >@{{ myrec.contact_telegram }}
                      </a>
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  clickable
                  v-if="
                    myrec.coordinate_gps &&
                    (myrec.coordinate_gps.address ||
                      myrec.coordinate_gps.coordinates)
                  "
                >
                  <q-item-section avatar>
                    <q-icon color="blue" name="fas fa-crosshairs" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label>
                      <div v-if="myrec.coordinate_gps.address">
                        {{ myrec.coordinate_gps.address }}
                      </div>
                    </q-item-label>
                    <q-item-label>
                      <div v-if="myrec.coordinate_gps.coordinates">
                        {{ tools.getCoordinatesToShow(myrec.coordinate_gps) }}
                      </div>
                      <q-btn
                        :label="t('attivita.vediinmappa')"
                        v-if="myrec.coordinate_gps.coordinates"
                        color="primary"
                        icon="fas fa-map-marker-alt"
                        size="md"
                        class="q-my-sm"
                        @click="showInMap(myrec)"
                      />
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-if="myrec.link_maplocation">
                  <q-item-section avatar>
                    <q-icon color="blue" name="fas fa-map-marker-alt" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label lines="1">
                      <span
                        v-html="
                          tools.getlinkhref(
                            myrec.link_maplocation,
                            'Apri Mappa'
                          )
                        "
                    /></q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-if="myrec.website">
                  <q-item-section avatar>
                    <q-icon color="blue" name="fas fa-globe" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label lines="1">
                      <span
                        v-html="
                          tools.getlinkhref(
                            myrec.website,
                            t('services.visit_website', {
                              link: tools.getMainLink(myrec.website),
                            })
                          )
                        "
                    /></q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-if="myrec.email && !myrec.contact_email">
                  <q-item-section avatar>
                    <q-icon color="blue-grey-6" name="fas fa-envelope" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label lines="1">
                      <span v-html="tools.getlinkEmailTo(myrec.email)"
                    /></q-item-label>
                  </q-item-section>
                </q-item>
                <q-item v-if="myrec.telegram_username" clickable>
                  <q-item-section avatar>
                    <q-icon color="blue" name="telegram" />
                  </q-item-section>
                  <q-item-section>
                    <a
                      v-if="myrec.telegram_username"
                      :href="tools.getHttpForTelegram(myrec.telegram_username)"
                      target="_blank"
                      >@{{ myrec.telegram_username }}</a
                    >
                  </q-item-section>
                </q-item>
                <q-item clickable v-if="myrec.whatsapp">
                  <q-item-section avatar>
                    <q-icon color="green" name="fab fa-whatsapp" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label lines="1">
                      {{ myrec.whatsapp }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-if="myrec.cell_phone">
                  <q-item-section avatar>
                    <q-icon color="green" name="fas fa-mobile-alt" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label lines="1">
                      <span> {{ myrec.cell_phone }}: </span>
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  clickable
                  v-if="
                    table === shared_consts.TABLES_MYBACHECAS && numpart > 0
                  "
                >
                  <q-item-section avatar>
                    <q-icon color="blue" name="fas fa-user-check" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label lines="1">
                      <q-btn
                        rounded
                        color="primary"
                        :label="
                          numpart
                            ? $t('cmd.attend1', { num: numpart })
                            : $t('cmd.attend', { num: numpart })
                        "
                        @click="
                          clicca(
                            costanti.TIPOFAVBOOK.ATTEND,
                            false,
                            $t('cmd.attend', { num: numpart })
                          )
                        "
                      >
                      </q-btn>
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  clickable
                  v-if="
                    table === 'mybachecas' &&
                    (myrec.min_partecip || myrec.max_partecip)
                  "
                >
                  <q-item-section avatar>
                    <q-icon color="blue" name="fas fa-users" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label lines="1">
                      <span v-if="myrec.min_partecip"
                        >{{ $t("event.min_partecip") }}:
                        {{ myrec.min_partecip }}</span
                      ><br />
                      <span v-if="myrec.max_partecip"
                        >{{ $t("event.max_partecip") }}:
                        {{ myrec.max_partecip }}</span
                      >
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  v-if="myrec.idContribType && myrec.idContribType.length > 0"
                >
                  <q-item-section avatar>
                    <q-icon color="green" name="fas fa-hand-holding" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label>
                      <span v-if="myrec.contribstr"
                        ><br />{{ myrec.contribstr }}</span
                      >
                      <span
                        v-for="(reccontr, index) in myrec.idContribType"
                        :key="index"
                      >
                        <q-chip
                          dense
                          :color="calendarStore.getColByContribType(reccontr)"
                          text-color="white"
                        >
                          {{ calendarStore.getContribtypeById(reccontr) }}
                        </q-chip>
                      </span>
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item>
                  <q-item-section avatar>
                    <q-icon color="blue" name="far fa-edit" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label>
                      {{ $t("reg.pub_updated") }}
                      <span v-if="myrec.date_updated">{{
                        tools.getstrDateMonthLong(myrec.date_updated)
                      }}</span
                      ><span v-else>{{
                        tools.getstrDateMonthLong(myrec.date_created)
                      }}</span>
                      <span v-if="myrec.organisedBy || myrec.groupname"
                        ><br />{{ $t("reg.who_updated") }}
                        <span class="text-bold"
                          ><a :href="'my/' + myrec.username">{{
                            tools.getNomeUtenteByRecUser(myrec)
                          }}</a></span
                        ></span
                      >
                      <span v-if="myrec.createdBy"
                        ><br />{{ $t("services.createdBy") }}
                        <span class="text-bold"
                          ><a :href="'my/' + createdBy">{{
                            createdBy
                          }}</a></span
                        ></span
                      >
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-if="false">
                  <q-item-section avatar>
                    <q-icon color="red" name="local_gas_station" />
                  </q-item-section>

                  <q-item-section>
                    <q-item-label></q-item-label>
                    <q-item-label caption>Fill your gas tank.</q-item-label>
                  </q-item-section>
                </q-item>
              </div>
            </q-list>
            <q-separator />

            <div v-if="isSmall && showAnteprima" class="row justify-center">
              <q-btn
                :label="isSmall ? 'Apri scheda' : 'Riduci scheda'"
                @click="toggleShowScheda"
                color="purple"
                class="q-mr-sm"
              />
              <q-btn
                outlined
                rounded
                :label="$t('dialog.close')"
                color="primary"
                icon="close"
                v-close-popup
              ></q-btn>
            </div>
          </q-card-section>
          <q-card-actions v-if="!isSmall" class="row justify-center q-px-xs">
            <div class="row justify-evenly q-my-sm">
              <div class="row q-mx-sm justify-evenly">
                <q-btn
                  class="q-mx-xxs q-my-xs"
                  rounded
                  :label="
                    userStore.isFavorite(myrec._id, table)
                      ? $t('reaction.tipiace')
                      : $t('reaction.mipiace')
                  "
                  text-color="red"
                  color="white"
                  :icon="
                    userStore.isFavorite(myrec._id, table)
                      ? 'favorite'
                      : 'far fa-heart'
                  "
                  @click="clicca(costanti.TIPOFAVBOOK.FAVORITE, true, '')"
                >
                </q-btn>
                <q-btn
                  class="q-mx-xxs q-my-xs"
                  rounded
                  :label="$t('reaction.condividi')"
                  text-color="blue"
                  color="white"
                  icon="fas fa-share"
                  @click="condividi()"
                >
                </q-btn>
                <q-btn
                  v-if="
                    (myrec.profile && myrec.profile.username_telegram) ||
                    myrec.contact_telegram
                  "
                  class="q-mx-xxs q-my-xs"
                  rounded
                  :label="$t('dialog.scrivi')"
                  text-color="primary"
                  color="white"
                  icon="telegram"
                  target="_blank"
                  @click="
                    tools.openUrl(
                      myrec.contact_telegram
                        ? tools.getHttpForTelegram(myrec.contact_telegram)
                        : tools.getHttpForTelegram(
                            myrec.profile.username_telegram
                          )
                    )
                  "
                />
                <q-btn
                  v-else-if="
                    myrec.profile &&
                    !myrec.profile.username_telegram &&
                    !myrec.contact_telegram
                  "
                  class="q-mx-xxs q-my-xs"
                  rounded
                  :label="$t('msgs.write_email')"
                  text-color="primary"
                  color="white"
                  icon="mail"
                  target="_blank"
                  @click="tools.openUrl(tools.getemailto(myrec.email))"
                />
                <q-btn
                  v-if="table === shared_consts.TABLES_MYBACHECAS"
                  class="q-mx-xxs q-my-xs"
                  rounded
                  :text-color="
                    calendarStore.isPartecipero(myrec._id, table)
                      ? 'white'
                      : 'primary'
                  "
                  :color="
                    calendarStore.isPartecipero(myrec._id, table)
                      ? 'green'
                      : 'white'
                  "
                  :label="$t('event.attend')"
                  :icon="
                    calendarStore.isPartecipero(myrec._id, table)
                      ? 'how_to_reg'
                      : 'check_circle'
                  "
                  @click="EditBookEvent(true)"
                >
                </q-btn>
                <q-btn
                  rounded
                  outline
                  class="q-ma-sm"
                  v-if="isAlreadyBooked() && site.confpages.bookingEvents"
                  text-color="red"
                  @click="EditBookEvent(true)"
                  :label="$t('cal.modifybooking')"
                >
                </q-btn>
              </div>
            </div>
            <div v-if="$q.screen.lt.sm" class="row justify-center q-my-xs">
              <q-btn
                rounded
                :label="$t('dialog.close')"
                color="primary"
                icon="close"
                v-close-popup
              />
            </div>
          </q-card-actions>
        </q-card>
      </div>

      <q-inner-loading
        :showing="loading"
        label="attendere..."
        label-class="text-teal"
        label-style="font-size: 1.1em"
      />
    </div>
  </div>
  <div v-else-if="ismounted && !myrec">
    <br /><br />
    <q-banner rounded class="q-ma-md q-pa-md bg-negative text-white">
      <div class="text-h6 text-center">
        Pagina non trovata<br />
        Probabilmente l'annuncio è stato cancellato
      </div>
    </q-banner>
    <br /><br />
  </div>

  <q-dialog v-model="usersList.loadfromDb">
    <q-card class="dialog_card">
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title>
          {{ usersList.title }}
        </q-toolbar-title>
        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
      </q-toolbar>

      <q-card-section class="inset-shadow">
        <div v-if="usersList.loadfromDb">
          <CGridTableUser
            prop_mytable="reactions"
            prop_mytitle=""
            :prop_mycolumns="colmyUserPeople"
            prop_colkey="_id"
            col_title="username"
            :vertical="costanti.VISUTABLE_LISTA"
            nodataLabel=" "
            :prop_search="false"
            :prop_showfilter="false"
            hint=""
            :finder="false"
            :choose_visutype="false"
            :finder_noNull="false"
            :finder_noNullFilters="false"
            :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
            :butt_modif_new="false"
            noresultLabel="Username o nome non trovato"
            :arrfilters="arrfilterand"
            :filtercustom="filtercustom"
            :prop_searchList="searchList"
            :showType="costanti.SHOW_USERINFO"
            :showCol="false"
            :extraparams="extraparams()"
          >
          </CGridTableUser>
        </div>
        <div v-else>
          <div v-for="(rec, i) in usersList.list" :key="i">
            <CMyUser
              :mycontact="rec"
              :visu="costanti.FIND_PEOPLE"
              @setCmd="tools.setCmd"
            >
            </CMyUser>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
  <q-dialog v-model="bookedList.show">
    <q-card v-if="bookedList" class="dialog_card">
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title>
          {{ bookedList.title }}
        </q-toolbar-title>
        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
      </q-toolbar>
      <q-card-section class="q-pa-xs inset-shadow">
        <div v-for="(eventbook, index) in bookedList.list" :key="index">
          <CMyUser
            :mycontact="{ username: eventbook.username }"
            :visu="costanti.FIND_PEOPLE"
            @setCmd="tools.setCmd"
          >
          </CMyUser>
          <div>
            {{ tools.getstrshortDateTime(eventbook.datebooked) }}
            <span v-if="eventbook.msgbooking">{{ $t("sendmsg.write") }}: </span>
            <q-separator />
          </div>

          {{ eventbook.msgbooking }}
          <div>
            <span v-if="eventbook.numpeople > 0"
              >Partecipanti: {{ eventbook.numpeople }}<br
            /></span>
            <span v-if="eventbook.numpeopleLunch > 0"
              >Pranzo: {{ eventbook.numpeopleLunch }}<br
            /></span>
            <span v-if="eventbook.numpeopleDinner > 0"
              >Cena: {{ eventbook.numpeopleDinner }}<br
            /></span>
            <span v-if="eventbook.numpeopleDinnerShared > 0"
              >C.Cond: {{ eventbook.numpeopleDinnerShared }}<br
            /></span>
          </div>
          <div>
            <div class="text-center">
              <q-btn
                v-if="myrec.userId === userStore.my._id"
                rounded
                color="red"
                label="Elimina"
                icon="fas fa-trash-alt"
                @click="
                  tools.CancelBookingEvent($q, myrec, eventbook._id, false)
                "
              ></q-btn>
            </div>
          </div>
        </div>
        <br />
        <div class="text-center">
          <q-btn
            outlined
            rounded
            :label="$t('dialog.close')"
            color="primary"
            icon="close"
            v-close-popup
          ></q-btn>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
  <q-dialog v-model="askInfopage.show" no-backdrop-dismiss>
    <q-card v-if="askInfopage.show" class="dialog_card">
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title>
          {{ $t("cal.booking") }}
        </q-toolbar-title>
        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
      </q-toolbar>

      <q-card-section class="inset-shadow">
        <div style="margin-top: 150px">
          <q-chip class="shadow-5 q-mb-md" dense>
            {{ myrec.descr }}
          </q-chip>
          <div v-if="myrec.dateTimeStart" class="cal__when">
            <span class="cal__where-title"
              >{{ $t("cal.when") }}:
              <span v-html="tools.getstrDateTimeEvent($t, myrec, true)"></span>
            </span>
          </div>
          <div class="q-pa-xs">
            <q-card class="text-white windowcol">
              <q-card-section>
                <q-input
                  v-model="askInfoForm.message"
                  :label="$t('cal.writemsg') + ':'"
                  autofocus
                  debounce="500"
                  type="textarea"
                  input-class="myinput-area"
                >
                </q-input>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn
          flat
          :label="$t('dialog.sendmsg')"
          color="primary"
          @click="sendMsg(true)"
        ></q-btn>
        <q-btn
          flat
          :label="$t('dialog.cancel')"
          color="primary"
          v-close-popup
        ></q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
  <q-dialog v-model="bookEventpage.show" no-backdrop-dismiss>
    <q-card v-if="bookEventpage.show" class="dialog_card">
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title>
          {{ $t("cal.booking") }}
        </q-toolbar-title>
        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
      </q-toolbar>

      <div class="q-pa-xs">
        <q-card class="windowcol" style="display: block">
          <q-card-section class="q-pa-xs">
            <div>{{ $t("cal.infoprenota") }}</div>
            <br />
            <div style="display: inline-flex" class="q-px-xs centermydiv">
              <q-checkbox
                style="color: black"
                v-model="bookEventForm.booked"
                :label="$t('cal.bookingtextdefault')"
                color="green"
              >
              </q-checkbox>

              <div
                v-if="bookEventForm.booked"
                class="q-gutter-xs q-mx-xs"
                style="min-width: 140px"
              >
                <q-select
                  v-if="table === shared_consts.TABLES_MYBACHECAS"
                  :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
                  rounded
                  style="max-width: 150px"
                  outlined
                  v-model="bookEventForm.numpeople"
                  :options="tools.SelectListNumPeople"
                  :label="$t('statusreg.reg')"
                  emit-value
                  map-options
                >
                </q-select>
              </div>
            </div>
            <q-input
              v-model="bookEventForm.msgbooking"
              :label="$t('cal.writemsg') + ':'"
              type="textarea"
              debounce="500"
              input-class="myinput-area"
            >
            </q-input>
          </q-card-section>
        </q-card>
      </div>

      <q-card-actions align="right">
        <q-btn
          v-if="bookEventpage.state === EState.Modifying"
          flat
          :label="$t('cal.cancelbooking')"
          color="negative"
          @click="CancelBookingEvent($q, bookEventForm._id, true)"
        ></q-btn>
        <q-btn
          v-if="checkseinviaMsg()"
          flat
          :label="$t('dialog.sendonlymsg')"
          color="primary"
          @click="sendMsg(false)"
        ></q-btn>
        <q-btn
          v-else-if="bookEventForm.booked"
          :label="getTitleBtnBooking()"
          color="primary"
          @click="saveBookEvent()"
          :disable="
            !(bookEventpage.state === EState.Creating || hasModifiedBooking)
          "
        ></q-btn>

        <q-btn
          flat
          :label="$t('dialog.cancel')"
          color="primary"
          v-close-popup
        ></q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

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

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

