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

    <!-- eslint-disable vue/no-v-html -->
    <div
      class="instrument__intro intro"
      data-cy="instrument-intro"
      v-html="instrument.intro"
    />

    <content-component
      :component="component"
      :root="instrument.slug"
      :parent="instrument"
      :bookmarks="instrument.bookmarks"
      :notes="instrument.notes"
      v-for="component in instrument.contents"
      :key="component.id"
    />
  </div>
</template>

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

  const ContentComponent = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent');

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

    components: {
      ContentComponent
    },

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

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

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

    & /deep/ {
      & p {
        margin-bottom: $large-spacing;
      }

      & p:last-child {
        margin-bottom: 0;
      }

      & ul {
        padding-left: 25px;
      }

      & p + ul {
        margin-top: -30px;
      }

      & li {
        list-style: disc;
        line-height: 1.5;
      }

      & b {
        font-weight: 600;
      }

      .brand {
        color: $color-brand;
        font-weight: 600;
      }

      .secondary {
        color: $color-accent-2;
        font-weight: 600;
      }
    }
  }
</style>
