<AlertBanner @type="warning" class="is-marginless" @title="Vault is sealed" />
{{#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="vlt-radio is-block">
        <RadioButton
          id="join"
          name="setup-pref"
          @value="join"
          @groupValue={{this.preference}}
          @onChange={{fn (mut this.preference)}}
        />
        <label for="join"></label>
        Join an existing Raft cluster
      </div>
      <div class="vlt-radio is-block">
        <RadioButton
          id="init"
          name="setup-pref"
          @value="init"
          @groupValue={{this.preference}}
          @onChange={{fn (mut this.preference)}}
        />
        <label for="init" data-test-join-init></label>
        Create a new Raft cluster
      </div>
    </div>
    <div class="box is-marginless is-shadowless">
      <button type="submit" class="button is-primary" data-test-next>
        Next
      </button>
    </div>
  </form>
{{/if}}