<template>
  <CNotifAtTop />
  <div 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>
      <div v-if="circuit">
        <div style="align-self: center; vertical-align: middle">
          <q-btn
            label="Lista Circuiti"
            to="/circuits"
            rounded
            icon="fas fa-arrow-circle-left"
          />
        </div>
        <div
          v-if="circuit.name"
          class="fit column no-wrap justify-evenly items-center content-start"
        >
          <div class="row justify-center">
            <q-avatar size="70px">
              <q-img
                :src="getImgCircuit()"
                :alt="circuit.name"
                img-class="imgprofile"
                height="70px"
                @click="showPic = true"
              />
            </q-avatar>
            <div class="q-mx-sm text-h6" style="align-self: center">
              <span v-if="checkifShow('name')"> {{ circuit.name }}</span>
            </div>
            <div>
              <CSaldo
                :symbol="circuit.symbol"
                :account="account"
                :color="circuit.color"
                :saldo="saldo"
                :qtarem="account ? qtarem : 0"
              >
              </CSaldo>
            </div>
          </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="row text-center">
            <q-banner
              v-if="
                userStore.my.profile &&
                userStore.my.profile.calc.numGoodsAndServices <= 0 &&
                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="red" size="sm" />
              </template>

              <em style="font-weight: bold">{{
                $t('db.insertgoodorservices_to_enter_circuit')
              }}</em
              ><br />
            </q-banner>
            <q-banner
              v-else-if="userStore.my.profile.calc.numGoodsAndServices <= 0"
              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-mt-md">
              <q-btn
                v-if="
                  !userStore.IsMyCircuitByName(circuit.name) &&
                  !userStore.IsAskedCircuitByName(circuit.name) &&
                  !userStore.IsRefusedCircuitByName(circuit.name)
                "
                icon="fas fa-user-plus"
                color="primary"
                :label="$t('circuit.ask')"
                @click="
                  requestToEnterCircuit = true;
                  groupnameSel = null;
                "
              />
              <q-btn
                v-if="userStore.IsMyCircuitByName(circuit.name)"
                rounded
                icon="fas fa-ellipsis-h"
              >
                <q-menu>
                  <q-list v-if="true" style="min-width: 150px">
                    <q-item
                      clickable
                      v-close-popup
                      v-if="saldo === 0"
                      @click="
                        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="tools.iAmAdminCircuit(circuit.name)"
                      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
                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"
              @click="loadCircuit()"
            ></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
              v-if="userStore.IsMyCircuitByName(circuit.name)"
              :label="t('circuit.movements')"
              name="mov"
              icon="fas fa-coins"
            ></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>
            <q-tab-panel
              name="gruppicollettivi"
              style="max-width: 500px"
              v-if="tools.iCanShowCircuitsMember(circuit)"
            >
              <div class="text-h7 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>
                <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="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"
                    :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">
                  <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 Collettivo 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 Collettivo 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="mov">
              <q-toggle
                v-model="showonlymine"
                :label="t('movement.onlymymov')"
              ></q-toggle>
              <q-toggle v-model="tabellare" label="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: 20,
                  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-tab-panel>
            <q-tab-panel name="info">
              <div>
                <q-card>
                  <q-card-section>
                    <div class="text-h6">{{ t('circuit.info') }}</div>
                  </q-card-section>

                  <q-separator />

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

                    <q-card-section>
                      <div class="col-12 text-h7">
                        <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: circuit.name })
                            "
                            :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-h5">
                        <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
                          :symbol="tools.getSymbolByCircuit(circuit)"
                          :color="tools.getColorByCircuit(circuit)"
                          color_border="red"
                          v-model="circuit.fido_scoperto_default"
                          icon="fas fa-battery-quarter"
                          :label="t('circuit.fido_scoperto_default')"
                          :tips="t('circuit.fido_scoperto_default_tips')"
                        >
                        </CCurrencyValue>
                      </div>
                      <div class="sezioni">
                        <CCurrencyValue
                          :symbol="tools.getSymbolByCircuit(circuit)"
                          :color="tools.getColorByCircuit(circuit)"
                          color_border="green"
                          v-model="circuit.qta_max_default"
                          icon="fas fa-battery-quarter"
                          :label="t('circuit.qta_max_default')"
                          :tips="t('circuit.qta_max_default_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 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-h6">{{ t('circuit.regulation') }}:</div>
                </q-card-section>
                <q-separator />

                <q-card-section>
                  <div class="centermydiv">
                    <q-btn
                      label="vedi Regolamento"
                      @click="showrules = !showrules"
                    >
                    </q-btn>
                  </div>
                  <div class="col-12 text-h7">
                    <span
                      v-if="checkifShow('descr') && showrules && circuit"
                      v-html="getRegulation(circuit.regulation)"
                    ></span>
                  </div>
                </q-card-section>
                <div v-if="circuit.createdBy" class="container">
                  <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"
                >
                  <q-icon name="fas fa-pencil-alt" class="iconcirc"></q-icon>
                  <span class="element">{{
                    $t('shared.lastmodify', {
                      date: tools.getstrDateYY(circuit.date_updated),
                    })
                  }}</span>
                </div>
              </q-card>
              <q-card v-if="circuit.name">
                <q-card-section>
                  <div class="text-h6">
                    {{ t('circuit.contocomunitario') }}:
                  </div>
                  <div class="text-h7 q-mb-sm">
                    {{ $t('circuit.info_contocom') }}
                  </div>
                </q-card-section>
                <q-separator />

                <q-card-section>
                  <div class="col-12 text-h7 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"
                        :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-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"
              style="max-width: 500px"
              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" animated>
                <q-tab-panel name="all">
                  <!--<q-toggle v-model="showsaldi" :label="t('movement.showsaldi')"></q-toggle>-->

                  <CGridTableRec
                    v-if="!loading"
                    ref="tabMembri"
                    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="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"
                    :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>
                </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="mov"> </q-tab-panel>
          </q-tab-panels>
        </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-h6">
              <q-skeleton :animation="animation" />
            </div>
            <div class="col-12 text-h7 text-grey text-center">
              {{ path }}
            </div>
            <div class="col-12 text-h7">
              <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>
      <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 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">
              Regolamento:
            </div>
            <q-btn label="vedi Regolamento" @click="showrules = !showrules">
            </q-btn>
            <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"
          @close="showsendCoinTo = false"
        >
        </CSendCoins>
      </div>
    </div>
  </div>
</template>

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

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

