<template>
  <div :class="specialContainerClass" class="container skillbox layout">
    <navigation-sidebar />
    <profile-sidebar />
    <header-bar class="header layout__header" v-if="showHeader" />

    <router-view class="layout__content" :key="$route.fullPath" />
    <default-footer class="layout__footer" v-if="enableFooter" />
  </div>
</template>

<script>
import HeaderBar from '@/components/HeaderBar';
import ProfileSidebar from '@/components/profile/ProfileSidebar';
import DefaultFooter from '@/layouts/DefaultFooter';
import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';

export default {
  components: {
    HeaderBar,
    ProfileSidebar,
    NavigationSidebar,
    DefaultFooter,
  },

  computed: {
    showFilter() {
      return this.$route.meta.filter;
    },
    showHeader() {
      return !this.$route.meta.hideHeader;
    },
    specialContainerClass() {
      let cls = this.$store.state.specialContainerClass;
      let metaClass = this.$route.meta.pageClass;
      let classes = [{ 'skillbox--show-filter': this.showFilter }];
      if (cls) {
        classes.push(`layout--${cls}`);
      }
      if (metaClass) {
        classes.push(`layout--${metaClass}`);
      }
      return classes;
    },
    enableFooter() {
      return this.$flavor.showFooter && (!this.$route.meta || !this.$route.meta.hideFooter);
    },
  },
};
</script>
