<template>
  <div
    :class="{'hideable-element--greyed-out': hidden}"
    class="objective-group hideable-element"
    v-if="editModule || !hidden">
    <visibility-action
      :block="group"
      :type="type"
      v-if="editModule"/>

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

    <ul class="objective-group__objective-list">
      <objective
        :key="objective.id"
        :objective="objective"
        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 VisibilityAction from '@/components/visibility/VisibilityAction';
  import AddContentButton from '@/components/AddContentButton';

  import me from '@/mixins/me';
  import editModule from '@/mixins/edit-module';

  import {OBJECTIVE_GROUP_TYPE} from '@/consts/types';
  import {hidden} from '@/helpers/visibility';

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

    mixins: [me, editModule],

    components: {
      AddContentButton,
      Objective,
      VisibilityAction
    },

    data() {
      return {
        type: OBJECTIVE_GROUP_TYPE
      };
    },

    computed: {
      hidden() {
        return hidden({
          block: this.group,
          schoolClass: this.schoolClass,
          type: this.type,
        });
      },
    },
  };
</script>

<style scoped lang="scss">
  @import "~styles/helpers";

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

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

  }
</style>
