<script setup>
import { progress } from "@/components/forms/other/MassDataInserter.vue";
import { ref, computed, defineEmits, defineProps } from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";


</script>

<template>
  <div>
    <!-- Level -->
    <nav class="level">
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">{{SessionUser.objects.global.language.waiting}}</p>
          <p class="title">{{progress.pending.length}}</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">{{SessionUser.objects.global.language.in_progress}}</p>
          <p class="title">{{progress.processing.length}}</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">{{SessionUser.objects.global.language.succeeded}}</p>
          <p class="title">{{progress.completed.length}}</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">{{SessionUser.objects.global.language.failed}}</p>
          <p class="title">{{progress.failed.length}}</p>
        </div>
      </div>
      <div class="level-item has-text-centered">
        <div>
          <p class="heading">{{SessionUser.objects.global.language.total}}</p>
          <p class="title">{{progress.total}}</p>
        </div>
      </div>
    </nav>
  </div>
</template>

<style scoped>

</style>