<template>
  <section class="page">
    <GnPageHeader title="Regular" kicker="Scripts">
      <template #actions>
        <GnBadge variant="primary">{{ scriptsStore.totalRegular }} scripts</GnBadge>
      </template>
    </GnPageHeader>

    <AppLoadingState v-if="scriptsStore.isLoadingRegular" text="Loading regular scripts" />

    <AppErrorState
      v-else-if="scriptsStore.errorRegular"
      title="Regular scripts loading failed"
      :message="scriptsStore.errorRegular.message"
      :retry="scriptsStore.loadRegular"
    />

    <AppEmptyState
      v-else-if="scriptsStore.regular.length === 0"
      title="No regular scripts"
      message="No regular scripts registered."
    />

    <div v-else class="devices-panel">
      <ScriptTable
        :scripts="scriptsStore.regular"
        scriptType="regular"
        :showArea="true"
        :showScope="true"
        :showFilename="true"
        :showActions="true"
        caption="Regular scripts"
      />
    </div>
  </section>
</template>

<script setup>
import { onMounted } from "vue";
import { useScriptsStore } from "../../../stores/scripts";
import { useAreasStore } from "../../../stores/areas";
import { GnPageHeader, GnBadge } from "gnexus-ui-kit/vue";
import AppEmptyState from "../../../components/feedback/AppEmptyState.vue";
import AppErrorState from "../../../components/feedback/AppErrorState.vue";
import AppLoadingState from "../../../components/feedback/AppLoadingState.vue";
import ScriptTable from "../../../components/script/ScriptTable.vue";

const scriptsStore = useScriptsStore();
const areasStore = useAreasStore();

onMounted(() => {
  scriptsStore.loadRegular();
  if (areasStore.areas.length === 0) {
    areasStore.loadAreas();
  }
});
</script>

<style scoped>
</style>