<template>
  <div v-if="myrec && myrec._id" class="fulldiv">
    <div class="row items-start q-gutter-xs full-height fulldiv">
      <q-card class="my-card fulldiv visudialog padding-bott" bordered>
        <CGalleryImages
          v-if="myrec.photos.length > 0"
          :imgGallery="myrec.photos"
          :directory="'upload/' + 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 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-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: calendarStore.getNumParticipants(
                            myrec,
                            true,
                            tools.peopleWhere.participants
                          ),
                        })
                      )
                    "
                  >
                    <q-item-section avatar>
                      <q-icon color="green" name="fas fa-user-check" />
                    </q-item-section>
                    <q-item-section>
                      {{
                        $t('cmd.attend', {
                          num: calendarStore.getNumParticipants(
                            myrec,
                            true,
                            tools.peopleWhere.participants
                          ),
                        })
                      }}
                    </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="
                  calendarStore.getNumParticipants(
                    myrec,
                    true,
                    tools.peopleWhere.participants
                  )
                "
                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 />

        <q-list style="z-index: 5">
          <q-item>
            <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-section>
              <q-item-label v-if="myrec.typeHosp" class="text-bold text-h7">
                <q-chip dense color="green" text-color="white"
                  >{{ getTypeHosps() }}
                </q-chip>
              </q-item-label>

              <q-item-label class="text-bold 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>

          <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 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="
              table === 'mybachecas' && myrec.mygrp && myrec.mygrp.groupname
            "
            class="my-card clBorderUser"
            bordered
            @click="
              naviga(tools.getPathByGroup(myrec.mygrp, toolsext.TABMYGROUPS))
            "
          >
            <CMyGroup
              :mygrp="myrec.mygrp"
              :visu="costanti.USER_GROUPS"
              :noaut="true"
            >
            </CMyGroup>
          </q-card>
          <q-card
            v-else-if="!myrec.organisedBy"
            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="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">
                <a
                  :href="tools.getHttpForTelegram(myrec.contact_telegram)"
                  target="_blank"
                  >{{ $t('msgs.telegrammsg') }}: @{{ myrec.contact_telegram }}
                </a>
              </q-item-label>
            </q-item-section>
          </q-item>
          <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="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, 'Visita il Sito Web')
                  "
              /></q-item-label>
            </q-item-section>
          </q-item>
          <q-item
            clickable
            v-if="
              table === 'mybachecas' &&
              calendarStore.getNumParticipants(
                myrec,
                true,
                tools.peopleWhere.participants
              ) > 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" v-if="myrec.myattend">
                <q-btn
                  v-if="table === shared_consts.TABLES_MYBACHECAS"
                  rounded
                  color="primary"
                  :label="
                    $t('cmd.attend', {
                      num: calendarStore.getNumParticipants(
                        myrec,
                        true,
                        tools.peopleWhere.participants
                      ),
                    })
                  "
                  @click="
                    clicca(
                      costanti.TIPOFAVBOOK.ATTEND,
                      false,
                      $t('cmd.attend', {
                        num: calendarStore.getNumParticipants(
                          myrec,
                          true,
                          tools.peopleWhere.participants
                        ),
                      })
                    )
                  "
                >
                </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
                >
              </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>
        </q-list>
        <q-separator />
        <div class="q-mb-xl"></div>
        <div v-if="table === shared_consts.TABLES_MYBACHECAS" class="q-mb-sm">
          &nbsp;
        </div>
        <div class="row text-shadow q-px-xs"></div>
      </q-card>
      <div
        class="row absolute-bottom text-shadow custom-caption q-px-xs buttons_bottom"
      >
        <div class="column">
          <div class="row justify-evenly q-my-sm">
            <div class="row q-mx-sm">
              <q-btn
                dense
                class="q-mx-xxs"
                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"
                dense
                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"
                dense
                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-if="table === shared_consts.TABLES_MYBACHECAS"
                dense
                rounded
                :color="
                  calendarStore.isPartecipero(myrec._id, table)
                    ? 'green'
                    : 'grey'
                "
                :label="$t('event.attend')"
                :icon="
                  calendarStore.isPartecipero(myrec._id, table)
                    ? 'fas fa-user-check'
                    : 'far fa-check-circle'
                "
                @click="EditBookEvent(true)"
              >
              </q-btn>
              <q-btn
                dense
                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 class="row justify-center">
            <q-btn
              rounded
              outline
              :label="$t('dialog.close')"
              color="primary"
              icon="close"
              v-close-popup
            />
          </div>
        </div>
      </div>
      <q-inner-loading
        :showing="loading"
        label="attendere..."
        label-class="text-teal"
        label-style="font-size: 1.1em"
      />
    </div>
  </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>

