<template>
  <div class="instrument">
    <h1 class="instrument__title">{{instrument.title}}</h1>

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

  </div>
</template>

<script>
  import INSTRUMENT_QUERY from '@/graphql/gql/instrumentQuery.gql';

  import TextBlock from '@/components/content-blocks/TextBlock';
  import InstrumentWidget from '@/components/content-blocks/InstrumentWidget';
  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';
  import SectionTitleBlock from '@/components/content-blocks/SectionTitleBlock';
  import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
  import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';

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

    components: {
      'text_block': TextBlock,
      'basic_knowledge': InstrumentWidget, // for legacy
      'instrument': InstrumentWidget,
      'image_block': ImageBlock,
      'image_url_block': ImageUrlBlock,
      'video_block': VideoBlock,
      'link_block': LinkBlock,
      'document_block': DocumentBlock,
      'section_title': SectionTitleBlock,
      'subtitle': SubtitleBlock,
      'genially_block': GeniallyBlock
    },

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

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

  .instrument {
    &__title {
      font-size: toRem(35px);
      margin-bottom: 40px;
      line-height: $default-heading-line-height;
    }

    & /deep/ {
      & p {
        margin-bottom: 40px;
      }
      & ul {
        padding-left: 25px;
      }
      & p + ul {
        margin-top: -30px;
      }
      & li {
        list-style: disc;
        line-height: 1.5;
      }
      & b {
        font-weight: 600;
        color: $color-brand;
      }
    }
  }
</style>
