{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
}}

<div ...attributes>
  <h2 class="is-size-5 has-text-weight-semibold has-bottom-margin-xs" data-test-title={{@title}}>
    {{@title}}
  </h2>

  {{#if @subText}}
    <div class="title is-8 has-font-weight-normal has-text-grey-dark" data-test-subtext={{@title}}>
      {{@subText}}
    </div>
  {{/if}}

  <Hds::TooltipButton @text="The cluster's current operating state" aria-label="The cluster's current operating state">
    <div class="is-flex-v-centered">
      <Hds::Text::Display
        class="title is-4 has-text-weight-semibold has-top-margin-xxs has-bottom-margin-xxs has-right-padding-sm"
        data-test-replication-status-title={{@title}}
      >
        {{or @state "not set up"}}
      </Hds::Text::Display>

      {{#let (or @clusterStates.glyph "x-circle") as |icon|}}
        <Hds::Icon
          @isInline={{true}}
          @name={{icon}}
          class={{if @clusterStates.isOk "has-text-success" "has-text-danger"}}
          data-test-replication-icon={{icon}}
        />
      {{/let}}
    </div>
  </Hds::TooltipButton>
</div>