<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';

import { defineAsyncComponent } from 'vue';
const ContentComponent = defineAsyncComponent(() => import('@/components/content-blocks/ContentComponent.vue'));

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/helpers';

.instrument {
  padding-top: 2 * $large-spacing;

  &__title {
    font-size: toRem(35px);
    margin-bottom: $large-spacing;
    line-height: $default-heading-line-height;
    overflow-wrap: break-word;
  }

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

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

    & ul {
      @include list-parent;
    }

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

    & li {
      @include list-child;
      line-height: 1.5;
    }

    & b {
      font-weight: 600;
    }

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

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