<template>
  <div v-if="tools.isUserOk()">
    <div v-if="finder && showfinder" class="q-gutter-sm q-pa-sm q-pb-sm">
      <q-btn-toggle
        :model-value="modelValue"
        @update:model-value="updateValue"
        class="my-custom-toggle"
        no-caps
        rounded
        unelevated
        push
        toggle-color="primary"
        color="white"
        text-color="primary"
        :options="myoptions"
      />
    </div>
    <div v-if="finder" class="">
      <div
        v-if="
          modelValue === costanti.FIND_CIRCUIT ||
          listcircuitsfiltered.length === 0
        "
      >
        <slot></slot>
      </div>
      <div v-else>
        <!--
        mycircuits: {{userStore.my.profile.mycircuits}}<br><br>
        listcircuitsfiltered: {{listcircuitsfiltered}}

        <q-btn label="test" @click="userStore.my.profile.mycircuits = [...userStore.my.profile.mycircuits, {circuitname: 'prova'}]; circuitStore.listcircuits = [...circuitStore.listcircuits, {name: 'prova', path: 'prova'}]"></q-btn>
        -->

          <q-list>
            <span
              v-for="(circuit, index) in listcircuitsfiltered"
              :key="index"
              class="q-my-sm"
              clickable
            >
              <CMyCircuit :mycircuit="circuit" :visu="modelValue"> </CMyCircuit>
            </span>
          </q-list>
      </div>
    </div>
    <div v-else>
      <q-list class="width-container">
        <span class="q-my-sm" clickable>
          <CMyCircuit :mycircuit="mycircuit" :visu="visu"> </CMyCircuit>
        </span>
      </q-list>
    </div>
  </div>
  <div v-else>
    <CUserNonVerif></CUserNonVerif>
  </div>
</template>

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

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

