<template>
  <div>
    <h1 class="ui header">
      <div class="content">
        {{ currentFeature.title || currentFeature.feature_id }}
        <div class="ui icon right floated compact buttons">
          <router-link
            v-if="permissions && permissions.can_create_feature"
            :to="{
              name: 'ajouter-signalement',
              params: {
                slug_type_signal: $route.params.slug_type_signal,
              },
            }"
            class="ui button button-hover-orange"
            data-tooltip="Ajouter un signalement"
            data-position="bottom left"
          >
            <em class="plus fitted icon" />
          </router-link>
          <router-link
            v-if="
              (permissions && permissions.can_update_feature) ||
                isFeatureCreator ||
                isModerator
            "
            :to="{
              name: 'editer-signalement',
              params: {
                slug_signal: $route.params.slug_signal,
                slug_type_signal: $route.params.slug_type_signal,
              },
            }"
            class="ui button button-hover-orange"
          >
            <em class="inverted grey pencil alternate icon" />
          </router-link>
          <a
            v-if="((permissions && permissions.can_update_feature) || isFeatureCreator) && isOnline"
            id="currentFeature-delete"
            class="ui button button-hover-red"
            @click="isCanceling = true"
          >
            <em class="inverted grey trash alternate icon" />
          </a>
        </div>
        <div class="ui hidden divider" />
        <div class="sub header prewrap">
          {{ currentFeature.description }}
        </div>
      </div>
    </h1>
  </div>
</template>

<script>

import { mapState, mapGetters } from 'vuex';

export default {
  
  name: 'FeatureHeader',

  computed: {
    ...mapState([
      'user',
      'USER_LEVEL_PROJECTS',
      'isOnline',
    ]),
    ...mapState('feature', [
      'currentFeature'
    ]),

    ...mapGetters([
      'permissions',
    ]),

    isFeatureCreator() {
      if (this.currentFeature && this.user) {
        return this.currentFeature.creator === this.user.id;
      }
      return false;
    },

    isModerator() {
      return this.USER_LEVEL_PROJECTS && this.project &&
        this.USER_LEVEL_PROJECTS[this.projectSlug] === 'Modérateur'
        ? true
        : false;
    },
  }

};
</script>