<template>
  <CNotifAtTop />
  <div class="q-gutter-sm q-pa-sm q-pb-md">
    <div v-if="!mygrp && !loading">
      <div v-if="mystatus === 403">
        <h3>
          Non hai i permessi per accedere al Gruppo.
          <br />Occorre prima registrarsi alla App
        </h3>
      </div>
      <div v-else>
        <h3>Gruppo non Esistente</h3>
      </div>
    </div>
    <div v-else>
      <div>
        <div
          v-if="mygrp.descr"
          class="fit column no-wrap justify-evenly items-center content-start"
        >
          <div class>
            <q-avatar size="140px">
              <q-img
                :src="getImgGrp()"
                :alt="mygrpname()"
                img-class="imgprofile"
                height="140px"
                @click="showPic = true"
              />
            </q-avatar>
          </div>

          <div class="text-h6">
            <span v-if="checkifShow('name')">{{ mygrp.title }}</span>
          </div>
          <div
            v-if="mygrp.title !== mygrp.groupname"
            class="col-12 text-h7 text-blue text-shadow-2"
          >
            {{ mygrp.groupname }}
          </div>

          <q-banner
            v-if="userStore.IsRefusedGroupByGroupname(mygrp.groupname)"
            rounded
            class="bg-red text-white"
            style="text-align: center"
          >
            <em style="font-weight: bold">{{ t('db.youarerefusedgroup') }}</em>
            <br />
          </q-banner>

          <q-btn
            v-if="circuitslistOpt.length > 0"
            icon-right="img: /images/1ris_rosso_100.png"
            color="green"
            size="md"
            class="q-ma-md"
            :label="t('circuit.sendcoins')"
            dense
            rounded
            @click="showsendCoinTo = true"
          >
          </q-btn>

          <div>
            <q-btn
              v-if="userStore.IsMyGroupByGroupname(mygrp.groupname)"
              rounded
              icon="fas fa-ellipsis-h"
            >
              <q-menu>
                <q-list
                  v-if="true"
                  style="min-width: 150px"
                >
                  <q-item
                    v-if="userStore.IsMyGroupByGroupname(mygrp.groupname)"
                    clickable
                    v-close-popup
                    @click="
                      tools.removeFromMyGroups(
                        $q,
                        userStore.my.username,
                        mygrp.groupname,
                        t('db.domanda_exit_fromgroup', {
                          groupname: mygrp.groupname,
                        })
                      )
                    "
                  >
                    <q-item-section avatar>
                      <q-icon
                        color="negative"
                        name="fas fa-user-minus"
                      />
                    </q-item-section>
                    <q-item-section>
                      {{ t('groups.exit_group') }}
                    </q-item-section>
                  </q-item>

                  <q-list
                    v-if="
                      userStore.IsMyGroupByGroupname(mygrp.groupname) &&
                      tools.iAmAdminGroup(mygrp.groupname)
                    "
                    style="min-width: 200px"
                  >
                    <q-item
                      clickable
                      v-close-popup
                      @click="
                        tools.setCmd(
                          $q,
                          shared_consts.GROUPSCMD.DELETE_GROUP,
                          userStore.my.username,
                          '',
                          mygrp.groupname
                        )
                      "
                    >
                      <q-item-section avatar>
                        <q-icon
                          color="negative"
                          name="fas fa-trash-alt"
                        />
                      </q-item-section>
                      <q-item-section>
                        {{ t('groups.delete_group') }}
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-list>
              </q-menu>
            </q-btn>

            <q-btn
              v-if="
                userStore.IsAskedGroupByGroupname(mygrp.groupname) &&
                !userStore.IsMyGroupByGroupname(mygrp.groupname)
              "
              icon="fas fa-user-minus"
              outline
              flat
              :label="$t('shared.cancel_ask_short')"
              @click="tools.cancelReqGroups($q, userStore.my.username, mygrp.groupname)"
            />
          </div>
        </div>
        <div class="absolute-top-right q-mr-sm q-my-md q-pt-lg">
          <div class="column">
            <q-btn
              flat
              round
              color="blue"
              icon="share"
              style="z-index: 1"
              @click.stop="tools.copyToClip($q, getlinkpage(), true)"
            ></q-btn>
          </div>
        </div>

        <div
          v-if="mygrp.descr"
          class="no-wrap justify-evenly items-center content-start"
        >
          <!--
          <q-btn
            v-if="tools.iAmAdminGroup(groupname)" icon="fas fa-pencil-alt"
            color="blue"
            size="md"
            :label="$t('otherpages.modifgrp')"
            to="/editgrp">
          </q-btn>
          -->

          <q-tabs
            v-model="tabgrp"
            class="text-blue"
          >
            <q-tab
              :label="t('shared.info1')"
              name="info"
              icon="fas fa-info"
            ></q-tab>
            <q-tab
              v-if="tools.iCanShowGroupsMember(mygrp) || tools.iAmAdminGroup(groupname)"
              :label="t('shared.subscribes')"
              name="members"
              icon="fas fa-users"
            ></q-tab>
            <q-tab
              v-if="tools.iCanShowAnnunci(mygrp)"
              :label="t('profile.annunci')"
              name="annunci"
              icon="fas fa-pencil-alt"
            ></q-tab>
            <q-tab
              v-if="tools.iCanShowGroupsMember(mygrp) || tools.iAmAdminGroup(groupname)"
              :label="t('groups.circuits') + ' (' + circuitslist.length + ')'"
              name="circuits"
              :style="
                circuitslist.length > 0
                  ? `background-color: ${circuitslist.length > 0 ? 'rgba(0, 200, 0, 0.8)' : ''}; color: white; font-weight: bold;`
                  : ''
              "
              icon="img: /images/1ris_rosso_100.png"
            ></q-tab>
          </q-tabs>

          <q-tab-panels
            v-model="tabgrp"
            animated
            keep-alive
          >
            <q-tab-panel name="info">
              <q-card v-if="mygrp.title">
                <q-card-section>
                  <div class="col-12 text-h7">
                    <span v-if="checkifShow('descr')">{{ mygrp.descr }}</span>
                  </div>

                  <div class="col-6 q-ma-xs">
                    <q-btn
                      v-if="getLinkGrpTelegram()"
                      icon="fab fa-telegram"
                      color="blue"
                      type="a"
                      size="md"
                      rounded
                      :label="$t('msgs.telegrammsg')"
                      :href="getLinkGrpTelegram()"
                      target="__blank"
                    ></q-btn>
                  </div>
                  <div class="col-6 q-ma-xs">
                    <q-btn
                      v-if="getLinkWebSite()"
                      icon="fas fa-globe"
                      color="blue"
                      type="a"
                      size="md"
                      rounded
                      :label="t('reg.website') + ' ' + tools.getMainUrl(getLinkWebSite())"
                      :href="getLinkWebSite()"
                      target="__blank"
                    ></q-btn>
                  </div>
                </q-card-section>
              </q-card>
              <div>
                <q-card>
                  <q-card-section>
                    <div
                      v-if="
                        mygrp.visibility.includes(shared_consts.Visibility_Group.PRIVATE)
                      "
                      class="row"
                    >
                      <div class="q-pa-xs">
                        <q-icon name="fas fa-lock"></q-icon>
                      </div>
                      <div>
                        <div class="title_param">
                          {{ t('groups.private') }}
                        </div>
                        {{ t('groups.private_descr') }}
                      </div>
                    </div>

                    <div
                      v-if="
                        mygrp.visibility.includes(shared_consts.Visibility_Group.HIDDEN)
                      "
                      class="row"
                    >
                      <div class="q-pa-xs">
                        <q-icon name="fas fa-eye-slash"></q-icon>
                      </div>
                      <div>
                        <div class="title_param">{{ t('groups.hidden') }}</div>
                        {{ t('groups.hidden_descr') }}
                      </div>
                    </div>
                    <div class="members">
                      {{ t('products.category') }}
                      <q-item>
                        <q-item-section>
                          <q-item-label class="full-width">
                            <div
                              v-for="(rec, ind) of mygrp.recCatGrp"
                              :key="ind"
                            >
                              <q-chip
                                dense
                                class="text-center shadow-5 glossy chipmodif text-white"
                                :style="`background-color: ${rec.color};`"
                              >
                                <q-icon
                                  :name="rec.icon"
                                  left
                                />
                                {{ rec.descr }}</q-chip
                              >
                            </div>
                          </q-item-label>
                        </q-item-section>
                      </q-item>

                      <q-icon name="fas fa-users"></q-icon>
                      {{ numUsers() }}
                      {{ numUsers() === 1 ? t('shared.member') : t('shared.members') }}
                    </div>
                    <div class="admins">
                      <q-icon name="fas fa-user-cog"></q-icon>
                      {{ numAdmins() }}
                      {{ numAdmins() === 1 ? t('shared.admin') : t('shared.admins') }}
                    </div>

                    <div
                      v-for="(user, index) of mygrp.admins"
                      :key="index"
                    >
                      <CMyUser
                        :mycontact="user"
                        :visu="costanti.FIND_PEOPLE"
                        @setCmd="tools.setCmd"
                      ></CMyUser>
                    </div>

                    <div
                      v-if="cities.length > 0"
                      class="row"
                    >
                      <div class="q-pa-xs">
                        <q-icon name="fas fa-map-marker-alt"></q-icon>
                      </div>
                      <div>
                        <div class="title_param">
                          <div
                            v-for="(city, index) of cities"
                            :key="index"
                          >
                            {{ city.comune }} ({{ city.prov }})
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="element">
                      <q-icon name="fas fa-lightbulb"></q-icon>
                      {{
                        t('shared.createdby', {
                          username: mygrp.createdBy,
                          date: tools.getstrDateYY(mygrp.date_created),
                        })
                      }}
                    </div>
                    <div
                      v-if="
                        !!mygrp.date_updated &&
                        tools.getstrshortDate(mygrp.date_updated) !==
                          tools.getstrshortDate(mygrp.createdBy)
                      "
                      class="element"
                    >
                      <q-icon name="fas fa-pencil-alt"></q-icon>
                      {{
                        t('shared.lastmodify', {
                          date: tools.getstrDateYY(mygrp.date_updated),
                        })
                      }}
                    </div>
                  </q-card-section>
                  <div v-if="circuitslist.length <= 1">
                    <q-banner
                      v-if="circuitslist.length === 0"
                      rounded
                      dense
                      class="bg-grey-2 text-grey-9 q-pa-sm items-center"
                    >
                      <q-icon
                        name="info"
                        color="primary"
                        class="q-mr-sm"
                      />
                      <span
                        >Nessun circuito RIS è ancora stato abilitato per questo
                        gruppo.</span
                      >
                    </q-banner>
                    <q-select
                      v-if="
                        tools.iAmAdminGroup(groupname) &&
                        circuitslist.length <= 1 &&
                        !requestToEnterCircuit
                      "
                      v-model="circuitSel"
                      class="q-pa-md q-ma-sm"
                      :options="
                        userStore.my.profile.mycircuits
                          .filter(
                            (circuit) =>
                              !userStore.IsMyCircuitByNameAndGroup(
                                circuit.circuitname,
                                mygrp.groupname
                              )
                          )
                          .map((circuit) => ({
                            label: circuit.circuitname,
                            value: circuit.circuitname,
                          }))
                      "
                      emit-value
                      map-options
                      :label="$t('circuit.select_circuit')"
                      :hint="$t('circuit.select_circuit_hint')"
                    >
                      <template v-slot:append>
                        <q-btn
                          v-if="circuitSel"
                          icon="fas fa-user-plus"
                          color="primary"
                          :label="$t('circuit.add_circuit')"
                          @click="requestToEnterCircuit = true"
                        />
                      </template>
                    </q-select>
                    <br />
                  </div>
                </q-card>

                <br />
              </div>
              <q-card v-if="mygrp.note">
                <q-card-section>
                  <div class="text-h7">Pagina:</div>
                </q-card-section>
                <q-separator />

                <q-card-section>
                  <div v-if="mygrp.note">
                    <br />
                    <div class="q-ma-sm q-gutter-sm q-pa-xs">
                      <div
                        v-if="mygrp.note"
                        v-html="mygrp.note"
                      ></div>
                    </div>
                  </div>
                </q-card-section>
              </q-card>
            </q-tab-panel>

            <q-tab-panel
              name="members"
              style="max-width: 500px"
              v-if="tools.iCanShowGroupsMember(mygrp)"
            >
              <q-btn
                v-if="
                  !userStore.IsMyGroupByGroupname(mygrp.groupname) &&
                  !userStore.IsAskedGroupByGroupname(mygrp.groupname) &&
                  !userStore.IsRefusedGroupByGroupname(mygrp.groupname)
                "
                icon="fas fa-user-plus"
                color="primary"
                :label="$t('groups.ask_group')"
                @click="
                  tools.setRequestGroup($q, userStore.my.username, mygrp.groupname, true)
                "
              />

              <q-tabs
                v-show="tools.iAmAdminGroup(groupname)"
                v-model="tabmembers"
                class="text-blue"
              >
                <q-tab
                  label="Tutti"
                  name="all"
                  icon="fas fa-users"
                ></q-tab>
                <q-tab
                  v-if="tools.iAmAdminGroup(groupname)"
                  label="Richieste"
                  name="rich"
                  icon="fas fa-user-plus"
                ></q-tab>
                <q-tab
                  v-if="tools.iAmAdminGroup(groupname)"
                  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="rich">
                  <CGridTableRec
                    prop_mytable="mygroups"
                    prop_mytitle
                    :prop_mycolumns="colmyUserPeople"
                    prop_colkey="_id"
                    col_title
                    :vertical="costanti.VISUTABLE_USER_TABGROUP"
                    nodataLabel="Nessuna Richiesta in sospeso"
                    :prop_search="false"
                    hint="Username 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"
                    :prop_searchList="searchList"
                    :showType="costanti.SHOW_USERINFO"
                    :showCol="false"
                    :extraparams="extraparams_rich()"
                    :extrafield="groupname"
                    :visufind="costanti.REQ_ADD_USER_TO_GROUP"
                  ></CGridTableRec>
                </q-tab-panel>
                <q-tab-panel name="refused">
                  <CGridTableRec
                    prop_mytable="mygroups"
                    prop_mytitle
                    :prop_mycolumns="colmyUserPeople"
                    prop_colkey="_id"
                    col_title
                    :vertical="costanti.VISUTABLE_SCHEDA_GROUP"
                    nodataLabel="Nessun utente Rifiutato"
                    :prop_search="false"
                    hint="Username 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"
                    :prop_searchList="searchList"
                    :showType="costanti.SHOW_USERINFO"
                    :showCol="false"
                    :extraparams="extraparams_refused()"
                    :extrafield="groupname"
                    :visufind="costanti.REQ_ADD_USER_TO_GROUP"
                  ></CGridTableRec>
                </q-tab-panel>
              </q-tab-panels>
            </q-tab-panel>
            <q-tab-panel name="circuits">
              <div v-if="circuitslist.length === 0">
                <q-banner
                  rounded
                  class="bg-grey-2 text-grey-9 q-pa-sm items-center"
                >
                  Nessun Circuito RIS ancora abilitato da parte del gruppo
                </q-banner>
              </div>

              <div
                v-for="(circuit, index) in circuitslist"
                :key="index"
              >
                <CMyCircuit
                  :mycircuit="circuit"
                  :visu="costanti.USER_CIRCUITS"
                  :prop_groupnameSel="mygrp.groupname"
                >
                </CMyCircuit>
              </div>

              <q-select
                v-if="circuitslistOpt.length > 0"
                v-model="circuitIndex"
                :options="circuitslistOpt"
                emit-value
                map-options
                :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
              >
                <template v-slot:prepend></template>
                <template v-slot:option="scope">
                  <q-item v-bind="scope.itemProps">
                    <q-item-section>
                      <q-item-label>{{ scope.opt.label }}</q-item-label>
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>

              <q-tabs
                v-if="circuitslistOpt.length > 0"
                v-model="tabcircuit"
                class="text-blue"
                no-caps
              >
                <q-tab
                  :label="t('shared.info1')"
                  name="info"
                  icon="fas fa-info"
                ></q-tab>
                <q-tab
                  :label="t('circuit.movements')"
                  name="mov"
                  icon="img: /images/1ris_rosso_100.png"
                ></q-tab>
              </q-tabs>
            </q-tab-panel>
            <q-tab-panel name="annunci"></q-tab-panel>
          </q-tab-panels>

          <div v-if="tabgrp === 'circuits' && tabcircuit === 'info'">
            <q-tab-panels
              v-model="tabcircuit"
              animated
              keep-alive
            >
              <q-tab-panel
                name="info"
                style="max-width: 500px"
              >
                <div
                  v-for="(circuit, ind) of circuitslist"
                  :key="ind"
                >
                  <div class="circuit_name">{{ circuit.circuitname }}:</div>
                  <CInfoAccount
                    :circuitname="circuit.circuitname"
                    :grp="mygrp"
                    :account="circuit.account"
                    :admin="tools.iAmAdminCircuit(circuit.circuitname)"
                  />
                </div>
              </q-tab-panel>
            </q-tab-panels>
          </div>
          <div v-if="tabgrp === 'circuits' && tabcircuit === 'mov'">
            <div v-if="circuitslist && circuitslist.length > 0">
              <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"
                filterextra
                :prop_pagination="{
                  sortBy: 'transactionDate',
                  descending: true,
                  page: 1,
                  rowsNumber: 0,
                  rowsPerPage: 20,
                }"
                :showType="costanti.SHOW_MOVEMENTS"
                :showCol="true"
                :showHeaderCol="true"
                :extraparams="getExtraparams_movs_grp(circuitslist[circuitIndex])"
                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"
                :prop_pagination="{
                  sortBy: 'transactionDate',
                  descending: true,
                  page: 1,
                  rowsNumber: 20,
                  rowsPerPage: 20,
                }"
                :showType="costanti.SHOW_MOVEMENTS"
                :showCol="false"
                :showHeaderCol="false"
                :extraparams="getExtraparams_movs_grp(circuitslist[circuitIndex])"
                extrafield
                :visufind="costanti.FRIENDS"
              ></CGridTableRec>
            </div>
          </div>
          <div v-if="tabgrp === 'annunci'">
            <div
              v-for="(card, ind) of mycards"
              :key="ind"
              :name="card.table"
            >
              <div v-if="card.table !== 'mygroups' && card.table !== 'circuits'">
                <div v-if="card.table !== 'mygroups' && card.table !== 'circuits'">
                  <div v-if="card.table === shared_consts.TABLES_MYBACHECAS">
                    <q-tabs
                      v-model="tabevents"
                      class="text-teal"
                    >
                      <q-tab
                        label="Eventi Passati"
                        name="past"
                      ></q-tab>
                      <q-tab
                        label="Prossimi Eventi"
                        name="new"
                      ></q-tab>
                    </q-tabs>

                    <q-tab-panels
                      v-model="tabevents"
                      animated
                    >
                      <q-tab-panel name="past">
                        <CSkill
                          :groupname="mygrp.groupname"
                          :table="card.table"
                          :filtercustom="filtrotables(card.table, tabevents)"
                          :butt_modif_new="tools.iAmAdminGroup(groupname)"
                          :visuinpage="true"
                          :noaut="false"
                          :title="card.title"
                        />
                      </q-tab-panel>
                      <q-tab-panel name="new">
                        <CSkill
                          :groupname="mygrp.groupname"
                          :table="card.table"
                          :filtercustom="filtrotables(card.table, tabevents)"
                          :butt_modif_new="tools.iAmAdminGroup(groupname)"
                          :visuinpage="true"
                          :noaut="false"
                          :title="card.title"
                        />
                      </q-tab-panel>
                    </q-tab-panels>
                  </div>
                  <div v-else>
                    <CSkill
                      :groupname="mygrp.groupname"
                      :table="card.table"
                      :filtercustom="filtrotables(card.table, '')"
                      :butt_modif_new="tools.iAmAdminGroup(groupname)"
                      :visuinpage="true"
                      :noaut="false"
                      :title="card.title"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="tabgrp === 'members' && tabmembers === 'all'">
            <CGridTableRec
              ref="tabMembri"
              prop_mytable="users"
              prop_mytitle
              :prop_mycolumns="colmyUserPeople"
              prop_colkey="_id"
              col_title="username"
              :vertical="costanti.VISUTABLE_LISTA"
              nodataLabel="Nessun Iscritto"
              :prop_search="true"
              hint="Username da trovare"
              :finder="false"
              :choose_visutype="true"
              :finder_noNull="false"
              :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
              :butt_modif_new="false"
              noresultLabel="Username non trovato"
              :arrfilters="arrfilterand"
              :filtercustom="filtercustom"
              :prop_searchList="searchList"
              :showType="costanti.SHOW_USERINFO"
              :showCol="false"
              :extrafield="groupname"
              :extraparams="tools.extraparams(shared_consts.TABMYGROUPS)"
              :visufind="
                tools.iAmAdminGroup(groupname)
                  ? costanti.REQ_REMOVE_USER_TO_GROUP
                  : costanti.FIND_PEOPLE
              "
            ></CGridTableRec>
          </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="animation"
          />
          <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">
              {{ groupname }}
            </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>
      <div v-if="!tools.isLogged()">
        <CCheckIfIsLogged></CCheckIfIsLogged>
      </div>
      <q-dialog
        v-model="showPic"
        full-height
        full-width
      >
        <img
          :src="getImgGrp()"
          :alt="groupname"
          class="full-width"
        />
      </q-dialog>
    </div>
  </div>
  <q-dialog
    v-model="requestToEnterCircuit"
    maximized
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card
      v-if="circuitSel"
      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>
          {{ circuitSel }}
          <div v-if="mygrp.groupname">Gruppo: {{ mygrp.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 style="font-weight: bold; font-size: 1.25rem">
          {{ t('circuit.regulation') }} {{ circuitSel }}
        </div>
        <br />
      </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"
          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="
            tools.setRequestCircuit(
              $q,
              userStore.my.username,
              circuitSel,
              true,
              mygrp.groupname
            );
            loadGroup();
            requestToEnterCircuit = false;
          "
        />
        <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"
      :to_group="mygrp"
      circuitname=""
      @close="showsendCoinTo = false"
    >
    </CSendCoins>
  </div>
</template>

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

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