{{#unless (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">
            {{replication-mode-description 'dr'}}
          </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>
          {{#unless (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>
          {{/unless}}
        {{/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">
                  {{replication-mode-description 'dr'}}
                </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">
                    {{replication-mode-description 'performance'}}
                  </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}}
  {{#unless (and cluster.dr.replicationEnabled cluster.performance.replicationEnabled)}}
    <PageHeader as |p|>
      <p.levelLeft>
        <h1 class="title is-3">
          Replication
        </h1>
      </p.levelLeft>
    </PageHeader>
  {{/unless}}

  {{#if (and (eq cluster.dr.mode "primary") (eq cluster.performance.mode "primary")) }}
    <ReplicationPage @model={{cluster}} 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}}
    <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}}
        {{#if submit.isRunning }}
          <LayoutLoading />
        {{else}}
          {{#link-to
            "mode.index"
            "dr"
            class="link-plain"
          }}
            {{replication-mode-summary
              mode="dr"
              cluster=cluster
              tagName="span"
            }}
          {{/link-to}}
        {{/if}}
      {{else}}
        {{replication-mode-summary
          mode="dr"
          cluster=cluster
          tagName="div"
        }}
      {{/if}}
    </div>
      {{#unless (and submit.isRunning (eq cluster.dr.mode "bootstrapping"))}}
      <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>
          {{#link-to
            "mode.index"
            "performance"
            class="link-plain"
          }}
            {{replication-mode-summary
              mode="performance"
              cluster=cluster
              tagName="span"
            }}
          {{/link-to}}
      </div>
    {{/unless}}
  {{/if}}
{{else}}
  {{#if (eq replicationAttrs.mode 'initializing')}}
    The cluster is initializing replication. This may take some time.
  {{else}}
    <p>{{cluster.replicationModeStatus.cluster_id}}</p>
    <div class="replication">
      <ReplicationPage @model={{cluster}} as |Page|>
        <Page.dashboard
          @data={{cluster}}
          @componentToRender={{if (eq replicationAttrs.mode 'secondary') 'replication-secondary-card' 'replication-primary-card' }}
          as |Dashboard|>
          {{#if (eq replicationAttrs.mode 'secondary')}}
            <Dashboard.card
              @title="Status"
            />
            <Dashboard.card
              @title="Primary cluster"
            />
          {{else}}
            <Dashboard.card
              @title='State'
              @description='The cluster’s current operating state.'
              @glyph={{get (cluster-states replicationAttrs.state) "glyph"}}
              @metric={{replicationAttrs.state}} />
            <Dashboard.card
              @title='Last WAL entry'
              @description='Index of last Write Ahead Logs entry written on local storage. Updates every ten seconds.'
              @metric={{format-number replicationAttrs.lastWAL}} />
            <Dashboard.secondaryCard
              @cluster={{cluster}}
              @replicationAttrs={{replicationAttrs}} />
          {{/if}}
        </Page.dashboard>
      </ReplicationPage>
    </div>
  {{/if}}
{{/unless}}