<template>
  <div>
    <add-content-block-button></add-content-block-button>

    <div class="content-block" :class="specialClass">
      <h4>{{contentBlock.title}}</h4>
      <h4>{{contentBlock.id}}</h4>

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

    </div>
  </div>

</template>

<script>
  import TextBlock from '@/components/content-blocks/TextBlock.vue';
  import BasicKnowledgeWidget from '@/components/content-blocks/BasicKnowledgeWidget.vue';
  import Task from '@/components/content-blocks/Task.vue';
  import ImageBlock from '@/components/content-blocks/ImageBlock.vue';
  import StudentEntry from '@/components/content-blocks/StudentEntry.vue';
  import AddContentBlockButton from '@/components/AddContentBlockButton';

  export default {
    props: ['contentBlock'],

    components: {
      'text_block': TextBlock,
      'basic_knowledge': BasicKnowledgeWidget,
      'student_entry': StudentEntry,
      'image_block': ImageBlock,
      Task,
      AddContentBlockButton
    },

    computed: {
      specialClass() {
        return `content-block--${this.contentBlock.type.toLowerCase()}`
      }
    }
  }
</script>

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

  .content-block {
    margin-bottom: 2.5em;

    &--yellow {
      background-color: rgba($color-accent-1, 0.15);
      border: 1px solid $color-accent-1;
      padding: 15px;

      /deep/ .button {
        border-color: $color-accent-1;
      }
    }

    /deep/ p {
      line-height: 1.5;
      margin-bottom: 1em;

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

  }
</style>
