<SplashPage as |Page|>
  {{#if keyData}}
    <Page.header>
      <h1 class="title is-4">
        Vault has been initialized! {{#if (eq keyData.keys.length 1)}}
        Here is your key.
        {{else}}
        Here are your {{pluralize keyData.keys.length "key"}}.
        {{/if}}
      </h1>
    </Page.header>
    <Page.content>
      <div class="box is-marginless is-shadowless">
        <div class="content">
          <p>
            Please securely distribute the keys below. When the Vault is re-sealed, restarted, or stopped, you must provide at least <strong class="has-text-danger">{{secret_threshold}}</strong> of these keys to unseal it again.
            Vault does not store the master key. Without at least <strong class="has-text-danger">{{secret_threshold}}</strong> keys, your Vault will remain permanently sealed.
          </p>
        </div>
        <div class="message is-list is-highlight has-copy-button" tabindex="-1">
          <HoverCopyButton @alwaysShow=true @copyValue={{keyData.root_token}} />
          <div class="message-body">
            <h4 class="title is-7 is-marginless">
              Initial Root Token
            </h4>
            <code class="is-word-break">{{keyData.root_token}}</code>
          </div>
        </div>
        {{#each (if keyData.keys_base64 keyData.keys_base64 keyData.keys) as |key index| }}
          <div class="message is-list has-copy-button" tabindex="-1">
            <HoverCopyButton @copyValue={{key}} />
            <div class="message-body">
              <h4 class="title is-7 is-marginless">
                Key {{add index 1}}
              </h4>
              <code class="is-word-break">{{key}}</code>
            </div>
          </div>
        {{/each}}
      </div>
      <div class="box is-marginless is-shadowless">
        <div class="field is-grouped-split">
          {{#if model.sealed}}
            <div class="control">
              {{#link-to 'vault.cluster.unseal' model.name class="button is-primary"}}
              Continue to Unseal
              {{/link-to}}
            </div>
          {{else}}
            <div class="control">
              {{#link-to 'vault.cluster.auth' model.name class="button is-primary"}}
              Continue to Authenticate
              {{/link-to}}
            </div>
          {{/if}}
          <DownloadButton
            @data={{keyData}}
            @filename={{keyFilename}}
            @mime="application/json"
            @extension="json"
            @class="button is-ghost"
            @stringify={{true}}
            >
            <ICon @glyph="download" @size=16 /> Download Keys
          </DownloadButton>
        </div>
      </div>
    </Page.content>
  {{else}}
    <Page.header>
      <h1 class="title h5">
        Let's set up the initial set of master keys that you’ll need in case of an emergency
      </h1>
    </Page.header>
    <Page.content>
      <form {{action 'initCluster' (hash
         secret_shares=secret_shares
         secret_threshold=secret_threshold
         pgp_keys=pgp_keys
         use_pgp=use_pgp
         use_pgp_for_root=use_pgp_for_root
         root_token_pgp_key=root_token_pgp_key
         )
         on="submit"
       }}
         id="init"
      >
        <div class="box is-marginless is-shadowless">
          <MessageError @errors={{errors}} />
          <div class="field">
            <label for="key-shares" class="is-label">
              Key Shares
            </label>
            <div class="control">
              {{input class="input" autocomplete="off" name="key-shares" type="number" step="1" min="1" pattern="[0-9]*" value=secret_shares}}
            </div>
            <p class="help has-text-grey">
              The number of key shares to split the master key into
            </p>
          </div>
          <div class="field">
            <label for="key-threshold" class="is-label">
              Key Threshold
            </label>
            <div class="control">
              {{input class="input" autocomplete="off" name="key-threshold" type="number" step="1" min="1" pattern="[0-9]*" value=secret_threshold}}
            </div>
            <p class="help has-text-grey">
              The number of key shares required to reconstruct the master key
            </p>
          </div>

          <ToggleButton
            @openLabel="Encrypt Output with PGP"
            @closedLabel="Encrypt Output with PGP"
            @toggleTarget={{this}}
            @toggleAttr="use_pgp"
            @class="is-block"
            />
          {{#if use_pgp}}
            <div class="box init-box">
              <p class="help has-text-grey">
                The output unseal keys will be encrypted and hex-encoded, in order, with the given public keys.
              </p>
              <PgpList @listLength={{secret_shares}} @onDataUpdate={{action 'setKeys'}} />
            </div>
          {{/if}}
          <ToggleButton
            @openLabel="Encrypt Root Token with PGP"
            @closedLabel="Encrypt Root Token with PGP"
            @toggleTarget={{this}}
            @toggleAttr="use_pgp_for_root"
            @class="is-block"
          />
          {{#if use_pgp_for_root}}
            <div class="box init-box">
              <p class="help has-text-grey">
                The root unseal key will be encrypted and hex-encoded with the given public key.
              </p>
              <PgpList @listLength=1 @onDataUpdate={{action 'setRootKey'}} />
            </div>
          {{/if}}
        </div>
        <div class="box is-marginless is-shadowless">
          <button
            type="submit"
            class="button is-primary {{if loading 'is-loading'}}"
            disabled={{loading}}
          >
            Initialize
          </button>

          <div class="init-illustration">
            {{partial "svg/initialize"}}
          </div>
        </div>
      </form>
    </Page.content>
  {{/if}}
</SplashPage>
