<template>
  <div class="objective-group">

    <h4>{{group.displayTitle}}</h4>

    <ul class="objective-group__objective-list">
      <objective class="objective-group__objective" v-for="objective in group.objectives" :key="objective.id"
                 :objective="objective" :school-class="currentFilter">
      </objective>
    </ul>
    <add-content-button :parent="group" v-if="editModule">
    </add-content-button>
  </div>

</template>

<script>
  import VisibilityAction from '@/components/visibility/VisibilityAction';
  import Objective from '@/components/objective-groups/Objective';
  import EyeIcon from '@/components/icons/EyeIcon';
  import PenIcon from '@/components/icons/PenIcon';

  import ME_QUERY from '@/graphql/gql/meQuery.gql';
  import AddContentButton from '@/components/AddContentButton';

  import {mapGetters} from 'vuex';

  export default {
    props: {
      group: {
        required: true,
        type: Object
      }
    },

    components: {
      AddContentButton,
      VisibilityAction,
      Objective,
      EyeIcon,
      PenIcon
    },

    apollo: {
      me: {
        query: ME_QUERY,
      },
    },

    computed: {
      ...mapGetters(['editModule']),
      canManageContent() {
        return this.me.permissions.includes('users.can_manage_school_class_content');
      },
      currentFilter() {
        return this.me.selectedClass;
      },
    },

    methods: {
      editObjectiveGroup() {
        this.$store.dispatch('editObjectiveGroup', this.group.id);
      }
    }
  }
</script>

<style scoped lang="scss">
  .objective-group {
    position: relative;

    &__actions {
      position: absolute;
      left: -70px;
      top: -4px;
      display: grid;
    }

  }
</style>
