<template>
  <div class="py-4 container">
    <schema-field v-model="version.canonical" :schema="versionSchemaProperties.canonical"></schema-field>
    <schema-field v-model="version.metaTitle" :schema="versionSchemaProperties.metaTitle"></schema-field>
    <schema-field v-model="version.showPostFix" :schema="versionSchemaProperties.showPostFix"></schema-field>
    <schema-field v-model="version.metaDescription" :schema="versionSchemaProperties.metaDescription"></schema-field>
    <schema-field v-model="version.metaIndex" :schema="versionSchemaProperties.metaIndex"></schema-field>
    <schema-field v-model="version.metaFollow" :schema="versionSchemaProperties.metaFollow"></schema-field>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { Schema, Version } from '../types/api';
import { namespace } from 'vuex-class';

const PageStore = namespace('pages');

@Component
export default class PageEditorSeo extends Vue {
  @Prop({ type: Object, required: true }) readonly version!: Version;

  @PageStore.State('schema') readonly schema!: Schema;

  get versionSchemaProperties() {
    return this.schema.properties;
  }
}

</script>
