<template>
  <div class="add-objective-group-button" @click="addObjectiveGroup()">
    <add-icon class="add-objective-group-button__icon"></add-icon>
    <div class="add-objective-group-button__text">Zusätzlich Lernziele für «{{typeDescription}}» erfassen</div>
  </div>
</template>

<script>
  import AddIcon from '@/components/icons/AddIcon';

  export default {
    props: ['type', 'module'],

    components: {
      AddIcon
    },

    computed: {
      typeDescription() {
        if (this.type === 'society') {
          return 'Gesellschaft'
        }
        return 'Sprache & Kommunikation';
      }
    },

    methods: {
      addObjectiveGroup() {
        this.$store.dispatch('addObjectiveGroup', {
          module: this.module,
          type: this.type
        });
      }
    }
  }
</script>

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

  .add-objective-group-button {
    display: none;
    grid-template-columns: 45px auto;
    align-items: center;
    margin-top: -20px;
    margin-bottom: 35px;
    cursor: pointer;

    @include desktop {
      display: grid;
    }

    &__icon {
      width: 25px;
      height: 25px;
      fill: $color-grey;
    }

    &__text {
      color: $color-grey;
      font-family: $sans-serif-font-family;
    }
  }
</style>
