<template>
  <div class="module-page">
    <module-navigation v-if="showNavigation" />
    <module-sub-navigation v-if="showSubNavigation" />
    <router-view/>
  </div>
</template>

<script>
  import ModuleNavigation from '@/components/modules/ModuleNavigation.vue';
  import ModuleSubNavigation from '@/components/modules/ModuleSubNavigation.vue';

  export default {
    components: {
      ModuleNavigation,
      ModuleSubNavigation
    },

    computed: {
      showNavigation() {
        return !this.$route.meta.hideNavigation && !this.$route.meta.showSubNavigation;
      },
      showSubNavigation() {
        return !!this.$route.meta.showSubNavigation;
      }
    }
  };
</script>

<style scoped lang="scss">
  @import "~styles/helpers";

  .module-page {
    display: flex;
    @supports (display: grid) {
      display: grid;
    }
    justify-items: center;

    grid-auto-rows: max-content;

    @include desktop {
      grid-template-columns: 1fr;
    }

    /*
     * For IE10+
     */
    -ms-grid-columns: 2fr 6fr 2fr;

    & > :nth-child(1) {
      -ms-grid-column: 1;
      -ms-grid-column-align: center;
    }
    & > :nth-child(2) {
      -ms-grid-column: 2;
      -ms-grid-column-align: center;
    }
  }
</style>
