<div class="selectable-card is-rounded secondaries">
  <div class="level">
    <h3 class="card-title title is-5">{{this.replicationAttrs.secondaries.length}} Known Secondaries</h3>
    <ToolbarLink @route="mode.secondaries" @model={{this.cluster.replicationMode}} data-test-manage-link>
      View all
    </ToolbarLink>
  </div>
  <div class="secondaries-table">
    {{#if this.replicationAttrs.secondaries}}
      <KnownSecondariesTable @secondaries={{this.replicationAttrs.secondaries}} />
    {{else}}
      <EmptyState
        @title="No known {{this.cluster.replicationMode}} secondary clusters associated with this cluster"
        @message="Associated secondary clusters will be listed here. Add your first secondary cluster to get started."
      />
    {{/if}}
  </div>
  {{#if this.cluster.canAddSecondary}}
    <LinkTo @route="mode.secondaries.add" @model={{this.cluster.replicationMode}} class="link add-secondaries">
      Add secondary
    </LinkTo>
  {{/if}}
</div>