<template>
  <div
    v-if="!caricato"
    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">
        {{ username }}
      </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 v-else-if="tools.isUserOk() || tools.isLogged()">
    <div v-if="myuser">
      <CNotifAtTop />
      <div class="q-gutter-sm q-pa-sm q-pb-md">
        <div
          v-if="myuser && myuser.date_reg"
          class="row wrap justify-evenly items-center content-start"
        >
          <CTitleBanner
            v-if="site.confpages.showCompetenze"
            class=""
            :title="$t('profile.skills')"
            bgcolor="bg-primary"
            clcolor="text-white"
            myclass="myshad"
            :canopen="true"
          >
            <div
              class="fit column no-wrap justify-evenly items-center content-start"
            >
              <div v-if="site.confpages.showNameSurname">
                <div class="text-h6">
                  <span v-if="checkifShow('name') && myuser.name"> {{ myuser.name }}</span>
                  <span v-if="checkifShow('surname') && myuser.surname">&nbsp;{{
                    myuser.surname
                  }}</span>
                </div>
              </div>
              <div class="col-12 text-h7 text-blue text-shadow-2">
                {{ myuser.username }}
              </div>
            </div>

            <div v-for="(card, ind) of mycards" :key="ind" :name="card.table">
              <div class="text-h6">{{card.title}}</div>
              <div v-if="card.table === 'mygroups'">
                <q-list>
                  <span
                    v-for="(grp, index) in listgroupsfiltered"
                    :key="index"
                    class="q-my-sm q-mx-none"
                    clickable
                    >
                    <CMyGroup :mygrp="grp" :visu="costanti.USER_GROUPS">
                    </CMyGroup>
                  </span>
                </q-list>
              </div>
              <div v-else-if="card.table === 'circuits'">
                <q-list>
                  <span
                    v-for="(circuit, index) in listcircuitsfiltered"
                    :key="index"
                    class="q-my-sm q-mx-none"
                    clickable
                  >
                    <CMyCircuit
                      :mycircuit="circuit"
                      :visu="costanti.USER_CIRCUITS"
                    >
                    </CMyCircuit>
                  </span>
                </q-list>
              </div>
              <div v-else>
                <CSkill
                  :table="card.table"
                  :filtercustom="filtroutente"
                  :butt_modif_new="isMyRecord(myuser.username)"
                  :visuinpage="true"
                />
              </div>
            </div>
          </CTitleBanner>
        </div>
      </div>

      <q-dialog v-model="showPic" full-height full-width>
        <img :src="getImgUser()" :alt="username" class="full-width" />
      </q-dialog>

      <div v-if="showsendCoinTo">
        <CSendCoins
          :showprop="showsendCoinTo"
          :to_user="myuser"
          @close="showsendCoinTo = false"
        >
        </CSendCoins>
      </div>
    </div>
  </div>
</template>

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

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

