.mp-sh-viz-container
  - const isPositive = $helpers.isPositive()
  - const viewValues = $helpers.getValues()
  .mp-sh-shared-header
    | Details
  .mp-sh-shared-body
    mp-formatted-message.mp-sh-viz-message(attrs={parts: JSON.stringify($helpers.getMessage())})
    .mp-sh-viz-bar-container
      .mp-sh-viz-bar-inner(
        style={width: `${viewValues.minPercentage}%`}
        class={'mp-sh-viz-bar-left': true}
      )
        .mp-sh-viz-bar-color(
          class={
            'mp-sh-viz-expected-color': isPositive,
            'mp-sh-viz-actual-color': !isPositive,
          }
        )
          .mp-sh-viz-number
            | #{viewValues.formattedMin}
      .mp-sh-viz-bar-inner(
        style={width: `${viewValues.maxPercentage}%`}
        class={'mp-sh-viz-bar-right': true}
      )
        .mp-sh-viz-bar-color(
          class={
            'mp-sh-viz-expected-color': !isPositive,
            'mp-sh-viz-actual-color': isPositive,
          }
        )
          .mp-sh-viz-number
            | #{viewValues.formattedMax}
    .mp-sh-viz-key
      .mp-sh-viz-color-container
        .mp-sh-viz-actual-color.mp-sh-viz-color-sample
        .mp-sh-viz-color-label Actual
      .mp-sh-viz-color-container
        .mp-sh-viz-expected-color.mp-sh-viz-color-sample
        .mp-sh-viz-color-label Expected