<script setup lang="ts">
import DynTable from "@/components/tableaux/DynTable.vue";
import { useConfigStore } from "@/stores/config";
import { onMounted, computed } from "vue";
import { useRoute } from "vue-router";
import MarkdownFile from "../components/MarkdownFile.vue";
import { elementsFields, terrainsFields } from "@/data/fields";

const store = useConfigStore();
const route = useRoute();

onMounted(() => {
  store.loadJdr(`${route.params.jdr}`);
});

const elements = computed(() => {
  return store.jdrConfig?.elements ?? [];
});
</script>

<template>
  <main>
    <MarkdownFile :path="`rules/magie/elements`" :order="1">
      <DynTable
        :fields="elementsFields"
        :files="elements"
        category="elements"
      />
    </MarkdownFile>
    <MarkdownFile :path="`rules/magie/terrains`" :order="2">
      <DynTable
        :fields="terrainsFields"
        :files="elements"
        category="elements"
      />
    </MarkdownFile>
  </main>
</template>
