<div
  class="selectable-card is-rounded card-container summary {{if this.hasErrorClass 'has-border-danger'}}"
  data-test-replication-summary-card
>
  {{! Check if DR or Performance Card }}
  {{#if (eq this.title "Disaster Recovery")}}
    <h3 class="title is-5 grid-item-top-left card-title">{{this.title}}</h3>
    <div class="grid-item-top-right">
      <ToolbarLink @route="mode.index" @model="dr" data-test-manage-link={{this.title}}>
        Details
      </ToolbarLink>
    </div>
    <div class="grid-item-left">
      <h6 class="title is-6">last_dr_wal</h6>
      <p class="helper-text is-label has-text-grey">
        Index of last WAL entry written on local storage. Updates every ten seconds.
      </p>
    </div>
    <div class="grid-item-right">
      <h6 class="title is-6">known_secondaries</h6>
      <p class="helper-text is-label has-text-grey">Number of secondaries connected to this primary.</p>
    </div>
    <h2 class="title is-3 grid-item-bottom-left" data-test-lastWAL>{{format-number this.lastDrWAL}}</h2>
    <h2 class="title is-3 grid-item-bottom-right" data-test-known-secondaries>{{format-number this.knownSecondariesDr}}</h2>
    <div class="grid-item-bottom-row">
      <h6 class="title is-6">merkle_root</h6>
      <p class="helper-text is-label has-text-grey">A snapshot of the merkle tree's root hash.</p>
      <div><code class="is-word-break has-text-black">{{this.merkleRootDr}}</code></div>
    </div>
  {{else}}
    <h3 class="title is-5 grid-item-top-left card-title">{{this.title}}</h3>
    <div class="grid-item-top-right">
      <ToolbarLink @route="mode.index" @model="performance" data-test-manage-link={{this.title}}>
        Details
      </ToolbarLink>
    </div>
    <div class="grid-item-left">
      <h6 class="title is-6">last_performance_wal</h6>
      <p class="helper-text is-label has-text-grey">
        Index of last WAL entry written on local storage. Updates every ten seconds.
      </p>
    </div>
    <div class="grid-item-right">
      <h6 class="title is-6">known_secondaries</h6>
      <p class="helper-text is-label has-text-grey">Number of secondaries connected to this primary.</p>
    </div>
    <h2 class="title is-3 grid-item-bottom-left" data-test-lastWAL>{{format-number this.lastPerformanceWAL}}</h2>
    <h2 class="title is-3 grid-item-bottom-right" data-test-known-secondaries>
      {{format-number this.knownSecondariesPerformance}}
    </h2>
    <div class="grid-item-bottom-row">
      <h6 class="title is-6">merkle_root</h6>
      <p class="helper-text is-label has-text-grey">A snapshot of the merkle tree's root hash.</p>
      <div><code class="is-word-break has-text-black">{{this.merkleRootPerformance}}</code></div>
    </div>
  {{/if}}
</div>