- const {header, subheader, description, details, metrics, compositionDef} = $helpers.getDisplayData()
.wrapper
  if $helpers.shouldShow()
    .root(
      class={
        delayed: {'tooltip-in': true},
        remove: {'tooltip-out': true, delayRemove},
      }
    )
      .container
        .min-height-wrapper
          .header= header
          if subheader
            .subheader= subheader
          if description
            .description= description
          else
            .description.no-desc No description

          if details && details.length
            .details
              each detail in details
                .detail
                  .icon(class={[detail.icon]: true})
                    svg-icon(attrs={icon: detail.icon})
                  .name= detail.name
                  .value= detail.value

        if metrics && metrics.length
          .metrics.section
            each metric in metrics
              .metric
                .name= metric.name
                .value= metric.value

        if compositionDef && compositionDef.parts
          .composition.section
            .name= compositionDef.name
            .value
              each part in compositionDef.parts
                span(class={highlight: part.highlight})= `${part.label} `

      .learn-more
        span Manage your data with #[a(attrs={href: $helpers.getLexiconUrl()}) Lexicon].