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

<Hds::Card::Container
  @hasBorder={{true}}
  class="has-padding-m 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")}}
        <h4 class="title is-6">
          state
        </h4>
        <p class="has-text-grey is-size-8">
          How this cluster is communicating with others at this moment.
        </p>
      {{else}}
        <h4 class="has-text-danger" data-test-error>
          state
        </h4>
        <AlertInline @type="danger" @message="Please check your server logs." />
      {{/if}}
    </div>
    <div class="grid-item-right">
      {{#if (eq this.connection "transient_failure")}}
        <h4 class="title is-6 has-text-danger" data-test-error>
          connection_state
        </h4>
        <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")}}
        <h4 class="title is-6 has-text-danger" data-test-error>
          connection_state
        </h4>
        <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}}
        <h4 class="title is-6">
          connection_state
        </h4>
        <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>
    <p class="title is-3 grid-item-bottom-right" data-test-connection>
      {{this.connection}}
    </p>
    <div class="grid-item-bottom-row">
      <p class="title is-6">
        last_remote_wal
      </p>
      <p class="has-text-grey is-size-8">
        The last WAL index that the secondary received from the primary. Updates every 10 seconds.
      </p>
      <p class="title is-3">
        {{format-number this.lastRemoteWAL}}
      </p>
    </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">
      <h4 class="title is-6">
        known_primary_cluster_addrs
      </h4>
      <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)}}
        <Hds::ApplicationState data-test-empty-state as |A|>
          <A.Header @title="No known_primary_cluster_addrs" />
          <A.Body
            @text="These addresses are used by the secondary to communicate with the primary cluster. Should always be non-zero in a functioning replication setup."
          />
          <A.Footer @hasDivider={{true}} as |F|>
            <F.LinkStandalone
              @icon="help"
              @text="Learn more about replication"
              @href={{doc-link "/vault/tutorials/monitoring/monitor-replication"}}
            />
          </A.Footer>
        </Hds::ApplicationState>
      {{else}}
        <Hds::Table @caption="Known Primary Cluster Addrs" data-test-info-table>
          <:head as |H|>
            <H.Tr>
              <H.Th>cluster_addr</H.Th>
            </H.Tr>
          </:head>
          <:body as |B|>
            {{#each this.knownPrimaryClusterAddrs as |item|}}
              <B.Tr>
                <B.Td>{{item}}</B.Td>
              </B.Tr>
            {{/each}}
          </:body>
        </Hds::Table>
      {{/if}}
    </div>
  {{/if}}
</Hds::Card::Container>