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

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

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

</template>

<script>
  import Objective from '@/components/objective-groups/Objective';

  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,
      Objective
    },

    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;
      },
    },
  };
</script>

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

  .objective-group {
    position: relative;
    margin-top: $large-spacing;

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

  }
</style>
