<template>
  <div>
    <page-tree :is-open="!($route && $route.name)"></page-tree>
    <main :class="['main', ($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 newPageEditor from './new-page-editor.vue';
  import copyPageEditor from './copy-page-editor.vue';

  export default {
    name: 'pages',
    children: [
      {
        path: ':id',
        name: 'page-editor',
        component: pageEditor
      },
      {
        path: 'page-create-in/:parentId', // must be before sibling with path ':id/:versionId', because 'page-create-in' can be interpreted as ':id'
        name: 'page-create-in',
        component: newPageEditor
      },
      {
        path: 'page-copy-in/:parentId', // must be before sibling with path ':id/:versionId', because 'page-create-in-copy' can be interpreted as ':id'
        name: 'page-copy-in',
        component: copyPageEditor
      },
      {
        path: ':id/:versionId',
        name: 'page-editor-version',
        component: pageEditor,
        props: true
      }
    ],
    components: {
      pageTree
    }
  }
</script>
