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

<section class="section">
  <div class="container is-widescreen">
    {{#if (and (eq this.model.drMode "secondary") (eq this.model.drModeInit "primary"))}}
      <LayoutLoading />
    {{else}}
      {{#if this.model.replicationAttrs.replicationEnabled}}
        <PageHeader as |p|>
          <p.top>
            <Hds::Breadcrumb>
              <Hds::Breadcrumb::Item @text="Replication" @route="index" data-test-replication-breadcrumb />
              <Hds::Breadcrumb::Item @text={{this.model.replicationModeForDisplay}} @current={{true}} />
            </Hds::Breadcrumb>
          </p.top>
          <p.levelLeft>
            <h1 class="has-top-margin-m title is-3" data-test-replication-title={{this.model.replicationModeForDisplay}}>
              {{this.model.replicationModeForDisplay}}
              <span class="tag is-light has-text-grey-dark" data-test-replication-mode-display>
                {{this.model.replicationAttrs.modeForHeader}}
              </span>
            </h1>
          </p.levelLeft>
        </PageHeader>
        <div class="tabs-container box is-bottomless is-fullwidth is-paddingless is-marginless">
          <nav class="tabs sub-nav" aria-label="tab navigation">
            <ul>
              <LinkTo @route="mode.index" @model={{this.replicationMode}} data-test-replication-link="details">
                Details
              </LinkTo>
              <LinkTo @route="mode.manage" @model={{this.replicationMode}} data-test-replication-link="manage">
                Manage
              </LinkTo>
              {{#if this.model.replicationAttrs.isPrimary}}
                <LinkTo @route="mode.secondaries" @model={{this.replicationMode}} data-test-replication-link="secondaries">
                  Secondaries
                </LinkTo>
              {{/if}}
            </ul>
          </nav>
        </div>
      {{/if}}
      {{outlet}}
    {{/if}}
  </div>
</section>