<template>
  <!--<CNotifAtTop />-->
  <div v-if="tools.isUserOk()" class="q-gutter-sm q-pa-sm q-pb-md">
    <div v-if="!circuit && !loading">
      <div v-if="mystatus === 403">
        <h3>
          Non hai i permessi per accedere al Circuito.
          <br />Occorre prima registrarsi ed accedere alla App
        </h3>
      </div>
      <div v-else-if="tools.isLogged() && path">
        <h3>Circuito non Esistente</h3>
      </div>
      <div v-else>
        <div v-if="!tools.isLogged()">
          <CCheckIfIsLogged></CCheckIfIsLogged>
        </div>
      </div>
    </div>
    <div v-else>
      <div v-if="!tools.isLogged()">
        <CCheckIfIsLogged></CCheckIfIsLogged>
      </div>
      <q-dialog v-model="showPic" full-height full-width>
        <img :src="getImgCircuit()" :alt="circuit.name" class="full-width" />
      </q-dialog>

      <q-dialog
        v-model="requestToEnterCircuit"
        maximized
        transition-show="slide-up"
        transition-hide="slide-down"
      >
        <q-card v-if="circuit" class="dialog_card">
          <q-toolbar class="bg-primary text-white" dense>
            <!--<q-toolbar :class="tools.displayClasses(myevent)"-->
            <!--:style="tools.displayStyles(myevent) + ` min-width: `+ tools.myheight_dialog() + `px;`">-->
            <q-toolbar-title>
              {{ circuit.name }}
              <div v-if="groupnameSel">
                Gruppo: {{ groupnameSel.groupname }}
              </div>
            </q-toolbar-title>
            <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
          </q-toolbar>
          <q-card-section v-if="circuit.symbol === 'RIS'" class="inset-shadow">
            <div v-html="t('circuit.disclaimer')"></div>
          </q-card-section>
          <q-card-section class="inset-shadow">
            <div style="font-weight: bold; font-size: 1.25rem">
              {{ t("circuit.regulation") }} {{ circuit.name }}
            </div>
            <q-btn
              v-if="!showrules"
              label="vedi Regolamento"
              @click="showrules = !showrules"
            ></q-btn>
            <br />
            <div
              v-if="showrules && circuit"
              v-html="getRegulation(circuit.regulation)"
            ></div>
          </q-card-section>
          <q-card-actions align="center">
            <q-btn
              class="centeritems"
              icon="fas fa-user-plus"
              color="positive"
              :label="$t('circuit.acceptregulation')"
              @click="
                requestToEnterCircuit = false;
                tools.setRequestCircuit(
                  $q,
                  userStore.my.username,
                  circuit.name,
                  true,
                  groupnameSel ? groupnameSel.groupname : ''
                );
              "
            />
            <q-btn
              outline
              :label="$t('dialog.cancel')"
              icon="close"
              v-close-popup
            ></q-btn>
          </q-card-actions>
        </q-card>
      </q-dialog>
      <div v-if="showsendCoinTo">
        <CSendCoins
          :showprop="showsendCoinTo"
          :circuitname="circuit.name"
          :to_contocom="circuit.path"
        ></CSendCoins>
      </div>
    </div>
    <div v-if="circuit">
      <div
        class="absolute-top-right q-mr-sm q-my-md"
        style="margin-top: 50px !important"
      >
        <div class="column">
          <q-btn
            v-if="userStore.IsMyCircuitByName(circuit.name)"
            flat
            round
            icon="fas fa-ellipsis-h"
            style="z-index: 1"
          >
            <q-menu>
              <q-list v-if="true" style="min-width: 150px">
                <q-item
                  clickable
                  v-close-popup
                  v-if="true"
                  @click="
                    saldo < 0
                      ? tools.showNegativeNotif(
                          $q,
                          t(
                            'circuit.per_uscire_dal_circuito_occorre_essere_a_zero',
                            { symbol: circuit.symbol }
                          ),
                          30000
                        )
                      : tools.removeFromMyCircuits(
                          $q,
                          userStore.my.username,
                          circuit.name,
                          '',
                          $t('circuit.domanda_exit_fromcircuit', {
                            circuitname: circuit.name,
                          })
                        )
                  "
                >
                  <q-item-section avatar>
                    <q-icon color="negative" name="fas fa-user-minus" />
                  </q-item-section>
                  <q-item-section>
                    {{ $t("circuit.exit_circuit") }}
                  </q-item-section>
                </q-item>

                <q-list v-if="userStore.isAdmin" style="min-width: 200px">
                  <q-item
                    clickable
                    v-close-popup
                    @click="
                      tools.setCmd(
                        $q,
                        shared_consts.CIRCUITCMD.DELETE,
                        userStore.my.username,
                        '',
                        circuit.name
                      )
                    "
                  >
                    <q-item-section avatar>
                      <q-icon color="negative" name="fas fa-trash-alt" />
                    </q-item-section>
                    <q-item-section>{{ $t("circuit.delete") }}</q-item-section>
                  </q-item>
                </q-list>
              </q-list>
            </q-menu>
          </q-btn>
          <q-btn
            flat
            round
            color="blue"
            icon="share"
            style="z-index: 1"
            @click.stop="tools.copyToClip($q, tools.getFullCurrentUrl(), true)"
          ></q-btn>
        </div>
      </div>

      <div style="align-self: center; vertical-align: middle">
        <q-btn
          to="/circuits"
          round
          icon="fas fa-arrow-circle-left"
          style="position: absolute"
        />
      </div>
      <div
        v-if="circuit.name"
        class="fit column no-wrap justify-evenly items-center content-start"
      >
        <div class="row justify-center">
          <q-avatar v-if="getImgCircuit()" size="50px">
            <q-img
              :src="getImgCircuit()"
              :alt="circuit.name"
              img-class="imgprofile"
              height="50px"
              @click="showPic = true"
            />
          </q-avatar>
          <div class="q-mx-xs text-h6" style="align-self: center">
            <span v-if="checkifShow('name')">{{ circuit.name }}</span>
          </div>
          <div class="row no-wrap justify-center items-center">
            <CSaldo
              v-if="account"
              :symbol="circuit.symbol"
              :account="account"
              :color="circuit.color"
              :saldo="saldo_pend"
              :qtarem="account ? qtarem : 0"
              :valueextra="saldo_pend != saldo ? `* ` : ''"
            ></CSaldo>
            <q-btn
              v-if="account && !loadSaldo"
              outline
              rounded
              dense
              color="green"
              style="height: 40px"
              icon="fas fa-redo"
              class="q-mx-sm"
              @click="aggiornaSaldo()"
            ></q-btn>
          </div>

          <q-dialog v-model="showMov" :maximized="$q.screen.lt.sm" permanent>
            <q-card class="dialog_card">
              <q-bar dense class="bg-primary text-white">
                {{ t("circuit.movements") }}:
                <q-space />
                <q-btn
                  flat
                  round
                  color="white"
                  icon="close"
                  v-close-popup
                ></q-btn>
              </q-bar>
              <q-card-section class="q-px-xs inset-shadow">
                <q-option-group
                  v-model="showwhommov"
                  :options="optionsmov"
                  color="primary"
                />
                <q-toggle
                  v-model="tabellare"
                  label="Formato Tabella"
                ></q-toggle>

                <CGridTableRec
                  v-if="tabellare && !loading"
                  prop_mytable="movements"
                  prop_mytitle
                  :prop_mycolumns="colmyMovementTable"
                  prop_colkey="_id"
                  col_title="Lista Movimenti"
                  :vertical="0"
                  nodataLabel="Nessun Movimento effettuato"
                  :prop_search="true"
                  :enableExport="true"
                  hint="nota da trovare (tabella)"
                  :finder="false"
                  :choose_visutype="false"
                  :finder_noNull="false"
                  :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                  :butt_modif_new="false"
                  noresultLabel="movimenti non trovati con questa ricerca"
                  :arrfilters="arrfilterand"
                  :filtercustom="filtercustom_rich"
                  filterextra
                  :filterextra2="filterextra2"
                  :prop_searchList="searchList"
                  :prop_pagination="{
                    sortBy: 'transactionDate',
                    descending: true,
                    page: 1,
                    rowsNumber: 0,
                    rowsPerPage: 20,
                  }"
                  :showType="costanti.SHOW_MOVEMENTS"
                  :showCol="true"
                  :showHeaderCol="true"
                  :extraparams="extraparams_movs()"
                  extrafield
                  :visufind="costanti.FRIENDS"
                ></CGridTableRec>
                <CGridTableRec
                  v-else-if="!loading"
                  prop_mytable="movements"
                  prop_mytitle
                  :prop_mycolumns="colmyMovement"
                  prop_colkey="_id"
                  col_title="Lista Movimenti"
                  :vertical="costanti.VISUTABLE_LISTA"
                  nodataLabel="Nessun Movimento effettuato"
                  :enableExport="true"
                  :prop_search="true"
                  hint="nota da trovare"
                  :finder="false"
                  :choose_visutype="false"
                  :finder_noNull="false"
                  :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                  :butt_modif_new="false"
                  noresultLabel="movimenti non trovati con questa ricerca"
                  :arrfilters="arrfilterand"
                  :filtercustom="filtercustom_rich"
                  :prop_searchList="searchList"
                  :prop_pagination="{
                    sortBy: 'transactionDate',
                    descending: true,
                    page: 1,
                    rowsNumber: 20,
                    rowsPerPage: 20,
                  }"
                  :showType="costanti.SHOW_MOVEMENTS"
                  :showCol="false"
                  :showHeaderCol="false"
                  :extraparams="extraparams_movs()"
                  extrafield
                  :visufind="costanti.FRIENDS"
                ></CGridTableRec>
              </q-card-section>
            </q-card>
          </q-dialog>
        </div>
        <div class="text-center">
          <q-spinner
            v-if="loadSaldo"
            color="primary"
            size="3em"
            :thickness="2"
          />
        </div>

        <div class="q-ma-sm text-center">
          <q-btn
            v-if="userStore.IsMyCircuitByName(circuit.name)"
            :label="t('circuit.movements_made')"
            @click="showMov = !showMov"
            :icon="
              tools.getSymbolByCircuit(circuit) === 'RIS'
                ? 'img: /images/1ris_rosso_100.png'
                : undefined
            "
            rounded
            color="primary"
          ></q-btn>
        </div>

        <q-banner
          v-if="userStore.IsRefusedCircuitByName(circuit.name)"
          rounded
          class="bg-red text-white"
          style="text-align: center"
        >
          <em style="font-weight: bold">{{ $t("db.youarerefusedcircuit") }}</em>
          <br />
        </q-banner>

        <br />

        <div class="column text-center">
          <q-banner
            v-if="
              circuitStore.isCircuitNational(circuit.name) &&
              !circuitStore.SonoDentroAdAlmeno1CircuitoConFido()
            "
            inline-actions
            class="bg-blue text-white"
          >
            <template v-slot:avatar>
              <q-icon name="fas fa-info" color="red" size="sm" />
            </template>
            <span
              v-html="$t('circuit.entra_italia_solo_dopo_aver_fido')"
            ></span>
          </q-banner>
          <q-banner
            v-if="circuitStore.IsNationalAndNotEnterInLocal(circuit.name)"
            rounded
            class="bg-red text-white"
            style="text-align: center"
          >
            <template v-slot:avatar>
              <q-icon
                class="vertical-align center"
                name="fas fa-info"
                color="white"
                size="sm"
              />
            </template>

            <em style="font-weight: bold">
              {{ $t("circuit.beforeentertolocalcircuit") }}
            </em>
            <br />
          </q-banner>
          <q-banner
            v-if="
              false &&
              userStore.my.profile &&
              userStore.my.profile.calc &&
              !circuit.circuitoIndipendente &&
              userStore.my.profile.calc.numGoodsAndServices <= 0 &&
              globalStore.site.confpages?.showRIS &&
              userStore.IsMyCircuitByName(circuit.name)
            "
            rounded
            class="bg-deep-purple text-white"
            style="text-align: center"
          >
            <template v-slot:avatar>
              <q-icon name="fas fa-info" color="white" size="sm" />
            </template>

            <em style="font-weight: bold">
              {{ $t("db.insertgoodorservices_to_enter_circuit") }}
            </em>
            <br />
          </q-banner>
          <q-banner
            v-else-if="
              globalStore.site.confpages?.showRIS &&
              !circuit.circuitoIndipendente &&
              userStore.my.profile.calc &&
              userStore.my.profile.calc.numGoodsAndServices <= 0 &&
              false
            "
            rounded
            class="bg-deep-purple text-white"
            style="text-align: center"
          >
            <template v-slot:avatar>
              <q-icon
                class="vertical-align center"
                name="fas fa-info"
                color="red"
                size="sm"
              />
            </template>

            <em style="font-weight: bold">
              {{ $t("db.insertgoodorservices_to_enter_circuit") }}
            </em>
            <br />
          </q-banner>

          <div class="centermydiv">
            <q-btn
              class="q-mt-md"
              v-if="
                !userStore.IsMyCircuitByName(circuit.name) &&
                !userStore.IsAskedCircuitByName(circuit.name) &&
                !userStore.IsRefusedCircuitByName(circuit.name) &&
                (circuit.circuitoIndipendente ||
                  !circuitStore.isCircuitNational(circuit.name) ||
                  (circuitStore.isCircuitNational(circuit.name) &&
                    circuitStore.SonoDentroAdAlmeno1CircuitoConFido()))
              "
              :disable="
                !circuit.circuitoIndipendente &&
                circuitStore.IsNationalAndNotEnterInLocal(circuit.name)
              "
              icon="fas fa-user-plus"
              color="primary"
              :label="
                circuit.askManagerToEnter
                  ? $t('circuit.ask')
                  : $t('circuit.enter')
              "
              @click="
                requestToEnterCircuit = true;
                groupnameSel = null;
              "
            />

            <q-btn
              v-if="
                userStore.IsAskedCircuitByName(circuit.name) &&
                !userStore.IsMyCircuitByName(circuit.name)
              "
              icon="fas fa-user-minus"
              flat
              outline
              :label="$t('shared.cancel_ask_short')"
              @click="
                tools.cancelReqCircuit($q, userStore.my.username, circuit.name)
              "
            />
          </div>
        </div>
      </div>
      <div
        v-if="circuit.name"
        class="no-wrap justify-evenly items-center content-start"
      >
        <q-tabs v-model="tabcircuit" class="text-blue" no-caps>
          <q-tab
            :label="t('shared.info1')"
            name="info"
            icon="fas fa-info"
          ></q-tab>
          <q-tab
            v-if="
              tools.iCanShowCircuitsMember(circuit) ||
              tools.iAmAdminCircuit(circuit.name)
            "
            :label="t('shared.subscribes')"
            name="members"
            icon="fas fa-user-friends"
          ></q-tab>
          <q-tab
            v-if="costanti.ENABLE_CONTI_COLLETTIVI"
            :label="t('circuit.conticollettivi')"
            name="gruppicollettivi"
            icon="fas fa-users"
          ></q-tab>
          <q-tab
            :label="t('profile.annunci')"
            name="annunci"
            icon="fas fa-pencil-alt"
          ></q-tab>
          <q-tab
            :label="t('circuit.comunitario')"
            name="comunitario"
            icon="fas fa-campground"
          ></q-tab>
          <q-tab
            v-if="!!circuit.note"
            :label="t('circuit.page')"
            name="page"
            icon="fas fa-file-word"
          ></q-tab>
        </q-tabs>

        <q-tab-panels v-model="tabcircuit" animated keep-alive>
          <q-tab-panel name="annunci" style="max-width: 500px"> </q-tab-panel>
          <q-tab-panel
            name="gruppicollettivi"
            style="max-width: 500px"
            v-if="tools.iCanShowCircuitsMember(circuit)"
          >
            <div class="text-h7">{{ t("circuit.contideigruppi") }}:</div>
            <div class="text-h8 q-mb-sm">
              <div v-html="$t('circuit.collettivi_info')"></div>
            </div>
            <q-tabs
              v-show="tools.iAmAdminCircuit(circuit.name)"
              v-model="tabmembers"
              class="text-blue"
            >
              <q-tab label="Iscritti" name="all" icon="fas fa-users"></q-tab>
              <q-tab
                v-if="tools.iAmAdminCircuit(circuit.name)"
                label="Richieste"
                name="rich"
                icon="fas fa-user-plus"
              ></q-tab>
              <q-tab
                v-if="tools.iAmAdminCircuit(circuit.name)"
                label="Rifiutati"
                name="refused"
                icon="fas fa-user-minus"
                outline
              ></q-tab>
            </q-tabs>

            <q-tab-panels v-model="tabmembers" animated keep-alive>
              <q-tab-panel name="all">
                <div class="row justify-center">
                  <q-btn rounded icon="fas fa-user-plus" class="text-center">
                    <q-menu>
                      <q-item>Chiedi di Entrare nei Circuiti:</q-item>
                      <q-list
                        v-for="(group, ind) of groupsListAdmin"
                        :key="ind"
                        class="q-pa-sm"
                      >
                        <q-item
                          v-if="
                            !userStore.IsMyCircuitByNameAndGroup(
                              circuit.name,
                              group.groupname
                            )
                          "
                        >
                          <q-item-section>
                            <q-btn
                              v-if="
                                userStore.IsMyCircuitByName(circuit.name) &&
                                group.groupname &&
                                !circuitStore.IsAskedCircuitByNameAndGroup(
                                  circuit.name,
                                  group.groupname
                                ) &&
                                !userStore.IsMyCircuitByNameAndGroup(
                                  circuit.name,
                                  group.groupname
                                )
                              "
                              icon="fas fa-user-plus"
                              color="primary"
                              :label="group.groupname"
                              @click="
                                requestToEnterCircuit = true;
                                groupnameSel = group;
                              "
                            />
                            <q-btn
                              v-else-if="
                                group.groupname &&
                                circuitStore.IsAskedCircuitByNameAndGroup(
                                  circuit.name,
                                  group.groupname
                                ) &&
                                !userStore.IsMyCircuitByNameAndGroup(
                                  circuit.name,
                                  group.groupname
                                )
                              "
                              icon="fas fa-user-minus"
                              flat
                              outline
                              :label="$t('shared.cancel_ask_short')"
                              @click="
                                tools.cancelReqCircuit(
                                  $q,
                                  userStore.my.username,
                                  circuit.name,
                                  group.groupname
                                )
                              "
                            />
                          </q-item-section>
                        </q-item>
                      </q-list>

                      <q-list>
                        <q-item
                          clickable
                          v-close-popup
                          @click="
                            tools.setCmd(
                              $q,
                              shared_consts.GROUPSCMD.REQGROUP,
                              myusername(),
                              true,
                              grp.groupname
                            )
                          "
                        ></q-item>
                      </q-list>
                    </q-menu>
                  </q-btn>
                </div>

                <CTitleSec :title="$t('circuit.listaconticollettivi')" />

                <CGridTableRec
                  v-if="!loading"
                  ref="tabGroups"
                  prop_mytable="mygroups"
                  prop_mytitle
                  :prop_mycolumns="
                    showsaldi ? colmyUserPeopleSaldi : colmyUserPeople
                  "
                  prop_colkey="_id"
                  col_title="groupname"
                  :vertical="costanti.VISUTABLE_GROUP_CIRCUIT"
                  nodataLabel="Nessun Gruppo Comunitario"
                  :prop_search="true"
                  hint="gruppo da trovare"
                  :finder="true"
                  :choose_visutype="false"
                  :finder_noNull="false"
                  :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                  :butt_modif_new="false"
                  noresultLabel="gruppo non trovato"
                  :arrfilters="arrfilterand"
                  :filtercustom="filtercustom"
                  :filterextra="filterextra_group"
                  :filterextra2="filterextra2"
                  :prop_searchList="searchList"
                  :showType="costanti.SHOW_GROUPINFO"
                  :showCol="false"
                  :circuitname="circuit.name"
                  extraparams
                  :visufind="
                    tools.iAmAdminCircuit(circuit.name)
                      ? costanti.REQ_ADD_USER_TO_CIRCUIT
                      : costanti.FIND_GROUP
                  "
                ></CGridTableRec>
              </q-tab-panel>
              <q-tab-panel name="rich">
                {{ $t("circuit.richieste_title") }}
                <CGridTableRec
                  v-if="!loading"
                  prop_mytable="circuits"
                  prop_mytitle
                  :prop_mycolumns="colmyUserGroup"
                  prop_colkey="_id"
                  col_title
                  :vertical="costanti.VISUTABLE_GROUP_CIRCUIT"
                  nodataLabel="Nessuna Richiesta Collettiva in sospeso"
                  :prop_search="false"
                  hint="Username o nome da trovare"
                  :finder="false"
                  :choose_visutype="false"
                  :finder_noNull="false"
                  :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                  :butt_modif_new="false"
                  noresultLabel="Gruppo non trovato"
                  :arrfilters="arrfilterand"
                  :filterextra2="filterextra2"
                  :filtercustom="filtercustom_rich"
                  :prop_searchList="searchList"
                  :showType="costanti.SHOW_GROUPINFO"
                  :showCol="false"
                  :extraparams="extraparams_rich_groups()"
                  :circuitname="circuit.name"
                  :visufind="costanti.REQ_ADD_GROUP_TO_CIRCUIT"
                ></CGridTableRec>
              </q-tab-panel>
              <q-tab-panel name="refused">
                <CGridTableRec
                  v-if="!loading"
                  prop_mytable="circuits"
                  prop_mytitle
                  :prop_mycolumns="colmyUserGroup"
                  prop_colkey="_id"
                  col_title
                  :vertical="costanti.VISUTABLE_GROUP_CIRCUIT"
                  nodataLabel="Nessun Conto di Gruppo Rifiutato"
                  :prop_search="false"
                  hint="Gruppo da trovare"
                  :finder="false"
                  :choose_visutype="false"
                  :finder_noNull="false"
                  :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                  :butt_modif_new="false"
                  noresultLabel="Conto di Gruppo non trovato"
                  :arrfilters="arrfilterand"
                  :filtercustom="filtercustom_rich"
                  :filterextra2="filterextra2"
                  :prop_searchList="searchList"
                  :showType="costanti.SHOW_GROUPINFO"
                  :showCol="false"
                  :extraparams="extraparams_refused_groups()"
                  :circuitname="circuit.name"
                  :visufind="costanti.REQ_ADD_GROUP_TO_CIRCUIT"
                ></CGridTableRec>
              </q-tab-panel>
            </q-tab-panels>
          </q-tab-panel>
          <q-tab-panel name="info">
            <div>
              <q-card>
                <q-card-section>
                  <div class="text-h7">{{ t("circuit.info") }}</div>
                </q-card-section>

                <q-separator />

                <q-card-section>
                  <div
                    v-if="tools.getSymbolByCircuit(circuit) === 'RIS'"
                    class="text-h8 q-mb-sm"
                  >
                    <div v-html="$t('circuit.aggiuntive')"></div>
                  </div>
                  <q-card-section>
                    <div class="text-h7">{{ t("circuit.descr") }}:</div>
                  </q-card-section>
                  <q-separator />

                  <q-card-section>
                    <div class="col-12 text-h8">
                      <span
                        v-if="checkifShow('descr')"
                        v-html="circuit.longdescr"
                      ></span>
                    </div>
                  </q-card-section>

                  <div class="container">
                    <q-icon name="fas fa-users" class="iconcirc"></q-icon>
                    <span class="element">{{ numUsers() }}</span>
                    {{
                      numUsers() === 1
                        ? t("shared.member")
                        : t("shared.members")
                    }}
                  </div>
                  <div class="container" v-if="circuit.link_group">
                    <q-icon name="fab fa-telegram" class="iconcirc"></q-icon>
                    <span class="element">
                      {{
                        $t("circuit.chat_gruppo_telegram_circuito", {
                          name: circuit.name,
                        })
                      }}:
                      <div class="row justify-center">
                        <q-icon
                          name="fas fa-hand-point-right"
                          class="iconcirc"
                          size="lg"
                        ></q-icon>

                        <q-btn
                          v-if="circuit.link_group"
                          icon="fab fa-telegram"
                          color="blue"
                          type="a"
                          size="md"
                          rounded
                          :label="
                            $t('circuit.link_chat', {
                              name: tools.replaceStringCaseInsensitive(
                                tools.replaceStringCaseInsensitive(
                                  circuit.name,
                                  'circuito',
                                  ''
                                ),
                                'RIS',
                                'RISO'
                              ),
                            })
                          "
                          :href="circuit.link_group"
                          target="__blank"
                        ></q-btn>
                      </div>
                    </span>
                  </div>
                  <div class="container">
                    <q-icon name="fas fa-user-cog" class="iconcirc"></q-icon>
                    <span class="element">{{ numAdmins() }}</span>
                    {{
                      numAdmins() === 1 ? t("shared.admin") : t("shared.admins")
                    }}
                  </div>
                  <div v-for="(user, index) of circuit.admins" :key="index">
                    <CMyUser
                      :mycontact="user"
                      :visu="costanti.FIND_PEOPLE"
                      @setCmd="tools.setCmd"
                    ></CMyUser>
                  </div>
                  <div class="sezioni">
                    <q-icon name="fas fa-coins" class="iconcirc"></q-icon>
                    {{ t("circuit.symbol") }}:
                    <span class="text-h7">
                      <em
                        class="q-px-sm text-black rounded-borders"
                        :style="
                          `background-color: ` +
                          tools.getColorByCircuit(circuit)
                        "
                        >{{ tools.getSymbolByCircuit(circuit) }}</em
                      >
                    </span>
                  </div>
                  <div :class="$q.screen.lt.sm ? '' : 'row'">
                    <div class="sezioni">
                      <CCurrencyValue
                        v-if="!circuit.ignoreLimits"
                        :symbol="tools.getSymbolByCircuit(circuit)"
                        :color="tools.getColorByCircuit(circuit)"
                        color_border="red"
                        v-model="fidoConcesso"
                        icon="fas fa-battery-quarter"
                        :label="t('circuit.fido_scoperto_default')"
                        :tips="t('circuit.fido_scoperto_default_tips')"
                      ></CCurrencyValue>
                    </div>
                    <div class="sezioni">
                      <CCurrencyValue
                        v-if="!circuit.ignoreLimits"
                        :symbol="tools.getSymbolByCircuit(circuit)"
                        :color="tools.getColorByCircuit(circuit)"
                        color_border="green"
                        v-model="qtaMax"
                        icon="fas fa-battery-quarter"
                        :label="t('circuit.qta_max_default')"
                        :tips="t('circuit.qta_max_default_tips')"
                      ></CCurrencyValue>
                      <CCurrencyValue
                        v-if="circuit.creditodiPartenza > 0"
                        :symbol="tools.getSymbolByCircuit(circuit)"
                        :color="tools.getColorByCircuit(circuit)"
                        color_border="blue"
                        v-model="circuit.creditodiPartenza"
                        icon="fas fa-battery-quarter"
                        :label="t('circuit.creditodiPartenza')"
                        :tips="t('circuit.creditodiPartenza_tips')"
                      ></CCurrencyValue>
                    </div>
                    <!--<div v-if="circuit.qta_max_default_grp" class="sezioni">
                        <CCurrencyValue
                          :symbol="tools.getSymbolByCircuit(circuit)"
                          :color="tools.getColorByCircuit(circuit)"
                          color_border="red"
                          v-model="circuit.fido_scoperto_default_grp"
                          icon="fas fa-battery-quarter"
                          :label="t('circuit.fido_scoperto_default_grp')"
                          :tips="t('circuit.fido_scoperto_default_tips_grp')"
                        >
                        </CCurrencyValue>
                      </div>
                      <div class="sezioni">
                        <CCurrencyValue
                          :symbol="tools.getSymbolByCircuit(circuit)"
                          :color="tools.getColorByCircuit(circuit)"
                          color_border="green"
                          v-model="circuit.qta_max_default_grp"
                          icon="fas fa-battery-quarter"
                          :label="t('circuit.qta_max_default_grp')"
                          :tips="t('circuit.qta_max_default_tips_grp')"
                        >
                        </CCurrencyValue>
                      </div>
                    -->
                  </div>
                  <div v-if="circuit.totTransato" class="sezioni">
                    <q-icon name="fas fa-stats" class="iconcirc"></q-icon>
                    {{ t("circuit.stats") }}:
                    <br />
                  </div>
                  <div :class="$q.screen.lt.sm ? '' : 'row'">
                    <div v-if="circuit.totTransato" class="sezioni">
                      <CCurrencyValue
                        :symbol="tools.getSymbolByCircuit(circuit)"
                        :color="tools.getColorByCircuit(circuit)"
                        color_border="blue"
                        v-model="circuit.totTransato"
                        icon="fas fa-battery-quarter"
                        :label="t('circuit.totTransato')"
                        :tips="t('circuit.totTransato_tips')"
                      ></CCurrencyValue>
                    </div>
                    <div v-if="circuit.totCircolante" class="sezioni">
                      <CCurrencyValue
                        :symbol="tools.getSymbolByCircuit(circuit)"
                        :color="tools.getColorByCircuit(circuit)"
                        color_border="blue"
                        v-model="circuit.totCircolante"
                        icon="fas fa-battery-quarter"
                        :label="t('circuit.totCircolante')"
                        :tips="t('circuit.totCircolante_tips')"
                      ></CCurrencyValue>
                    </div>
                  </div>
                  <div class="sezioni">
                    <q-icon name="fas fa-toggle-on" class="iconcirc"></q-icon>
                    {{ t("circuit.transactionsEnabled") }}:
                    <span class="text-section">
                      {{
                        circuit.transactionsEnabled
                          ? t("dialog.yes")
                          : t("dialog.no")
                      }}
                      {{}}
                    </span>
                  </div>
                  <!--<div
                      class="sezioni"
                      v-if="circuit.deperimento !== undefined"
                    >
                      <q-icon
                        name="fas fa-battery-full"
                        class="iconcirc"
                      ></q-icon>
                      {{ t('circuit.deperimento') }}:
                      <span class="text-section"
                        >{{
                          circuit.deperimento ? t('dialog.yes') : t('dialog.no')
                        }}
                        {{
                      }}</span>
                  </div>-->
                </q-card-section>
              </q-card>

              <br />
            </div>

            <q-card v-if="circuit.name">
              <q-card-section>
                <div class="text-h8">
                  {{ t("circuit.regulation") }} {{ circuit.name }}:
                </div>
              </q-card-section>
              <q-separator />

              <q-card-section>
                <div class="centermydiv">
                  <q-btn
                    v-if="!showrules"
                    label="vedi Regolamento"
                    @click="showrules = !showrules"
                  ></q-btn>
                </div>
                <div class="col-12 text-h8">
                  <span
                    v-if="checkifShow('descr') && showrules && circuit"
                    v-html="getRegulation(circuit.regulation)"
                  ></span>
                </div>
              </q-card-section>
              <div v-if="circuit.createdBy" class="container text-h8">
                <q-icon name="fas fa-lightbulb" class="iconcirc"></q-icon>
                {{
                  $t("shared.createddate", {
                    date: tools.getstrDateYY(circuit.date_created),
                  })
                }}
              </div>
              <div
                v-if="
                  !!circuit.date_updated &&
                  tools.getstrDate(circuit.date_updated) !==
                    tools.getstrDate(circuit.date_created)
                "
                class="container text-h8"
              >
                <q-icon name="fas fa-pencil-alt" class="iconcirc"></q-icon>
                <span class="element text-h8">
                  {{
                    $t("shared.lastmodify", {
                      date: tools.getstrDateYY(circuit.date_updated),
                    })
                  }}
                </span>
                <br />
              </div>
              <br />
            </q-card>
          </q-tab-panel>

          <q-tab-panel name="page">
            <div v-if="circuit.note">
              <br />
              <div class="q-ma-sm q-gutter-sm q-pa-xs">
                <div v-if="circuit.note" v-html="circuit.note"></div>
              </div>
            </div>
          </q-tab-panel>

          <q-tab-panel
            name="members"
            v-if="tools.iCanShowCircuitsMember(circuit)"
          >
            <q-tabs
              v-show="tools.iAmAdminCircuit(circuit.name)"
              v-model="tabmembers"
              class="text-blue"
            >
              <q-tab label="Iscritti" name="all" icon="fas fa-users"></q-tab>
              <q-tab
                v-if="tools.iAmAdminCircuit(circuit.name)"
                label="Richieste"
                name="rich"
                icon="fas fa-user-plus"
              ></q-tab>
              <q-tab
                v-if="tools.iAmAdminCircuit(circuit.name)"
                label="Rifiutati"
                name="refused"
                icon="fas fa-user-minus"
                outline
              ></q-tab>
            </q-tabs>

            <q-tab-panels v-model="tabmembers" keep-alive>
              <q-tab-panel name="all">
                <!--<q-toggle v-model="showsaldi" :label="t('movement.showsaldi')"></q-toggle>-->
              </q-tab-panel>
              <q-tab-panel name="rich">
                <CGridTableRec
                  v-if="!loading"
                  prop_mytable="circuits"
                  prop_mytitle
                  :prop_mycolumns="colmyUserPeople"
                  prop_colkey="_id"
                  col_title
                  :vertical="costanti.VISUTABLE_USER_TABCIRCUIT"
                  nodataLabel="Nessuna Richiesta in sospeso"
                  :prop_search="false"
                  hint="Username o nome da trovare"
                  :finder="false"
                  :choose_visutype="false"
                  :finder_noNull="false"
                  :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                  :butt_modif_new="false"
                  noresultLabel="Username non trovato"
                  :arrfilters="arrfilterand"
                  :filterextra2="filterextra2"
                  :filtercustom="filtercustom_rich"
                  :prop_searchList="searchList"
                  :showType="costanti.SHOW_USERINFO"
                  :showCol="false"
                  :extraparams="extraparams_rich()"
                  :circuitname="circuit.name"
                  :visufind="costanti.REQ_ADD_USER_TO_CIRCUIT"
                ></CGridTableRec>
              </q-tab-panel>
              <q-tab-panel name="refused">
                <CGridTableRec
                  v-if="!loading"
                  prop_mytable="circuits"
                  prop_mytitle
                  :prop_mycolumns="colmyUserPeople"
                  prop_colkey="_id"
                  col_title
                  :vertical="costanti.VISUTABLE_USER_TABCIRCUIT"
                  nodataLabel="Nessun utente Rifiutato"
                  :prop_search="false"
                  hint="Username o nome da trovare"
                  :finder="false"
                  :choose_visutype="false"
                  :finder_noNull="false"
                  :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
                  :butt_modif_new="false"
                  noresultLabel="Username non trovato"
                  :arrfilters="arrfilterand"
                  :filtercustom="filtercustom_rich"
                  :filterextra2="filterextra2"
                  :prop_searchList="searchList"
                  :showType="costanti.SHOW_USERINFO"
                  :showCol="false"
                  :extraparams="extraparams_refused()"
                  :circuitname="circuit.name"
                  :visufind="costanti.REQ_ADD_USER_TO_CIRCUIT"
                ></CGridTableRec>
              </q-tab-panel>
            </q-tab-panels>
          </q-tab-panel>
          <q-tab-panel name="comunitario">
            <q-card v-if="circuit.name">
              <q-card-section>
                <div class="text-h7">{{ t("circuit.contocomunitario") }}:</div>
                <div class="text-h8 q-mb-sm">
                  {{ $t("circuit.info_contocom") }}
                </div>
              </q-card-section>
              <q-separator />

              <q-card-section>
                <div class="col-12 text-h8 text-center">
                  <span v-if="checkifShow('descr')">
                    <CSaldo
                      v-if="tools.isUserOk() && circuit.account"
                      :account="circuit.account"
                      :symbol="circuit.symbol"
                      :color="circuit.color"
                      :saldo="circuit.account.saldo_pend"
                      :valueextra="
                        circuit.account.saldo != circuit.account.saldo_pend
                          ? `* `
                          : ''
                      "
                      :qtarem="
                        circuit.account
                          ? circuitStore.getRemainingCoinsToSend(
                              circuit.account
                            )
                          : 0
                      "
                    ></CSaldo>
                  </span>
                  <div class>
                    <q-btn
                      icon="fas fa-coins"
                      color="green"
                      size="md"
                      rounded
                      :label="$t('circuit.sendcoins_tocom')"
                      @click="showsendCoinTo = true"
                    ></q-btn>
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </q-tab-panel>
        </q-tab-panels>
        <div>
          <CGridTableRec
            v-if="!loading && tabmembers === 'all' && tabcircuit === 'members'"
            prop_mytable="users"
            prop_mytitle
            :prop_mycolumns="showsaldi ? colmyUserPeopleSaldi : colmyUserPeople"
            prop_colkey="_id"
            col_title="username"
            :vertical="costanti.VISUTABLE_LISTA"
            nodataLabel="Nessun Iscritto"
            :prop_search="true"
            hint="Username o nome da trovare"
            :finder="true"
            :choose_visutype="false"
            :finder_noNull="false"
            :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
            :butt_modif_new="false"
            noresultLabel="Username non trovato"
            :arrfilters="arrfilterand"
            :filtercustom="filtercustom"
            :filterextra="filterextra"
            :filterextra2="filterextra2"
            :prop_searchList="searchList"
            :showType="costanti.SHOW_USERINFO"
            :prop_pagination="userStore.getMypaginationMembers()"
            :prop_SortFieldsAvailable="userStore.getSortFieldsAvailable()"
            :showCol="false"
            :labelElemFind="$t('circuit.iscritti')"
            :circuitname="circuit.name"
            :extraparams="extraparams()"
            :visufind="
              tools.iAmAdminCircuit(circuit.name)
                ? costanti.REQ_ADD_USER_TO_CIRCUIT
                : costanti.FIND_PEOPLE
            "
          ></CGridTableRec>

          <div v-if="tabcircuit === 'annunci'">
            <q-select
              v-model="card"
              map-options
              option-label="title"
              filled
              icon="fas fa-pencil-alt"
              label="Tipo di Annuncio"
              :options="mycards_annunci"
            ></q-select>
            <q-card class="q-my-md">
              <div v-if="card">
                <div class="row text-h6 text-bold">{{ card.title }}</div>

                <div
                  v-for="(cardrec, ind) of mycards_annunci"
                  :key="ind"
                  :name="cardrec.table"
                >
                  <CFinder
                    v-show="cardrec.table === card.table"
                    :ind="tools.getIndMainCardsByTable(cardrec.table)"
                    :table="cardrec.table"
                    :filtrocircuito="circuit.name"
                    :showBarSelection="false"
                    :noButtAdd="true"
                  />
                </div>
              </div>
            </q-card>
          </div>
        </div>
      </div>
      <div
        v-else
        class="fit column no-wrap justify-evenly items-center content-start"
      >
        <q-skeleton
          type="QAvatar"
          size="140px"
          height="140px"
          animation="fade"
        />
        <q-card flat bordered style="width: 250px">
          <div class="text-h7">
            <q-skeleton :animation="animation" />
          </div>
          <div class="col-12 text-h8 text-grey text-center">{{ path }}</div>
          <div class="col-12 text-h8">
            <q-skeleton :animation="animation" />
          </div>

          <div class="col-12 text-h8 q-mt-sm">
            <q-skeleton :animation="animation" />
          </div>
          <div class="col-12 text-h8 q-mt-sm">
            <q-skeleton :animation="animation" />
          </div>
        </q-card>
      </div>
    </div>
  </div>
  <div v-else>
    <CUserNonVerif></CUserNonVerif>
  </div>
</template>

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

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

