{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

<Hds::Alert @type="inline" @color="warning" as |A|>
  <A.Title class="alert-title">Vault is sealed</A.Title>
</Hds::Alert>
{{#if this.showJoinForm}}
  <div class="box is-marginless is-shadowless">
    <h2 class="title is-5" data-test-join-header>
      Join an existing Raft cluster
    </h2>
    <EditForm
      @model={{compute (action "newModel")}}
      @saveButtonText="Join"
      @cancelButtonText="Back"
      @onCancel={{action (mut this.showJoinForm) false}}
      @onSave={{transition-to "vault.cluster.unseal"}}
      @flashEnabled={{false}}
      @includeBox={{false}}
    />
  </div>
{{else}}
  <form onsubmit={{action "advanceFirstScreen"}} data-test-join-choice>
    <div class="box is-marginless is-shadowless">
      <h2 class="title is-6">
        This server is configured to use Raft Storage.
        <br />
        <br />
        How do you want to get started?
      </h2>
      <div class="has-bottom-margin-s">
        <RadioButton
          id="join"
          name="setup-pref"
          @value="join"
          @groupValue={{this.preference}}
          @onChange={{fn (mut this.preference)}}
        />
        <label for="join">Join an existing Raft cluster</label>
      </div>
      <div>
        <RadioButton
          id="init"
          name="setup-pref"
          @value="init"
          @groupValue={{this.preference}}
          @onChange={{fn (mut this.preference)}}
        />
        <label for="init" data-test-join-init>Create a new Raft cluster</label>
      </div>
    </div>
    <div class="box is-marginless is-shadowless">
      <Hds::Button @text="Next" type="submit" data-test-next />
    </div>
  </form>
{{/if}}