<template>
  <div v-if="tools.isUserOk()">
    <div v-if="circuit">
      <q-item class="q-my-sm" clickable>
        <q-item-section avatar @click="naviga(tools.getPathByCircuit(circuit, table))">
          <q-avatar size="60px">
            <q-img :src="getImgCircuit(circuit)" :alt="circuit.name" img-class="imgprofile" height="60px"/>
          </q-avatar>
        </q-item-section>

        <q-item-section @click="naviga(tools.getPathByCircuit(circuit, table))">
          <q-item-label><strong>{{ circuit.name }}</strong> ({{ circuit.subname }})
          </q-item-label>
          <q-item-label v-if="circuit.longdescr" caption lines="3"><em>{{ circuit.longdescr }}</em></q-item-label>
        </q-item-section>

        <q-item-section side v-if="visu === costanti.MY_CIRCUITS">
          <q-item-label>
            <q-btn rounded icon="fas fa-ellipsis-h">
              <q-menu>
                <q-list style="min-width: 150px">
                  <q-item clickable icon="fas fa-user-minus" v-close-popup
                          @click="tools.setCmd($q, shared_consts.GROUPSCMD.REMOVE_FROM_MYGROUP, myusername(), '', circuit.groupnameId)">
                    <q-item-section>{{ $t('groups.remove_from_mygroups') }}</q-item-section>
                  </q-item>
                </q-list>
                <q-list v-if="tools.iAmAdminGroup(circuit.groupnameId)" style="min-width: 200px">
                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.DELETE_GROUP, myusername(), '', circuit.groupnameId)">
                    <q-item-section>{{ $t('groups.delete_group') }}</q-item-section>
                  </q-item>
                </q-list>
                <q-list style="min-width: 150px">
                  <q-item v-if="!tools.iAmAdminGroup(circuit.groupnameId)" clickable icon="fas fa-ban" v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.BLOCK_GROUP, myusername(), '', circuit.groupnameId)">
                    <q-item-section>{{ $t('groups.block_group') }}</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-item-label>
        </q-item-section>
        <q-item-section side v-if="visu === costanti.USER_GROUPS">
          <q-item-label>
            <q-btn rounded :icon="userStore.IsMyGroupByGroupname(circuit.groupnameId) ? `fas fa-ellipsis-h` : `fas fa-user`">
              <q-menu>
                <q-list v-if="(!userStore.IsMyGroupByGroupname(circuit.groupnameId) && !userStore.IsAskedGroupByGroupname(circuit.groupnameId) && !userStore.IsRefusedGroupByGroupname(circuit.groupnameId))" style="min-width: 200px">
                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.REQGROUP, myusername(), true, circuitgroupnameId)">
                    <q-item-section>{{ $t('groups.ask_group') }}</q-item-section>
                  </q-item>
                </q-list>
                <q-list v-else-if="(!userStore.IsMyGroupByGroupname(circuit.groupnameId) && userStore.IsAskedGroupByGroupname(circuit.groupnameId) && !userStore.IsRefusedGroupByGroupname(circuit.groupnameId))" style="min-width: 200px">
                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.REQGROUP, myusername(), false, circuit.groupnameId)">
                    <q-item-section>{{ $t('groups.refuse_ask_group') }}</q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.REQGROUP, myusername(), false, circuit.groupnameId)">
                    <q-item-section>{{ $t('groups.cancel_ask_group') }}</q-item-section>
                  </q-item>
                </q-list>
                <q-list v-else-if="userStore.IsMyGroupByGroupname(circuit.groupnameId)" style="min-width: 200px">
                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.REMOVE_FROM_MYGROUP, myusername(), '', circuit.groupnameId)">
                    <q-item-section>{{ $t('groups.exit_group') }}</q-item-section>
                  </q-item>
                </q-list>
                <q-list v-if="tools.iAmAdminGroup(circuit.groupnameId)" style="min-width: 200px">
                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.DELETE_GROUP, myusername(), '', circuit.groupnameId)">
                    <q-item-section>{{ $t('groups.delete_group') }}</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-item-label>
        </q-item-section>
        <q-item-section side v-if="visu === costanti.REQ_GROUP">
          <q-item-label>
            <q-btn rounded icon="fas fa-ellipsis-h">
              <q-menu>
                <q-list style="min-width: 150px">
                  <q-item clickable icon="fas fa-user-minus" v-close-popup
                          @click="tools.setCmd($q, shared_consts.GROUPSCMD.REQGROUP, myusername(), false, circuit.groupnameId)">
                    <q-item-section>{{ $t('groups.reject_ask_group') }}</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-item-label>
        </q-item-section>
        <q-item-section side v-if="visu === costanti.ASK_SENT_CIRCUIT">
          <q-item-label>
            <q-btn rounded icon="fas fa-ellipsis-h">
              <q-menu>
                <q-list style="min-width: 150px">
                  <q-item clickable icon="fas fa-user-minus" v-close-popup
                          @click="tools.setCmd($q, shared_consts.GROUPSCMD.REFUSE_REQ_GROUP, myusername(), '', circuit.groupnameId)">
                    <q-item-section>{{ $t('groups.refuse_ask_group') }}</q-item-section>
                  </q-item>
                  <q-item clickable icon="fas fa-user-minus" v-close-popup
                          @click="tools.setCmd($q, shared_consts.GROUPSCMD.CANCEL_REQ_GROUP, myusername(), '', circuit.groupnameId)">
                    <q-item-section>{{ $t('groups.cancel_ask_group') }}</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-item-label>
        </q-item-section>
      </q-item>
    </div>
  </div>
  <div v-else>
    <CUserNonVerif></CUserNonVerif>
  </div>
</template>

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

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