{{#if this.isMenu}}
  {{! this is the status menu }}
  <div class="level is-mobile">
    <div class="is-flex-1">
      {{#if this.replicationUnsupported}}
        Unsupported
      {{else if this.replicationEnabled}}
        <div>
          {{concat (if (eq this.mode "performance") "Performance " "Disaster Recovery ") (capitalize this.modeForUrl)}}
        </div>
        {{#if this.secondaryId}}
          <small>
            <code>
              {{this.secondaryId}}
            </code>
          </small>
        {{/if}}
        <small>
          <code>
            {{this.clusterIdDisplay}}
          </code>
        </small>
      {{else if (and (eq this.mode "performance") (not (has-feature "Performance Replication")))}}
        Learn more
      {{else if this.auth.currentToken}}
        Enable
        {{if (eq this.mode "performance") "Performance" "Disaster Recovery"}}
      {{else}}
        <span class="has-text-grey-light">
          {{if (eq this.mode "performance") "Performance" "Disaster Recovery"}}
        </span>
      {{/if}}
    </div>
    <div class="level-right">
      {{#if this.replicationEnabled}}
        {{#if (cluster-states this.modeState)}}
          <span class={{if (get (cluster-states this.modeState) "isOk") "has-text-success" "has-text-danger"}}>
            <Icon @name={{get (cluster-states this.modeState) "glyph"}} />
          </span>
        {{else if this.syncProgress}}
          <progress value={{this.syncProgressPercent}} max="100" class="progress is-small is-narrow is-info">
            {{this.syncProgress.progress}}
            of
            {{this.syncProgress.total}}
            keys
          </progress>
        {{/if}}
      {{else}}
        <Icon @name="minus-circle" aria-label="Replication not enabled" class="has-text-grey-light" />
      {{/if}}
    </div>
  </div>
{{else}}
  {{! this is the replication index page }}
  <div class="level">
    <div class="replication-description level-left">
      <div>
        {{#if (and (eq this.mode "performance") (not (has-feature "Performance Replication")))}}
          <p>
            Performance Replication is a feature of Vault Enterprise Premium.
          </p>
          <p class="has-text-centered">
            <ExternalLink
              @href="https://hashicorp.com/products/vault/trial?source=vaultui_Performance%20Replication"
              class="button is-ghost has-icon-right"
              data-test-upgrade-link
            >
              Learn more
              <Chevron />
            </ExternalLink>
          </p>
        {{else if this.replicationEnabled}}
          <h6 class="title is-6 is-uppercase">
            Enabled
          </h6>
          <div class="detail-tags">
            <span class="has-text-grey">
              {{capitalize this.modeForUrl}}
            </span>
            {{#if this.secondaryId}}
              <span class="tag is-light has-text-grey-dark">
                <code>
                  {{this.secondaryId}}
                </code>
              </span>
            {{/if}}
            <span class="tag is-light has-text-grey-dark">
              <code>
                {{this.clusterIdDisplay}}
              </code>
            </span>
          </div>
        {{/if}}
        <p class="help has-text-grey-dark">
          {{replication-mode-description this.mode}}
        </p>
      </div>
    </div>
    <div class="level-right">
      {{#if this.replicationDisabled}}
        <LinkTo @route="mode.index" @models={{array this.cluster.name this.mode}} class="button is-primary">
          Enable
        </LinkTo>
      {{else}}
        <LinkTo @route="mode.index" @models={{array this.cluster.name this.mode}} class="button is-secondary">
          Details
        </LinkTo>
      {{/if}}
    </div>
  </div>
{{/if}}