<template>
  <div class="editor container" v-if="item">
    <main class="card">
      <div class="card-body">
        <!-- Custom editor (C# CmsPageVersion or CmsItem (SingleTonItem) with CustomEditor attribute), else fallback to default 'schema-editor' -->
        <component :is="schema.format || $options.components.schemaEditor" v-model="item" :schema="schema"></component>
      </div>
    </main>
  </div>
</template>

<style lang="scss" scoped>
  .editor {
    &::after {
      content: ' ';
      display: block;
      clear: both;
    }
  }
</style>

<script>
  import schemaEditor from '../schema/schema-editor.vue';

  export default {
    docs: `Kiest het juiste component op basis van het CustomEditor attribuut voor een CmsPageVersion of CmsItem (SingletonItem).`,
    props: {
      item: {
        type: Object,
        required: true
      },
      schema: {
        type: Object,
        required: true,
        docs: `JSON schema object`
      }
    },
    components: {
      schemaEditor
    }
  }
</script>
