{{!
  Copyright IBM Corp. 2016, 2025
  SPDX-License-Identifier: BUSL-1.1
}}

<section class="section">
  <div class="container is-widescreen">
    {{#if (eq this.model.mode "unsupported")}}
      {{! Replication is unsupported in non-enterprise or when using non-transactional storage (eg inmem) }}
      <PageHeader as |p|>
        <p.levelLeft>
          <h1 class="title is-3 has-text-grey" data-test-replication-title="Replication unsupported">
            Replication unsupported
          </h1>
        </p.levelLeft>
      </PageHeader>
      <EmptyState @title="The current cluster configuration does not support replication" />
    {{else if this.model.replicationIsInitializing}}
      <LayoutLoading />
    {{else if this.model.allReplicationDisabled}}
      <PageHeader as |p|>
        <p.levelLeft>
          <h1 class="title is-3" data-test-replication-title="Enable Replication">
            Enable Replication
          </h1>
        </p.levelLeft>
      </PageHeader>
      <div class="box is-sideless is-fullwidth is-marginless">
        <p class="has-text-grey-dark box is-shadowless is-fullwidth has-slim-padding">
          <label for="replication-mode" class="is-label is-block">
            Type of replication
          </label>
          In both Performance and Disaster Recovery (DR) Replication, secondaries share the underlying configuration,
          policies, and supporting secrets as their primary cluster.
        </p>
        <div class="columns">
          <div class="column is-flex">
            <label for="dr" class="box-label is-column {{if (eq this.replicationMode 'dr') 'is-selected'}}">
              <div>
                <h3 class="box-label-header title is-6">
                  <Icon @size="24" @name="replication-direct" />
                  Disaster Recovery (DR)
                </h3>
                <p class="help has-text-grey-dark">
                  {{replication-mode-description "dr"}}
                </p>
              </div>
              <div>
                <RadioButton
                  id="dr"
                  name="replication-mode"
                  @value="dr"
                  @groupValue={{this.modeSelection}}
                  @onChange={{fn (mut this.modeSelection)}}
                />
                <label for="dr" data-test-replication-type-select="dr"></label>
              </div>
            </label>
          </div>
          <div class="column is-flex">
            <label for="performance" class="box-label is-column {{if (eq this.modeSelection 'performance') 'is-selected'}}">
              <div>
                <h3 class="box-label-header title is-6">
                  <Icon @size="24" @name="replication-perf" />
                  Performance
                </h3>
                {{#if (not (has-feature "Performance Replication"))}}
                  <p class="help has-text-grey-dark">
                    Performance Replication is a feature of Vault Enterprise Premium
                  </p>
                {{else}}
                  <p class="help has-text-grey-dark">
                    {{replication-mode-description "performance"}}
                  </p>
                {{/if}}
              </div>
              <div>
                {{#if (has-feature "Performance Replication")}}
                  <RadioButton
                    id="performance"
                    name="replication-mode"
                    @value="performance"
                    @groupValue={{this.modeSelection}}
                    @onChange={{fn (mut this.modeSelection)}}
                  />
                  <label for="performance" data-test-replication-type-select="performance"></label>
                {{/if}}
              </div>
            </label>
          </div>
        </div>
      </div>
      <EnableReplicationForm
        @replicationMode={{this.modeSelection}}
        @canEnablePrimary={{this.canEnablePrimary}}
        @canEnableSecondary={{this.canEnableSecondary}}
        @performanceReplicationDisabled={{this.model.performance.replicationDisabled}}
        @performanceMode={{if this.model.performance.replicationDisabled "disabled" this.model.performance.modeForUrl}}
        @onSuccess={{this.onEnableSuccess}}
        @doTransition={{true}}
      />
    {{else if (not (has-feature "DR Replication"))}}
      <UpgradePage @title="Replication" />
    {{else if (and (eq this.model.dr.mode "primary") (eq this.model.performance.mode "primary"))}}
      {{! Renders when cluster is primary for both replication modes }}
      <ReplicationPage @model={{this.model}} as |Page|>
        <Page.header @showTabs={{true}} />
        <Page.dashboard @componentToRender="replication-summary-card" as |Dashboard|>
          <Dashboard.card @title="Disaster Recovery" />
          <Dashboard.card @title="Performance" />
        </Page.dashboard>
      </ReplicationPage>
    {{else}}
      {{! Renders when at least one mode is not enabled }}
      <PageHeader as |p|>
        <p.levelLeft>
          <h1 class="title is-3" data-test-replication-title="Replication">
            Replication
          </h1>
        </p.levelLeft>
      </PageHeader>

      <div class="box is-sideless is-fullwidth is-marginless flex-col">
        <ReplicationOverviewMode
          @mode="dr"
          @model={{this.model.dr}}
          @clusterName={{this.model.name}}
          class="has-bottom-margin-m"
        />
        <ReplicationOverviewMode @mode="performance" @model={{this.model.performance}} @clusterName={{this.model.name}} />
      </div>
    {{/if}}
  </div>
</section>