<section class="section">
<div class="container is-widescreen">
{{#if (and (eq this.model.drMode "secondary") (eq this.model.drModeInit "primary"))}}
<nav class="navbar"></nav>
<LayoutLoading />
{{else}}
{{#if this.model.replicationAttrs.replicationEnabled}}
<PageHeader as |p|>
<p.top>
<nav class="key-value-header breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<LinkTo @route="index">
<span class="sep" data-test-replication-breadcrumb></span>
Replication
</LinkTo>
</li>
<span class="sep"></span>
{{this.model.replicationModeForDisplay}}
</ul>
</nav>
</p.top>
<p.levelLeft>
<h1 class="has-top-margin-m title is-3" data-test-replication-title={{true}}>
<span class="tag is-light has-text-grey-dark" data-test-replication-mode-display={{true}}>
{{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">
<LinkTo @route="mode.index" @model={{this.replicationMode}} data-test-replication-link="details">
Details
<LinkTo @route="mode.manage" @model={{this.replicationMode}} data-test-replication-link="manage">
Manage
{{#if this.model.replicationAttrs.isPrimary}}
<LinkTo @route="mode.secondaries" @model={{this.replicationMode}} data-test-replication-link="secondaries">
Secondaries
{{/if}}
</div>
{{outlet}}
</section>