<script setup>
import { ref } from 'vue'
import PageTitle from "@/components/global/PageTitle.vue";
import CategoriesPagination from "@/components/displays/pagination/models/SuperUserDashboard/CategoriesPagination.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const isLoading = ref(false);

/**
 * Refresh the data
 * This essentially just sets the isLoading value to true for 1 second, to force a reload of the data in the pagination component.
 */
const refreshData = () => {
  isLoading.value = true;
  setTimeout(() => {
    isLoading.value = false;
  }, 1000);
}
</script>

<template>
  <div>
    <PageTitle :title="SessionUser.objects.categories.meta.title" :subtitle="SessionUser.objects.categories.meta.description">
      <template #buttons>
        <button class="button is-dark" @click="SessionUser.objects.categories.showCreateObjectForm(refreshData)">
          <span class="icon">
            <i class="fas fa-plus"></i>
          </span>
          <span>Opret {{ SessionUser.objects.categories.meta.labels.single }}</span>
        </button>
      </template>
    </PageTitle>
    <CategoriesPagination auto-load="true" v-if="!isLoading" />
  </div>
</template>

<style scoped>

</style>