<template>
  <div>
    <main class="d-block flex-grow-1" :class="['main', ($route && $route.name)]">
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
import PageOverviewPage from "./page-overview-page";
import PageEditor from './page-editor.vue';
import NewPageEditor from './new-page-editor.vue';
import CopyPageEditor from './copy-page-editor.vue';
import PageEditorEmptyTranslation from './page-editor-empty-translation.vue';

import { ROUTES } from '../tools/route-utils';

const baseMeta = { browserBack: true };

export default {
  name: 'pages',
  children: [
    {
      path: '',
      name: ROUTES.PAGE_OVERVIEW,
      component: PageOverviewPage,
    },
    {
      path: 'create',
      name: ROUTES.PAGE_CREATE,
      component: NewPageEditor,
      meta: {
        ...baseMeta,
        title: 'Pagina aanmaken'
      }
    },
    {
      path: 'create/:parentId',
      name: ROUTES.PAGE_CREATE_IN,
      component: NewPageEditor,
      meta: baseMeta
    },
    {
      path: 'copy/:id',
      name: ROUTES.PAGE_COPY,
      component: CopyPageEditor,
      meta: {
        ...baseMeta,
        title: 'Pagina kopiëren'
      }
    },
    {
      path: 'empty-translation/:languageRef',
      name: ROUTES.PAGE_EDITOR_EMPTY_TRANSLATION,
      component: PageEditorEmptyTranslation,
      meta: baseMeta
    },
    {
      path: ':id/:versionId',
      name: ROUTES.PAGE_EDITOR_VERSION,
      component: PageEditor,
      props: true,
      meta: baseMeta
    },
    {
      path: ':id',
      name: ROUTES.PAGE_EDITOR,
      component: PageEditor,
      meta: baseMeta
    }
  ]
};
</script>
