<template>
  <div
    :class="{'layout--full-width': $route.meta.fullWidth}"
    class="skillbox layout layout--simple">
    <div
      class="close-button"
      @click="back">
      <cross class="close-button__icon"/>
    </div>
    <router-view class="layout__content" />
    <simple-footer
      class="layout__footer"
      v-if="enableFooter"/>
  </div>
</template>

<script>
  import SimpleFooter from '@/layouts/SimpleFooter';
  import enableFooter from '@/helpers/footer';
  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');

  export default {
    components: {
      Cross,
      SimpleFooter
    },

    computed: {
      enableFooter: enableFooter,
    },

    methods: {
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>

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

  .layout {
    &--simple {
      display: -ms-grid;
      @supports (display: grid) {
        display: grid;
      }

      width: 100%;

      @include desktop {
        grid-template-columns: 1fr 640px 1fr;
        grid-template-rows: 60px auto-fill 105px;
        -ms-grid-columns: 1fr 640px 1fr;

        & > :nth-child(2) {
          grid-column: 2;
          -ms-grid-column: 2;
        }
      }
    }

    $parent: &;

    &--full-width {
      #{$parent}__content {
        grid-column: 1 / span 3;
        grid-row: 1 / span 2;
      }
    }

    &__footer {
      @include desktop {
        grid-column: 1 / span 3;
      }
    }
  }

  .close-button {
    justify-self: end;
    cursor: pointer;

    display:flex;
    justify-content:end;

    @include desktop {
      grid-column: 3;
      grid-row: 1;
      -ms-grid-column: 3;
      -ms-grid-row: 1;
      margin-right: $medium-spacing;
      margin-top: $medium-spacing;
    }
  }
</style>
