<template>
  <div class="project">
    <div class="project__header">
      <h1 class="project__title">Quartalsarbeit: Mein Lehrbetrieb</h1>
      <p class="project__description">
        Das ist eine Beschreibung und kann maximal 200 Zeichen enthalten. Das ist eine Beschreibung und kann maximal 200
        Zeichen enthalten. Das ist eine Beschreibung und kann maximal 200 Zeichen enthalten.
      </p>

      <h2 class="project__objectives-title">Ziele</h2>
      <ul class="project__objectives">
        <li class="project__objective">Ich kann ein Interview mit geeigneten Fragen vorbereiten.</li>
        <li class="project__objective">Ich kann ein Interview führen und auf interessante oder ausweichende
          Antworten näher eingehen.
        </li>
        <li class="project__objective">Ich kann ein mündlich geführtes Interview in Standardsprache
          aufzeichnen.
        </li>
      </ul>

    </div>
    <div class="project__content">
      <add-project-entry class="project__add-entry"></add-project-entry>
      <project-entry></project-entry>
      <project-entry></project-entry>
    </div>
  </div>
</template>

<script>
  import ProjectEntry from '@/components/portfolio/ProjectEntry';
  import AddProjectEntry from '@/components/portfolio/AddProjectEntry';

  export default {

    components: {
      AddProjectEntry,
      ProjectEntry
    },

    created() {
      this.$store.dispatch('setSpecialContainerClass', 'red');
    },

    beforeDestroy() {
      this.$store.dispatch('setSpecialContainerClass', '');
    },
  }
</script>

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

  .project {
    margin-bottom: -50px;

    &__header {
      padding: 30px;
    }

    &__add-entry {
      height: 120px;
    }

    &__description,
    &__objective {
      font-family: $sans-serif-font-family;
    }

    &__description {
      margin-bottom: 30px;
    }

    &__objectives-title {
      font-size: toRem(22px);
      margin-bottom: 8px;
    }

    &__objectives {
      list-style: disc;
      padding-left: 30px;
    }

    &__objective {
      line-height: 1.5;
    }

    &__content {
      background-color: $color-grey--lighter;
      display: grid;
      grid-template-columns: 840px;
      grid-row-gap: 30px;
      justify-content: center;
      padding-top: 30px;
      padding-bottom: 50px;
    }
  }
</style>
