<template>
  <div v-if="username">
    <q-tabs
      v-model="tab"
      dense
      inline-label
      class="bg-primary text-white shadow-2"
    >
      <q-tab name="tutti" label="Tutti" />
      <q-tab
        name="inviati"
        :label="t('circuit.inviati') + ' (' + getInviati.length + ')'"
      />
      <q-tab
        name="ricevuti"
        :label="t('circuit.ricevuti') + ' (' + getRicevuti.length + ')'"
      />
    </q-tabs>

    <q-tab-panels v-model="tab" animated keep-alive>
      <q-tab-panel name="tutti">
        <div v-if="mylist.length === 0">
          {{ t('circuit.nessun_movimento_inviato') }}
        </div>
        <c-single-movement
          v-for="(mov, index) in mylist"
          :key="index"
          :index="index"
          :mov="mov"
          :visu="0"
        >
        </c-single-movement>
      </q-tab-panel>
      <q-tab-panel name="inviati">
        <div v-if="getInviati.length === 0">
          {{ t('circuit.nessun_movimento_inviato') }}
        </div>
        <c-single-movement
          v-for="(mov2, index2) in getInviati"
          :key="index2"
          :index="index2"
          :mov="mov2"
          :visu="1"
        >
        </c-single-movement>
      </q-tab-panel>
      <q-tab-panel name="ricevuti">
        <div v-if="getRicevuti.length === 0">
          {{ t('circuit.nessun_movimento_ricevuto') }}
        </div>
        <c-single-movement
          v-for="(mov3, index3) in getRicevuti"
          :key="index3"
          :index="index3"
          :mov="mov3"
          :visu="2"
        >
        </c-single-movement>
      </q-tab-panel>
    </q-tab-panels>
    <slot></slot>
    <div style="margin-bottom: 50px"></div>
  </div>
  <q-list v-else bordered>
    <c-single-movement
      v-for="(mov, index) in mylist"
      :key="index"
      :index="index"
      :mov="mov"
    >
    </c-single-movement>
  </q-list>
  <q-inner-loading id="spinner" :showing="loadingvalues">
    <q-spinner-tail size="3em" color="primary" />
  </q-inner-loading>
  <div v-if="showbuttolastmov" class="row justify-center">
    <q-btn
      rounded
      dense
      class="text-center"
      color="primary"
      :label="t('circuit.show_next_mov')"
      @click="addlastmov()"
    />
  </div>
</template>

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

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