<script setup>
import Pad from "./Pad.vue";
import { ref, watch } from "vue";
import { useGraphQlOperation } from "../../composables/graphqlOperation";
const props = defineProps({
  templateId: { type: String, required: true },
  cache: { type: [Boolean, Number], required: false, default: false }
});
const currentTemplate = ref({});
watch(() => props.templateId, (newValue) => {
  useGraphQlOperation("Query", "systemTemplateById", ["template", "templateScript"], { id: newValue }, props.cache).then((result) => {
    currentTemplate.value = result;
  }).catch((_error) => {
    currentTemplate.value = {};
  });
}, { immediate: true });
</script>

<template>
  <FormPad v-bind="$attrs" :template="currentTemplate.template" :template-script="currentTemplate.templateScript" />
</template>
