<template>
  <div class="objective-group">
    <div class="objective-group__actions">
      <visibility-action :block="group">
      </visibility-action>
      <a @click="editObjectiveGroup()" v-if="group.mine" class="objective-group__action-button">
        <pen-icon class="objective-group__action-icon action-icon"></pen-icon>
      </a>

    </div>

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

    <ul class="objective-group__objective-list">
      <li class="objective-group__objective" v-for="objective in group.objectives" :key="objective.id">
        {{objective.text}}
      </li>
    </ul>
  </div>

</template>

<script>
  import VisibilityAction from '@/components/visibility/VisibilityAction';
  import EyeIcon from '@/components/icons/EyeIcon';
  import PenIcon from '@/components/icons/PenIcon';

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

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

    components: {
      VisibilityAction,
      EyeIcon,
      PenIcon
    },

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

    computed: {
      canManageContent() {
        return this.me.permissions.includes('users.can_manage_school_class_content');
      }
    },

    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>
