.mp-sh-explains-container
  - const segments = $component.alert.explains;
  - const segmentsLength = segments.length;
  - const segmentsType = $helpers.getSegmentsType();
  - const segmentsMessage = $helpers.getSegmentsMessage();
  .mp-sh-shared-header
    | Driving Segments
  .mp-sh-shared-body
    .mp-sh-explains-text
        span.mp-sh-alert-keyword
          | #{segmentsLength} #{segmentsType}
        |  #{segmentsMessage}
    .mp-sh-explains-segments-container
      for segment in segments
        a.mp-sh-explains-link(
          class={'mp-sh-explains-selected': $helpers.isSelectedExplains(segment)}
          attrs={href: segment.generatePermalink()}
          on={click: event => $helpers.handleClickSegmentsLink(event, segment)}
        )
          .mp-sh-explains-type-icon
            svg-icon(attrs={icon: $helpers.getIcon(segment)})
          .mp-sh-explains-link-text
            - const formattedProperty = $helpers.getFormattedProperty(segment.property)
            | #{formattedProperty} = #{segment.propertyValue}
          .mp-sh-explains-strength
            - const strength = $helpers.getSegmentStrength(segment.priority)
            | #{strength}