<PageHeader as |p|>
  <p.top>
    {{! template-lint-configure simple-unless "warn" }}
    {{#unless (or this.isSummaryDashboard this.isSecondary)}}
      <KeyValueHeader @baseKey={{this.baseKey}} @path="vault.cluster.replication-dr-promote" @root={{this.backendCrumb}}>
        <li>
          <span class="sep">
            /
          </span>
          <LinkTo @route="vault.cluster.replication.index">
            Replication
          </LinkTo>
        </li>
      </KeyValueHeader>
    {{/unless}}
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3">
      {{this.title}}
      {{#if this.data.anyReplicationEnabled}}
        <span class="tag is-light has-text-grey-dark" data-test-mode>
          {{if this.isSecondary "secondary" "primary"}}
        </span>
        <span class="tag is-light has-text-grey-dark" data-test-secondaryId>
          {{this.secondaryId}}
        </span>
      {{/if}}
    </h1>
  </p.levelLeft>
</PageHeader>

{{#if this.showTabs}}
  <div class="tabs-container box is-bottomless is-fullwidth is-paddingless has-bottom-margin-l" data-test-tabs>
    <nav class="tabs">
      {{#if this.isSummaryDashboard}}
        <ul>
          <li class="is-active">
            <LinkToExternal @route="replication">Summary</LinkToExternal>
          </li>
        </ul>
      {{else}}
        <ul>
          <LinkTo @route="vault.cluster.replication-dr-promote.details">
            Details
          </LinkTo>
          <LinkTo @route="vault.cluster.replication-dr-promote" @current-when="vault.cluster.replication-dr-promote.index">
            Manage
          </LinkTo>
        </ul>
      {{/if}}
    </nav>
  </div>
{{/if}}