<commit_before><template>
  <div v-if="notices.length !== 0" class="border-bottom py-3">
    <div v-b-toggle="collapseId">
      <div :class="[title.includes('Critical') ? 'text-danger' : '']" class="d-flex py-1">
        <h3 class="h4 m-0">{{ title }}</h3>
        <div class="ml-auto">
          <span v-if="unreadCount"> {{ unreadCount }} New </span>
          <font-awesome-icon v-if="!collapseOpen" :icon="faChevronDown" class="align-middle" />
          <font-awesome-icon v-else :icon="faChevronUp" class="align-middle" />
        </div>
      </div>
      <span v-if="!critical && criticalCount !== 0" class="text-muted myuw-text-md">
        {{ criticalCount }} Critical
      </span>
    </div>
    <b-collapse :id="collapseId" ref="collapsible" v-model="collapseOpen" class="mt-3">
      <div
        v-for="(notice, i) in notices"
        :key="i"
        v-observe-visibility="observerConfig(notice)"
        :class="[$mq === 'desktop' ? 'w-75 mx-auto' : '']"
        class="bg-white mb-2 p-3"
      >
        <div class="d-flex">
          <div class="text-muted mb-2 myuw-text-md">{{ notice.category }}</div>
          <div class="ml-auto">
            <span v-if="!notice.is_read">New</span>
            <font-awesome-icon
              v-if="notice.is_critical"
              :icon="faExclamationTriangle"
              class="text-danger"
            />
          </div>
        </div>
        <h4 class="h5 font-weight-bold" v-html="notice.notice_title" />
        <div class="myuw-text-md" v-html="notice.notice_body" />
      </div>
    </b-collapse>
  </div>
</template>

<script>
import {
  faChevronUp,
  faChevronDown,
  faExclamationTriangle,
} from '@fortawesome/free-solid-svg-icons';
import { mapActions } from 'vuex';

export default {
  props: {
    notices: {
      type: Array,<commit_msg>Styles new badge for notice card messages.<commit_after><template>
  <div v-if="notices.length !== 0" class="border-bottom py-3">
    <div v-b-toggle="collapseId">
      <div :class="[title.includes('Critical') ? 'text-danger' : '']" class="d-flex py-1">
        <h3 class="h4 m-0">{{ title }}</h3>
        <div class="ml-auto">
          <span
            v-if="unreadCount"
            :class="[title.includes('Critical') ? 'border-danger' : 'border-secondary']"
            class="mr-2 border rounded-pill px-2 myuw-text-md"
          >
            {{ unreadCount }} new
          </span>
          <font-awesome-icon v-if="!collapseOpen" :icon="faChevronDown" class="align-middle" />
          <font-awesome-icon v-else :icon="faChevronUp" class="align-middle" />
        </div>
      </div>
      <span v-if="!critical && criticalCount !== 0" class="text-muted myuw-text-md">
        {{ criticalCount }} Critical
      </span>
    </div>
    <b-collapse :id="collapseId" ref="collapsible" v-model="collapseOpen" class="mt-3">
      <div
        v-for="(notice, i) in notices"
        :key="i"
        v-observe-visibility="observerConfig(notice)"
        :class="[$mq === 'desktop' ? 'w-75 mx-auto' : '']"
        class="bg-white mb-2 p-3"
      >
        <div class="d-flex">
          <div class="text-muted mb-2 myuw-text-md">{{ notice.category }}</div>
          <div class="ml-auto myuw-text-md">
            <span v-if="!notice.is_read" class="badge badge-warning font-weight-normal"
              >New</span
            >
            <font-awesome-icon
              v-if="notice.is_critical"
              :icon="faExclamationTriangle"
              class="text-danger"
            />
          </div>
        </div>
        <h4 class="h5 font-weight-bold" v-html="notice.notice_title" />
        <div class="myuw-text-md" v-html="notice.notice_body" />
      </div>
    </b-collapse>
  </div>
</template>

<script>
import {
  faChevronUp,
  faChevronDown,
  faExclamationTriangle,
} from '@fortawesome/free-solid-svg-icons';
import { mapActions } from 'vuex';

export default {
  props: {
    notices: {
      type: Array,
{'fraction_non_alphanumeric': 0.18292066700353715, 'fraction_numerical': 0.008590197069226882, 'mean_word_length': 2.2557565789473686, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 71, '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': '3132619', 'n_tokens_mistral': 1386, 'n_tokens_neox': 1352, 'n_words': 238}