mixin alert-content()
  .mp-sh-alert-header
    .mp-sh-alert-type-icon(
      class={
        'mp-sh-alert-type-anomaly': !!alert.anomaly,
        'mp-sh-alert-type-contour': !!alert.contour,
      }
    )
      if $helpers.getAlertDirection() === `NEGATIVE`
        include ../assets/anomaly-down.svg
      else
        include ../assets/anomaly-up.svg
    .mp-sh-alert-header-text
      if alert.anomaly
        span.mp-sh-alert-header-alert-type= `Anomaly detected: `
      else if alert.contour
        span.mp-sh-alert-header-alert-type= `Interesting segment detected: `
      span.mp-sh-alert-header-report-type= $helpers.getReportType()
    .mp-sh-alert-remove(
      on={click: ev => $helpers.handleRemoveAlert(ev, alertId)}
    )
      svg-icon(attrs={icon: 'x'})
  .mp-sh-alert-message
    mp-formatted-message(attrs={parts: JSON.stringify(message)})
  .mp-sh-alert-footer
    .mp-sh-alert-footer-time= $helpers.getAlertTime()
    if $helpers.showFeedback()
      mp-smart-hub-feedback-button(
        attrs={ 'disable': $helpers.isFeedbackDisabled() }
        on={ change: $helpers.handleSentFeedback }
      )

div.mp-sh-alert-container(
  on={click: $helpers.handleClickAlert}
)
  if displayContext !== `IN_REPORT`
    a.mp-sh-alert-content(
      attrs={href: $helpers.generatePermalink()}
      class={
        'mp-sh-alert-unread': !isRead,
      }
      on={click: $helpers.handleClickLink}
    )
      +alert-content()
  else
    .mp-sh-alert-content.mp-sh-alert-in-report
      +alert-content()