<template>
  <div class="topic">
    <h1 class="topic__title">Berufliche Grundbildung</h1>
    <p class="topic__teaser">
      Die berufliche Grundbildung lehrt Sie, den Arbeitsalltag erfolgreich zu bewältigen, Ihre Fähigkeiten zu entwickeln
      und beruflich flexibel zu sein. Ebenso wichtig ist der Umgang mit verschiedensten Mitmenschen. Eine angemessene
      mündliche Kommunikation erleichtert
      das Zusammenleben und Zusammenarbeiten.
    </p>
    <div class="topic__modules">
      <module-teaser v-for="module in modules" :key="module.id" v-bind="module"></module-teaser>
    </div>
  </div>
</template>

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

  export default {
    components: {
      ModuleTeaser
    },

    data() {
      return {
        modules: [
          {
            id: 1,
            metaTitle: 'Intro',
            title: 'Video',
            description: 'Die Berufsbildung ist ein neuer Lebensabschnitt'
          },
          {
            id: 2,
            metaTitle: 'Modul 1',
            title: 'Mein neues Umfeld',
            description: 'Wie erging es Ihnen am ersten Arbeits- und Schultag?'
          },
          {
            id: 3,
            metaTitle: 'Modul 2',
            title: 'Lehrvertrag',
            description: 'Haben Sie etwas in Ihrem Lehrvertrag noch nicht verstanden?'
          },
          {
            id: 4,
            metaTitle: 'Modul 3',
            title: 'Miteinander reden',
            description: 'Welches war Ihre letzte schwierige Gesprächs- situation?'
          },
          {
            id: 5,
            metaTitle: 'Modul 4',
            title: 'Lerntipps',
            description: 'Wie gehen Sie vor, wenn Sie sich auf eine Prüfung vor-bereiten?'
          }
        ]
      }
    }
  }
</script>

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

  .topic {
    &__teaser {
      color: $color-grey;
      font-size: 1.2rem;
      line-height: 25px;
      width: 90%;
      max-width: 900px;
      font-family: $sans-serif-font-family;
    }

    &__modules {
      margin-top: 40px;
      display: -ms-grid;
      @supports (display: grid) {
        display: grid;
      }
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 40px;
      grid-row-gap: 30px;

    }
  }
</style>
