<template>
  <MainTemplate>
    <template #topBar>
      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
        <h1 class="font-bold text-xl h-8">Template-Verwendung</h1>
      </div>
    </template>
    <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/templateUsage";
import TemplateUsageListItem from "@/components/admin/settings/templateUsage/TemplateUsageListItem.vue";
import { useTemplateStore } from "@/stores/admin/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>
