.mp-smart-hub-alert-v2
  - const alertColor = $attrs[`alert-color`];
  if alertColor
    style
      = `mp-detail-card { --top-color: ${alertColor}; }`
  - const hasSelectedExplains= $helpers.hasSelectedExplains();
  - const explainsProperty = hasSelectedExplains ? $component.selectedExplains.property : ``;
  - const explainsPropertyValue = hasSelectedExplains ? $component.selectedExplains.propertyValue : ``;
  mp-detail-card(
    attrs={
      'back-href': hasSelectedExplains ? $helpers.generatePermalink() : ``,
      'back-href-text': hasSelectedExplains ? `Back to anomaly` : ``,
    }
    on={
      'goBack': event => $helpers.handleGoBack(event),
    }
  )
    if hasSelectedExplains
      = $component.child(`mp-smart-hub-explains`, { attrs: {'property': explainsProperty, 'property-value': explainsPropertyValue }, class: {'mp-details-first': true}})
    else
      = $component.child(`mp-smart-hub-summary`, { attrs: {'utc-offset': $attrs['utc-offset']}, class: {'mp-details-first': true}})
      if $helpers.isAnomaly()
        = $component.child(`mp-smart-hub-viz`)
        if $component.getAlert().hasExplains
          = $component.child(`mp-smart-hub-explains`)
    mp-share-button(
      attrs={slot: `actions`, 'data-text': $helpers.getShareLink()}
      on={share: $helpers.handleShared}
    )
    if $helpers.showFeedback()
      mp-smart-hub-feedback-button(
        attrs={slot: `actions`, 'disable': $helpers.isFeedbackDisabled()}
        on={change: $helpers.handleSentFeedback}
      )