<template>
  <div :class="['split-view', {'split-view--illustration': illustration}]">
    <div :class="['split-view__illustration', illustrationAlignment]">
      <component :is="illustration"/>
    </div>
    <div class="split-view__content">
      <router-view/>
    </div>
  </div>
</template>

<script>
  import ContentsIllustration from '@/components/illustrations/ContentsIllustration';
  import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
  import RoomsIllustration from '@/components/illustrations/RoomsIllustration';
  import HelloIllustration from '@/components/illustrations/HelloIllustration';

  export default {
    components: {
      contents: ContentsIllustration,
      portfolio: PortfolioIllustration,
      rooms: RoomsIllustration,
      hello: HelloIllustration
    },

    computed: {
      illustration() {
        return this.$route.meta.illustration;
      },
      illustrationAlignment() {
        return this.$route.meta.illustrationAlign ? `split-view__illustration--${this.$route.meta.illustrationAlign}` : '';
      }
    },
  };
</script>

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

  .split-view {
    background-color: $color-brand;

    display: flex;
    position: relative;
    width: 100%;
    min-height: 100vh;

    &--illustration {
      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 50%;
        background: $color-brand-dark;
      }
    }

    &__illustration {
      width: 30vw;
      min-width: 400px;
      align-self: center;
      background-color: $color-brand;
      z-index: 1;
      display: none;

      &--top {
        align-self: center;
        margin-top: -400px;
      }

      & > svg {
        max-width: 300px;
        max-height: 400px;
      }

      @include desktop {
        display: flex;
        justify-content: center;
      }
    }

    &__content {
      background-color: $color-white;
      padding: $medium-spacing;
      display: flex;
      flex-direction: column;
      z-index: 1;
      width: 100%;

      @include desktop {
        padding: 2*$large-spacing;
      }
    }

    &__logo {
      width: 300px;
      height: 50px;
      margin-bottom: $large-spacing;

      @include desktop {
        margin-bottom: 70px;
      }
    }

    &__page-subheading {
      @include regular-text;
      color: $color-brand;
      margin-bottom: $small-spacing;
    }

    &__page-heading {
      @include heading-2;
      color: $color-brand;
      margin-bottom: 2*$large-spacing;
    }

    &__heading {
      @include heading-2;
      margin-bottom: $small-spacing;
    }

    &__claim {
      @include heading-2;
      margin-bottom: 70px;
    }

    &__paragraph {
      @include regular-text;
      margin-bottom: $medium-spacing;

      &:last-of-type {
        margin-bottom: 2*$large-spacing;
      }
    }

    &__button {
      @include regular-text;
      flex-grow: 0;
      align-self: flex-start;
      min-width: 150px;
      display: inline-flex;
      box-sizing: border-box;
      justify-content: center;
      margin-bottom: $large-spacing;
      cursor: pointer;
    }

    &__secondary-link {
      @include inline-title;
      cursor: pointer;

      @include desktop {
        margin-top: auto;
      }
    }
  }
</style>
