.mp-sh-notif-notification
  if $component.getAlert().hasExplains
    .mp-sh-notif-explains-indicator
      .mp-sh-notif-highlight-tag
        svg-icon(attrs={icon: 'idea'})
        .mp-sh-notif-highlight-tag-text Highlight
      .mp-sh-notif-explains-indicator-text We have identified an explanation for this anomaly
  .mp-sh-notif-container(
    class={'mp-sh-notif-last-item': $attrs[`last-item`]}
    on={click: event => $helpers.viewFullAlert(event)}
  )
    if !$component.getAlert().isRead
      .mp-sh-notif-unread-indicator
    .mp-sh-notif-header
      if $component.getAlert().anomaly
        | Anomaly detection
      else
        | Interesting segment
      .mp-sh-notif-spacer
      .mp-sh-notif-relative-timestamp= $component.relativeTimestamp
      .mp-sh-notif-remove(
        on={click: event => $helpers.handleRemoveAlert(event)}
      )
        svg-icon(attrs={icon: 'x'})
    .mp-sh-notif-body
      mp-formatted-message(attrs={parts: JSON.stringify($component.message)})
      if $component.getAlert().hasExplains
        mp-formatted-message.mp-sh-notif-explains(attrs={parts: JSON.stringify($component.explainsMessage)})
    .mp-sh-notif-actions
      .mp-sh-notif-detail-link
        .mp-sh-notif-detail-link-label View details
        svg-icon(attrs={icon: 'arrow-right'})
      if $helpers.showFeedback()
        mp-smart-hub-feedback-button(
          attrs={'disable': $helpers.isFeedbackDisabled()}
          on={change: $helpers.handleSentFeedback}
        )