<commit_before><script>
  import eventHub from '../../event_hub';
  import toggleButton from '../../../vue_shared/components/toggle_button.vue';

  export default {
    components: {
      toggleButton,
    },
    props: {
      loading: {
        type: Boolean,
        required: false,
        default: false,
      },
      subscribed: {
        type: Boolean,
        required: false,
        default: null,
      },
      id: {
        type: Number,
        required: false,
        default: null,
      },
    },
    computed: {
      showLoadingState() {
        return this.subscribed === null || this.loading;
      },
    },
    methods: {
      toggleSubscription() {
        eventHub.$emit('toggleSubscription', this.id);
      },
    },
  };
</script>

<template>
  <div>
    <div class="sidebar-collapsed-icon">
      <i
        class="fa"
        :class="{
          'fa-bell': subscribed,
          'fa-bell-slash': !subscribed,
        }"
        aria-hidden="true"
      >
      </i>
    </div>
    <span class="issuable-header-text hide-collapsed pull-left">
      {{ __('Notifications') }}
    </span>
    <toggle-button
      ref="toggleButton"
      class="pull-right hide-collapsed js-issuable-subscribe-button"
      :is-loading="showLoadingState"
      :value="subscribed"
      @change="toggleSubscription"
    />
  </div>
</template>
<commit_msg>change notification bell icon from font-awesome to gitlab svg<commit_after><script>
  import eventHub from '../../event_hub';
  import icon from '../../../vue_shared/components/icon.vue';
  import toggleButton from '../../../vue_shared/components/toggle_button.vue';

  export default {
    components: {
      icon,
      toggleButton,
    },
    props: {
      loading: {
        type: Boolean,
        required: false,
        default: false,
      },
      subscribed: {
        type: Boolean,
        required: false,
        default: null,
      },
      id: {
        type: Number,
        required: false,
        default: null,
      },
    },
    computed: {
      showLoadingState() {
        return this.subscribed === null || this.loading;
      },
      notificationIcon() {
        return this.subscribed ? 'notifications' : 'notifications-off';
      },
    },
    methods: {
      toggleSubscription() {
        eventHub.$emit('toggleSubscription', this.id);
      },
    },
  };
</script>

<template>
  <div>
    <div class="sidebar-collapsed-icon">
      <icon
        :name="notificationIcon"
        :size="16"
        aria-hidden="true"
        class="sidebar-item-icon is-active"
      />
    </div>
    <span class="issuable-header-text hide-collapsed pull-left">
      {{ __('Notifications') }}
    </span>
    <toggle-button
      ref="toggleButton"
      class="pull-right hide-collapsed js-issuable-subscribe-button"
      :is-loading="showLoadingState"
      :value="subscribed"
      @change="toggleSubscription"
    />
  </div>
</template>

{'fraction_non_alphanumeric': 0.1480978260869565, 'fraction_numerical': 0.0006793478260869565, 'mean_word_length': 1.9627766599597585, 'pattern_counts': {'":': 0, '<': 28, '<?xml version=': 0, '>': 28, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5453514', 'n_tokens_mistral': 870, 'n_tokens_neox': 877, 'n_words': 167}