{{#if (not (has-feature "DR Replication"))}}
  {{upgrade-page title="Replication"}}
{{else if (or cluster.allReplicationDisabled cluster.replicationAttrs.replicationDisabled)}}
  <PageHeader as |p|>
    <p.levelLeft>
      <h1 class="title is-3">
        {{#if initialReplicationMode}}
          {{#if (eq initialReplicationMode 'dr')}}
            Enable Disaster Recovery Replication
          {{else if (eq initialReplicationMode 'performance')}}
            Enable Performance Replication
          {{/if}}
        {{else}}
          Enable Replication
        {{/if}}
      </h1>
    </p.levelLeft>
  </PageHeader>

  <form
    onsubmit={{
      action
        "onSubmit"
        "enable"
        (or mode 'primary')
        (hash
          token=token
          primary_cluster_addr=primary_cluster_addr
          primary_api_addr=primary_api_addr
          ca_file=ca_file
          ca_path=ca_path
          replicationMode=replicationMode
          )
      }}
    >
    <div class="box is-sideless is-fullwidth is-marginless">
      {{message-error errors=errors}}
      {{#if initialReplicationMode}}
        {{#if (eq initialReplicationMode 'dr')}}
          <h3 class="title is-flex-center is-5 is-marginless">
            <Icon
              @size="xl"
              aria-hidden="true"
              @glyph="replication"
            />
            Disaster Recovery (DR) Replication
          </h3>
          <p class="help has-text-grey-dark">
            DR is designed to protect against catastrophic failure of entire clusters. Secondaries do not forward service requests (until they are elected and become a new primary).
          </p>
        {{else if (eq initialReplicationMode 'performance')}}
          <h3 class="title is-flex-center is-5 is-marginless">
            <Icon
              @size="xl"
              aria-hidden="true"
              @glyph="perf-replication"
            />
            Performance Replication
          </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">
              Performance replication scales workloads horizontally across clusters to make requests faster. Local secondaries handle read requests but forward writes to the primary to be handled.
            </p>
          {{/if}}
        {{/if}}
      {{else}}
        <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 replicationMode 'dr') 'is-selected'}}">
              <div>
                <h3 class="box-label-header title is-6">
                  <Icon
                    @size="xl"
                    aria-hidden="true"
                    @glyph="replication"
                  />
                  Disaster Recovery (DR)
                </h3>
                <p class="help has-text-grey-dark">
                  DR is designed to protect against catastrophic failure of entire clusters. Secondaries do not forward service requests (until they are elected and become a new primary).
                </p>
              </div>
              <div>
                {{radio-button
                  value="dr"
                  groupValue=replicationMode
                  name="replication-mode"
                  radioId="dr"
                }}
                <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 replicationMode 'performance') 'is-selected'}}">
              <div>
                <h3 class="box-label-header title is-6">
                  <Icon
                    @size="xl"
                    aria-hidden="true"
                    @glyph="perf-replication"
                  />
                   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">
                    Performance Replication scales workloads horizontally across clusters to make requests faster. Local secondaries handle read requests but forward writes to the primary to be handled.
                  </p>
                {{/if}}
              </div>
              <div>
                {{#if (has-feature "Performance Replication")}}
                  {{radio-button
                    value="performance"
                    groupValue=replicationMode
                    name="replication-mode"
                    classNames="box columns is-centered"
                    radioId="performance"
                  }}
                  <label for="performance" data-test-replication-type-select="performance"></label>
                {{/if}}
              </div>
            </label>
          </div>
        </div>
      {{/if}}
    </div>
    <div class="box is-sideless is-fullwidth is-marginless">
      <label for="replication-mode" class="is-label">
        Cluster mode
      </label>
      <div class="field is-expanded">
        <div class="control select is-fullwidth">
          <select onchange={{action (mut mode) value="target.value"}} id="replication-mode" name="replication-mode" data-test-replication-cluster-mode-select=true>
            {{#each (array 'primary' 'secondary') as |modeOption|}}
              <option
                selected={{if mode (eq mode modeOption) (eq modeOption 'primary')}}
                value={{modeOption}}
              >
                {{modeOption}}
              </option>
            {{/each}}
          </select>
        </div>
        {{#if (eq mode 'secondary')}}
          <AlertInline
            @class="has-top"
            @type="warning"
            @message="This will immediately clear all data in this cluster!"
          />
        {{/if}}
      </div>
      {{#if (eq mode 'primary')}}
        {{#if cluster.canEnablePrimary}}
          <div class="field">
            <label for="primary_cluster_addr" class="is-label">
              Primary cluster address <em class="is-optional">(optional)</em>
            </label>
            <div class="control">
              {{input  class="input" id="primary_cluster_addr" name="primary_cluster_addr" value=primary_cluster_addr}}
            </div>
            <p class="help has-text-grey">
              Overrides the cluster address that the primary gives to secondary nodes.
            </p>
          </div>
        {{else}}
          <p>
            The token you are using is not authorized to enable primary replication.
          </p>
        {{/if}}
      {{else}}
        {{#if cluster.canEnableSecondary}}
          {{#if (and
              (eq replicationMode 'dr')
              (not cluster.performance.replicationDisabled)
              (has-feature "Performance Replication")
            )
          }}
            <div class="has-text-danger">
              {{toggle-button
                toggleTarget=this
                toggleAttr='showExplanation'
                openLabel="Disable Performance Replication in order to enable this cluster as a DR secondary."
                closedLabel="Disable Performance Replication in order to enable this cluster as a DR secondary."
                class="has-text-danger"
              }}
              {{#if showExplanation}}
                <p>
                  When running as a DR Secondary Vault is read only.
                  For this reason, we don't allow other Replication modes to operate at the same time. This cluster is also
                  currently operating as a Performance {{capitalize cluster.performance.modeForUrl}}.
                </p>
              {{/if}}
            </div>
          {{else}}
            <div class="field">
              <label for="secondary-token" class="is-label">
                Secondary activation token
              </label>
              <div class="control">
                {{textarea value=token id="secondary-token" name="secondary-token" class="textarea"}}
              </div>
            </div>
            <div class="field">
              <label for="primary_api_addr" class="is-label">
                Primary API address {{#unless (and token (not tokenIncludesAPIAddr))}}<em class="is-optional">(optional)</em>{{/unless}}
              </label>
              <div class="control">
                {{input value=primary_api_addr id="primary_api_addr" name="primary_api_addr" class="input"}}
              </div>
              <p class="help {{if (and token (not tokenIncludesAPIAddr)) 'is-danger' 'has-text-grey'}}">
                {{#if (and token (not tokenIncludesAPIAddr))}}
                  The supplied token does not contain an embedded address for the primary cluster. Please enter the primary cluster's API address (normal Vault address).
                {{else}}
                  Set this to the API address (normal Vault address) to override the
                  value embedded in the token.
                {{/if}}
              </p>
            </div>
            <div class="field">
              <label for="ca_file" class="is-label">
                CA file <em class="is-optional">(optional)</em>
              </label>
              <div class="control">
                {{input value=ca_file id="ca_file" name="ca_file" class="input"}}
              </div>
              <p class="help has-text-grey">
                Specifies the path to a CA root file (PEM format) that the secondary can use when unwrapping the token from the primary.
              </p>
            </div>
            <div class="field">
              <label for="ca_path" class="is-label">
                CA path <em class="is-optional">(optional)</em>
              </label>
              <div class="control">
                {{input value=ca_path id="ca_path" name="ca_file" class="input"}}
              </div>
              <p class="help has-text-grey">
                Specifies the path to a CA root directory containing PEM-format files that the secondary can use when unwrapping the token from the primary.
              </p>
            </div>
            <p>
              Note: If both <code>CA file</code> and <code>CA path</code> are not given, they default to system CA roots.
            </p>
          {{/if}}
        {{else}}
          <p>The token you are using is not authorized to enable secondary replication.</p>
        {{/if}}
      {{/if}}
    </div>
    {{#if (or (and (eq mode 'primary') cluster.canEnablePrimary) (and (eq mode 'secondary') cluster.canEnableSecondary))}}
      <div class="field is-grouped box is-fullwidth is-bottomless">
        <div class="control">
          <button type="submit" class="button is-primary" disabled={{disallowEnable}} data-test-replication-enable=true>
            Enable Replication
          </button>
        </div>
      </div>
    {{/if}}
  </form>
{{else if showModeSummary}}
  <PageHeader as |p|>
    <p.levelLeft>
      <h1 class="title is-3">
        Replication
      </h1>
    </p.levelLeft>
  </PageHeader>
  <div class="box is-sideless is-fullwidth is-marginless">
    <h3 class="title is-flex-center is-5 is-marginless">
      <Icon
        @size="xl"
        aria-hidden="true"
        @glyph="replication"
      />
      Disaster Recovery (DR)
    </h3>
    {{#if cluster.dr.replicationEnabled}}
      {{#link-to
        "mode.index"
        "dr"
        class="link-plain"
      }}
        {{replication-mode-summary
          mode="dr"
          cluster=cluster
          tagName="span"
        }}
      {{/link-to}}
    {{else}}
      {{replication-mode-summary
        mode="dr"
        cluster=cluster
        tagName="div"
      }}
    {{/if}}
  </div>
  <div class="box is-bottomless is-fullwidth is-marginless">
    <h3 class="title is-flex-center is-5 is-marginless">
      <Icon
        @size="xl"
        aria-hidden="true"
        @glyph="perf-replication"
      />
      Performance
    </h3>
    {{#if cluster.dr.replicationEnabled}}
      {{#link-to
        "mode.index"
        "performance"
        class="link-plain"
      }}
        {{replication-mode-summary
          mode="performance"
          cluster=cluster
          tagName="span"
        }}
      {{/link-to}}
    {{else}}
      {{replication-mode-summary
        mode="performance"
        cluster=cluster
        tagName="div"
      }}
    {{/if}}
  </div>
{{else}}
  {{#if (eq replicationAttrs.mode 'initializing')}}
    The cluster is initializing replication. This may take some time.
  {{else}}
    {{info-table-row label="Mode" value=replicationAttrs.mode}}
    {{info-table-row label="Replication set" value=replicationAttrs.clusterId}}
    {{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}}
    {{info-table-row label="State" value=replicationAttrs.state}}
    {{info-table-row label="Primary cluster address" value=replicationAttrs.primaryClusterAddr}}
    {{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
    {{info-table-row label="Last WAL entry" value=replicationAttrs.lastWAL}}
    {{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}}
    {{info-table-row label="Merkle root index" value=replicationAttrs.merkleRoot}}
    {{#if replicationAttrs.syncProgress}}
      {{info-table-row label="Sync progress" value=(concat replicationAttrs.syncProgress.progress '/' replicationAttrs.syncProgress.total)}}
    {{/if}}
  {{/if}}
{{/if}}