<template>
  <div class="basic-knowledge">
    <h1 class="basic-knowledge__title">{{basicKnowledge.title}}</h1>

    <component v-for="component in basicKnowledge.contents"
               :key="component.id"
               :is="component.type"
               v-bind="component">
    </component>

  </div>
</template>

<script>
  import BASIC_KNOWLEDGE_QUERY from '@/graphql/gql/basicKnowledgeQuery.gql';

  import TextBlock from '@/components/content-blocks/TextBlock';
  import BasicKnowledgeWidget from '@/components/content-blocks/BasicKnowledgeWidget';
  import ImageBlock from '@/components/content-blocks/ImageBlock';
  import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock';
  import VideoBlock from '@/components/content-blocks/VideoBlock';
  import LinkBlock from '@/components/content-blocks/LinkBlock';
  import DocumentBlock from '@/components/content-blocks/DocumentBlock';

  export default {
    apollo: {
      basicKnowledge() {
        return {
          query: BASIC_KNOWLEDGE_QUERY,
          variables: {
            slug: this.$route.params.slug
          }
        }
      }
    },

    components: {
      'text_block': TextBlock,
      'basic_knowledge': BasicKnowledgeWidget,
      'image_block': ImageBlock,
      'image_url_block': ImageUrlBlock,
      'video_block': VideoBlock,
      'link_block': LinkBlock,
      'document_block': DocumentBlock,
    },

    data() {
      return {
        basicKnowledge: {}
      }
    }
  }
</script>

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

  .basic-knowledge {
    &__title {
      font-size: toRem(35px);
      margin-bottom: 40px;
    }

    & /deep/ {
      & h3 {
        font-size: toRem(21px);
        margin-bottom: 30px;
      }
      & h4 {
        font-size: toRem(17px);
        margin-bottom: 20px;
      }
      & h5 {
        font-size: toRem(18px);
        font-family: $serif-font-family;
        margin-bottom: 15px;
        font-weight: 800;
      }
      & p {
        margin-bottom: 40px;
      }
      & ul {
        padding-left: 25px;
      }
      & p + ul {
        margin-top: -30px;
      }
      & li {
        list-style: disc;
        line-height: 1.5;
      }
    }
  }
</style>
