<template>
  <div class="container skillbox" :class="specialContainerClass">
    <header-bar class="header skillbox__header">
    </header-bar>

    <mobile-header class="header skillbox__header skillbox__header--mobile"></mobile-header>

    <router-view class="skillbox__content"></router-view>
    <footer class="skillbox__footer">Footer</footer>
  </div>
</template>

<script>
  import HeaderBar from '@/components/HeaderBar';
  import MobileHeader from '@/components/MobileHeader';

  export default {
    components: {
      HeaderBar,
      MobileHeader
    },

    computed: {
      showFilter() {
        return this.$route.meta.filter;
      },
      specialContainerClass() {
        let cls = this.$store.state.specialContainerClass;
        return [cls ? `skillbox--${cls}` : '', {'skillbox--show-filter': this.showFilter}]
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .skillbox {
    margin: 0 auto;
    width: 100%;
    @supports (display: grid) {
      display: grid;
    }
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    grid-auto-rows: 1fr;

    grid-template-areas: "h" "c";
    padding-bottom: 50px;

    &--show-filter {
      grid-template-rows: auto auto 1fr;
      -ms-grid-rows: 50px 50px 30px 1fr; // 1 extra row for gap
      grid-template-areas: "h" "." "c";
    }

    /*
     * For IE10+
     */

    &--show-filter &__content {
      -ms-grid-row: 4;
      -ms-grid-column: 1;
    }

    &--show-filter &__filter-bar {
      -ms-grid-row: 2;
      -ms-grid-column: 1;
    }

    /*
     * For IE10+
     */
    display: -ms-grid;
    -ms-grid-rows: 50px 30px auto; // 1 extra row for gap
    -ms-grid-columns: 1fr;

    @include skillbox-colors;

    &__header {
      grid-area: h;
      -ms-grid-row: 1;
    }

    &__content {
      -ms-grid-row: 3;
      -ms-grid-column: 1;
    }

    &__footer {
      grid-area: f;
      display: none;
    }

    /*
     * For IE10+
     */
    & > :nth-child(2) {

    }

    & > :nth-child(3) {
      -ms-grid-row: 4;
      -ms-grid-column: 1;
    }
  }
</style>
