<template>
  <q-inner-loading id="spinner" :showing="!finishloading">
    <q-spinner-tail size="3em" color="primary" />
  </q-inner-loading>
  <div v-if="tools.isUserOk() && finishloading">
    <div v-if="finder && showfinder" class="q-gutter-sm q-pa-sm q-pb-sm">
      <div class="q-mt-md">
        <CSendRISTo></CSendRISTo>

        <CTitleBanner
          :class="`q-pa-xs `"
          :title="myoptions[0].label"
          bgcolor="white"
          bgcolor2="lightblue"
          :clcolor="`text-indigo`"
          :canopen="true"
          :small="true"
        >
          <div v-if="listcircuitsmy.length === 0" class="q-ma-sm q-pa-sm">
            {{ t('circuit.nessun_circuito_attivo') }}
          </div>
          <div v-else style="max-height: 250px; overflow-y: auto">
            <span
              v-for="(circuit, index) in listcircuitsmy"
              :key="index"
              class="q-my-sm"
              clickable
            >
              <CMyCircuit
                :mycircuit="circuit"
                :visu="visu"
                :username="username"
              >
              </CMyCircuit>
            </span>
          </div>
        </CTitleBanner>

        <CTitleBanner
          :class="`q-pa-xs `"
          :title="t('circuit.tuoi_ultimi_movimenti', { num: numtransaz })"
          bgcolor="white"
          bgcolor2="lightblue"
          :clcolor="`text-indigo`"
          :canopen="true"
          :small="true"
          :open="false"
        >
          <CMovements @loaded="movcaricati" :username="username">
            <div class="row justify-center"><q-btn
              rounded
              dense
              class="text-center"
              color="primary"
              :label="t('circuit.show_next_mov')"
              @click="addlastmov()"
            />
            </div>
          </CMovements>

          <q-inner-loading id="spinner" :showing="loadingvalues">
            <q-spinner-tail size="3em" color="primary" />
          </q-inner-loading>

          <br />
        </CTitleBanner>
        <div class="row justify-center">
          <q-btn
            rounded
            toggle-color="primary"
            :label="
              visu === costanti.MY_CIRCUITS
                ? t('circuit.find_others_circuit')
                : t('circuit.hide_others_circuit')
            "
            @click="togglevisu()"
          />
        </div>
        <CTitleBanner
          v-if="visu === costanti.FIND_CIRCUIT"
          :class="`q-pa-xs `"
          :title="t('circuit.circuiti_territoriali')"
          bgcolor="bg-primary"
          :clcolor="`text-white`"
          :canopen="true"
          :small="true"
        >
          <div>
            <span
              v-for="(circuit, index) in listcircuitsfind"
              :key="index"
              class="q-my-sm"
              clickable
            >
              <CMyCircuit
                :mycircuit="circuit"
                :visu="visu"
                :username="username"
              >
              </CMyCircuit>
            </span>
          </div>
        </CTitleBanner>
      </div>
      <div v-if="visu === costanti.FIND_CIRCUIT">
        <slot></slot>
      </div>
    </div>
    <div v-else>
      <q-list class="width-container">
        <span class="q-my-sm" clickable>
          <CMyCircuit :mycircuit="mycircuit" :visu="visu" :username="username">
          </CMyCircuit>
        </span>
      </q-list>
    </div>
  </div>
  <div v-else>
    <CUserNonVerif></CUserNonVerif>
  </div>

  <CTitleBanner
    v-if="visu === costanti.FIND_CIRCUIT"
    :class="`q-pa-xs `"
    :title="myoptions[0].label"
    bgcolor="bg-primary"
    :clcolor="`text-white`"
    :canopen="true"
    :small="true"
  >
  </CTitleBanner>
</template>

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

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

