<template>
  <MainTemplate title="Template-Verwendung">
    <template #main>
      <TemplateUsageListItem v-for="usage in templateUsages" :key="usage.scope" :templateUsage="usage" />
    </template>
  </MainTemplate>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useTemplateUsageStore } from "@/stores/admin/configuration/templateUsage";
import TemplateUsageListItem from "@/components/admin/configuration/templateUsage/TemplateUsageListItem.vue";
import { useTemplateStore } from "@/stores/admin/configuration/template";
</script>

<script lang="ts">
export default defineComponent({
  computed: {
    ...mapState(useTemplateUsageStore, ["templateUsages"]),
  },
  mounted() {
    this.fetchTemplateUsages();
    this.fetchTemplates();
  },
  methods: {
    ...mapActions(useTemplateUsageStore, ["fetchTemplateUsages"]),
    ...mapActions(useTemplateStore, ["fetchTemplates"]),
  },
});
</script>
