<div
  class="selectable-card is-rounded card-container {{if this.hasErrorClass 'has-error-border'}}"
  data-test-replication-secondary-card
>
  {{! Check if Status or Primary Cluster Card }}
  {{#if (eq this.title "Status")}}
    <h3 class="title is-5 grid-item-top-left card-title">
      {{this.title}}
    </h3>
    <div class="grid-item-left">
      {{#if (get (cluster-states this.state) "isOk")}}
        <h6 class="title is-6">
          state
        </h6>
        <p class="has-text-grey is-size-8">
          How this cluster is communicating with others at this moment.
        </p>
      {{else}}
        <h6 class="has-text-danger" data-test-error>
          state
        </h6>
        <AlertInline @type="danger" @message="Please check your server logs." />
      {{/if}}
    </div>
    <div class="grid-item-right">
      {{#if (eq this.connection "transient_failure")}}
        <h6 class="title is-6 has-text-danger" data-test-error>
          connection_state
        </h6>
        <AlertInline
          @type="danger"
          @message="There has been some transient failure. Your cluster will eventually switch back to connection and try to establish a connection again."
        />
      {{else if (eq this.connection "shutdown")}}
        <h6 class="title is-6 has-text-danger" data-test-error>
          connection_state
        </h6>
        <AlertInline
          @type="danger"
          @message="Your connection has shut down. This may be because the application explicitly requested a shutdown or a non-recoverable error has happened during attempts to communicate."
        />
      {{else}}
        <h6 class="title is-6">
          connection_state
        </h6>
        <p class="has-text-grey is-size-8">
          The health of the connection between this cluster and others.
        </p>
      {{/if}}
    </div>
    <h2 class="title is-3 grid-item-bottom-left" data-test-state>
      {{this.state}}
      {{#if this.inSyncState}}
        <ToolTip @verticalPosition="above" as |T|>
          <T.Trigger>
            <Icon @name="check-circle" class="has-text-success" data-test-glyph />
          </T.Trigger>
          <T.Content @defaultClass="tool-tip">
            <div class="box">
              Everything is in sync
            </div>
          </T.Content>
        </ToolTip>
      {{/if}}
    </h2>
    <h2 class="title is-3 grid-item-bottom-right" data-test-connection>
      {{this.connection}}
    </h2>
    <div class="grid-item-bottom-row">
      <h6 class="title is-6">
        last_remote_wal
      </h6>
      <p class="has-text-grey is-size-8">
        The last WAL index that the secondary received from the primary. Updates every 10 seconds.
      </p>
      <h2 class="title is-3">
        {{format-number this.lastRemoteWAL}}
      </h2>
    </div>
  {{else}}
    <div class="grid-item-top-left">
      <h3 class="title is-5 card-title">
        {{this.title}}
      </h3>
    </div>
    {{#if (and this.primaryUiUrl this.knownPrimaryClusterAddrs)}}
      <div class="grid-item-top-right">
        <ExternalLink @href={{concat this.primaryUiUrl "/ui/"}} class="toolbar-link" data-test-primary-link>
          View primary cluster
          <Icon @name="chevron-right" />
        </ExternalLink>
      </div>
    {{/if}}
    <div class="grid-item-second-row">
      <h6 class="title is-6">
        known_primary_cluster_addrs
      </h6>
      <p class="has-text-grey">
        A list of all the nodes in the primary's cluster. This value is updated every ten seconds.
      </p>
    </div>
    <div class="grid-item-third-row">
      {{#if (is-empty this.knownPrimaryClusterAddrs)}}
        <EmptyState
          @title="No known_primary_cluster_addrs"
          @message="These addresses are used by the secondary to communicate with the primary cluster. Should always be non-zero in a functioning replication setup."
        >
          <DocLink @path="/vault/tutorials/monitoring/monitor-replication">
            Learn more
          </DocLink>
        </EmptyState>
      {{else}}
        <InfoTable @title="Known Primary Cluster Addrs" @header="cluster_addr" @items={{this.knownPrimaryClusterAddrs}} />
      {{/if}}
    </div>
  {{/if}}
</div>