<template>
  <div
    class="q-py-xs centermydiv cardrec"
    :style="
      `max-width: ` +
      (tools.getwidth($q) - 20) +
      `px; ` +
      ($q.screen.lt.sm ? `min-width: ` + (tools.getwidth($q) - 20) + `px;` : ``)
    "
  >
    <q-item
      v-if="circuit"
      clickable
      v-ripple
      :class="
        `shadow-2 q-btn--rounded ` +
        ($q.dark.isActive ? `bg-black` : `bg-teal-1`)
      "
    >
      <q-item-section
        v-if="circuit.photos"
        avatar
        class="items-center"
        @click="cmdExt(costanti.CMD_OPEN_PAGE, null, circuit)"
      >
        <q-avatar size="60px">
          <q-img
            :src="userStore.getImgByCircuit(circuit)"
            :alt="circuit.descr"
            img-class="imgprofile"
            height="60px"
          />
        </q-avatar>
        <q-chip class="glossy" icon-right="fas fa-users" text-color="blue"
          ><span style="font-size: 1rem" class="q-mr-xs">{{
            circuit.numMembers
          }}</span></q-chip
        >

        <span v-if="circuit.link_group" :class="` `">
          <q-btn
            icon="fab fa-telegram"
            size="xs"
            color="blue"
            rounded
            @click.stop.prevent="tools.openUrl(circuit.link_group)"
          ></q-btn>
        </span>
      </q-item-section>

      <q-item-section @click="cmdExt(costanti.CMD_OPEN_PAGE, null, circuit)">
        <q-item-label
          @click="naviga(tools.getPathByTableAndRec(table, circuit))"
          ><strong>{{ circuit.name }}</strong>
          <span v-if="circuit.subname"> ({{ circuit.subname }})</span>
        </q-item-label>
        <q-item-label
          @click="naviga(tools.getPathByTableAndRec(table, circuit))"
          v-if="circuit.longdescr"
          caption
          lines="3"
          ><em>
            <div v-html="circuit.longdescr"></div> </em
        ></q-item-label>
        <q-item-label caption lines="2">
          <q-chip
            v-if="circuit.status !== undefined && circuit.status !== 0"
            :color="circuitStore.getColorCircuitClass(circuit)"
            text-color="white"
            size="sm"
            :icon="
              globalStore.getValueByTableSingle(
                'statuscircuit',
                circuit.status,
                'icon'
              )
            "
            >{{
              globalStore.getValueByTableSingle('statuscircuit', circuit.status)
            }}
            <q-btn
              class="q-ml-sm"
              icon="fas fa-info"
              color="primary"
              text-color="white"
              size="xs"
              round
              @click="showingtooltip = !showingtooltip"
            >
              <q-tooltip :offset="[10, 10]" v-model="showingtooltip">{{
                globalStore.getValueByTableSingle(
                  'statuscircuit',
                  circuit.status,
                  'hint'
                )
              }}</q-tooltip>
            </q-btn>
          </q-chip>
        </q-item-label>
        <q-item-label
          v-if="
            !circuit.transactionsEnabled &&
            circuit.status ===
              shared_consts.CIRCUIT_STATUS.FASE3_MONETA_ABILITATA
          "
          caption
          lines="1"
        >
          <q-icon v-if="!circuit.transactionsEnabled" name="fas fa-lock">
          </q-icon>
          <span class="text-red text-weight-bold">{{
            $t('circuit.transaction_suspended')
          }}</span>
        </q-item-label>

        <!--
        <q-item-label v-if="circuit.name" lines="1" class="text_title">
          <span class="text-weight-bold">{{ circuit.name }}</span>
        </q-item-label>
        <q-item-label v-if="circuit.subname" lines="1" class="text_title">
          <span>{{ circuit.subname }}</span>
          <span v-if="!circuit.transactionsEnabled"><q-icon name="fas fa-lock"></q-icon></span>
        </q-item-label>
        <q-item-label lines="3" v-if="circuit.longdescr">{{ circuit.longdescr }}<br>
        </q-item-label>
        -->
      </q-item-section>
      <q-item-section side v-if="tools.canModifyThisRec(circuit, table)">
        <q-item-label>
          <q-btn rounded dense icon="fas fa-pencil-alt">
            <q-menu>
              <q-list style="min-width: 150px">
                <q-item
                  clickable
                  v-close-popup
                  @click="cmdExt(costanti.CMD_MODIFY, circuit._id, null)"
                >
                  <q-item-section side>
                    <q-icon name="fas fa-pencil-alt" />
                  </q-item-section>
                  <q-item-section>{{ $t('reg.edit') }}</q-item-section>
                </q-item>
              </q-list>
              <q-list style="min-width: 150px">
                <q-item
                  clickable
                  v-close-popup
                  @click="cmdExt(costanti.CMD_DUPLICATE, circuit._id, null)"
                >
                  <q-item-section side>
                    <q-icon name="fas fa-copy" />
                  </q-item-section>
                  <q-item-section>{{ $t('event.duplicate') }}</q-item-section>
                </q-item>
              </q-list>
              <q-list style="min-width: 150px">
                <q-item
                  clickable
                  v-close-popup
                  @click="cmdExt(costanti.CMD_DELETE, circuit._id, null)"
                >
                  <q-item-section side>
                    <q-icon name="fas fa-trash-alt" />
                  </q-item-section>
                  <q-item-section>{{ $t('reg.elimina') }}</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </q-item-label>
      </q-item-section>
    </q-item>
    <q-separator inset="item" />
  </div>
</template>

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

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