<div class="replication-dashboard box is-sideless is-fullwidth is-marginless" data-test-replication-dashboard>
  {{#if this.isReindexing}}
    <div class="reindexing-alert">
      <AlertBanner
        @title={{concat "Re-indexing in progress" this.reindexingStage}}
        @type="info"
        @progressBar={{this.progressBar}}
        @message={{sanitized-html this.reindexMessage}}
        data-test-isReindexing
      />
    </div>
  {{/if}}
  {{#if this.isSummaryDashboard}}
    <div class="summary-state">
      <h6 class="title is-5 {{if (not (get (cluster-states this.summaryState) 'isOk')) 'has-text-danger'}}" data-test-error>
        state
      </h6>
      {{#if (get (cluster-states this.summaryState) "isOk")}}
        <p class="has-text-grey is-size-8">
          The current operating state of both Disaster Recovery and Performance. This value should be ‘running.’ If the value
          is idle, it indicates an issue and needs to be investigated.
        </p>
      {{else}}
        <AlertInline @type="danger" @message="The cluster is {{this.summaryState}}. Please check your server logs." />
      {{/if}}
      <h2 class="title is-3" data-test-summary-state>
        {{this.summaryState}}
        {{#if (get (cluster-states this.summaryState) "isOk")}}
          <Icon
            @name={{get (cluster-states this.summaryState) "glyph"}}
            class={{if (get (cluster-states this.summaryState) "isOk") "has-text-success" "has-text-danger"}}
            data-test-icon
          />
        {{/if}}
      </h2>
    </div>
    <div class="selectable-card-container summary" data-test-selectable-card-container-summary>
      {{yield (hash card=(component this.componentToRender replicationDetails=this.replicationDetailsSummary))}}
    </div>
  {{else}}
    <div
      class="selectable-card-container {{if this.isSecondary 'secondary' 'primary'}}"
      data-test-selectable-card-container={{if this.isSecondary "secondary" "primary"}}
    >
      {{yield (hash card=(component this.componentToRender replicationDetails=this.replicationDetails))}}
      {{#unless this.isSecondary}}
        {{yield (hash secondaryCard=(component "known-secondaries-card"))}}
      {{/unless}}
    </div>
  {{/if}}
  {{#if this.isSyncing}}
    <div class="syncing-alert">
      <AlertBanner
        @title="Syncing in progress"
        @type="info"
        @showLoading={{true}}
        @message="The cluster is syncing. This happens when the secondary is too far behind the primary to use the normal stream-wals state for catching up."
        data-test-isSyncing
      />
    </div>
  {{/if}}
  {{#unless this.isSummaryDashboard}}
    <ReplicationTableRows @replicationDetails={{this.replicationDetails}} @clusterMode={{this.clusterMode}} />
    <div class="replication helper-text float-right" data-test-replication-doc-link>
      <p class="has-text-grey">
        We have additional time series telemetry that can be found
        <DocLink @path="/vault/tutorials/monitoring/monitor-replication#key-monitoring-metrics">
          in our documentation.
        </DocLink>
      </p>
    </div>
  {{/unless}}
</div>