<template>
  <div>
    <page-tree></page-tree>
    <main :class="['main', 'pt-0', $route && $route.name]">
      <router-view></router-view>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.main {
  display: block; //just in case: it's a <main>
  padding: 1rem;
}
</style>

<script>
import pageTree from './page-tree.vue';
import pageEditor from './page-editor.vue';
import createPage from './create-page.vue';
import CopyTranslateNewPage from './copy-translate-page.vue';
import CrudOverview from '../crud/crud-overview.vue';
import store from '../stores';

export default {
  name: 'pages',
  children: [
    {
      path: '/',
      component: CrudOverview,
      meta: { module: 'cmsPage' },
      props: () => ({
        module: 'cmsPage',
        crudStore: store.state.cmsPage
      })
    },
    {
      path: 'create-page',
      name: 'create-page',
      component: createPage
    },
    {
      path: 'create-cmspage',
      name: 'create-cmsPage',
      redirect: { name: 'create-page' }
    },
    {
      path: ':id',
      name: 'page-editor',
      component: pageEditor
    },
    {
      path: ':pageId/copy',
      name: 'copy-page',
      component: CopyTranslateNewPage
    },
    {
      path: ':pageId/translate',
      name: 'translate-page',
      component: CopyTranslateNewPage,
      props: { translate: true }
    },
    {
      path: 'create-page/:parentId', // must be before sibling with path ':id/:parentId', because 'create-page' can be interpreted as ':id'
      name: 'create-page-parent',
      component: createPage
    },
    {
      path: 'cmsPage-editor/:id',
      name: 'cmsPage-editor',
      redirect: { name: 'page-editor' }
    },
    {
      path: ':id/:versionId',
      name: 'page-editor-version',
      component: pageEditor,
      props: true
    }
  ],
  components: {
    pageTree
  }
};
</script>
