<template>
  <div class="module">
    <h2 class="module__meta-title">{{module.metaTitle}}</h2>
    <h1 class="module__title">{{module.title}}</h1>
    <img src="https://picsum.photos/640/320" alt="" class="module__hero">
    <div class="module__intro" v-html="module.intro">

    </div>

    <h3>Lernziele</h3>
    <objective-group v-for="group in module.objectiveGroups" :key="group.id" :group="group"></objective-group>

    <h3>1.1 Lehrbeginn</h3>
    <h4>Auftrag 1</h4>
    <h4>Das Interview</h4>
    <h4>Tipp</h4>
    <h3>1.2  Die drei Lernorte</h3>
    <h4>Unser Berufsbildungssystem</h4>
    <h5>Die Berufsfachschule</h5>

  </div>
</template>

<script>
  import ObjectiveGroup from '@/components/ObjectiveGroup.vue';

  export default {
    name: 'module',

    components: {
      ObjectiveGroup
    },

    props: {
      module: {
        required: true,
        type: Object
      }
    },

    data() {
      return {
      }
    },

    created() {
      debugger
    }
  }
</script>

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

  .module {
    display: flex;
    justify-self: center;
    width: 640px;
    flex-direction: column;
    padding: 0 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    &__hero {
      margin-bottom: 35px;
      border-radius: 12px;
    }

    &__meta-title {
      font-size: 2.6rem;
      font-weight: 300;
      font-family: $serif-font-family;
    }

    &__intro {
      font-size: 1.5625rem;
      line-height: 1.5;
      margin-bottom: 1em;

      > /deep/ p {
        margin-bottom: 1.5em;
      }
    }
  }
</style>
