<template>
  <div class="layout layout--public public">
    <div class="public__logo">
      <logo/>
    </div>
    <router-view class="public__content layout__content"/>
    <default-footer
      class="skillbox__footer public__footer footer"
      v-if="enableFooter"/>
  </div>
</template>
<script>
  import Logo from '@/components/icons/Logo';
  import DefaultFooter from '@/layouts/DefaultFooter';
  import enableFooter from '@/helpers/footer';

  export default {
    components: {
      Logo,
      DefaultFooter
    },

    computed: {
      enableFooter: enableFooter
    }
  };
</script>

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

  @mixin content-block {
    padding-right: $medium-spacing;
    padding-left: $medium-spacing;
    max-width: 800px;
    min-width: 320px;
    width: 100%;
    margin: 0 auto;
  }

  .logo {
    position: relative;

    width: auto;
    height: 43px;
  }

  .public {
    grid-template-areas: "h" "c" "f";

    &__content {
      @include content-block();
      margin-bottom: $large-spacing;
      width: auto;
    }

    &__logo {
      @include content-block();
      margin-top: $medium-spacing
    }

    &__footer {
      background-color: $color-silver-light;
      display: block;
    }
  }

  .footer {
    padding: $large-spacing $medium-spacing 0;

    &__content {
      @include content-block();
    }
  }
</style>
