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

{{#if this.encoded_token}}
  <div class="box is-marginless is-shadowless">
    <div class="message is-list has-copy-button" tabindex="-1">
      <HoverCopyButton @copyValue={{this.encoded_token}} />
      <div class="message-body">
        <h4 class="title is-7 is-marginless">
          Encoded Operation Token
        </h4>
        <code class="is-word-break">{{this.encoded_token}}</code>
      </div>
    </div>
    {{#if this.otp}}
      <div class="message is-list has-copy-button" tabindex="-1">
        <HoverCopyButton @copyValue={{this.otp}} />
        <div class="message-body">
          <h4 class="title is-7 is-marginless">
            One Time Password (otp)
          </h4>
          <code class="is-word-break">{{this.otp}}</code>
        </div>
      </div>
    {{/if}}
    <div class="message is-list has-copy-button" tabindex="-1">
      {{! template-lint-disable quotes }}
      {{#let
        (if
          this.otp
          (concat 'vault operator generate-root -otp="' this.otp '" -decode="' this.encoded_token '"')
          (concat 'vault operator generate-root -otp="<enter your otp here>" -decode="' this.encoded_token '"')
        )
        as |cmd|
      }}
        <HoverCopyButton @copyValue={{cmd}} />
        <div class="message-body">
          <h4 class="title is-7 is-marginless">
            DR Operation Token Command
          </h4>
          <code class="is-word-break">{{cmd}}</code>
        </div>
      {{/let}}
      {{! template-lint-enable quotes }}
    </div>
  </div>
  <div class="box is-marginless is-shadowless">
    <button type="button" class="button" {{action "reset"}}>
      Clear Token
    </button>
  </div>
{{else if (and this.generateAction (not this.started))}}
  <form {{action "startGenerate" (hash pgp_key=this.pgp_key) on="submit"}} id="shamir" aria-label="shamir generate form">
    <MessageError @errors={{this.errors}} />
    {{#if (eq this.generateStep "chooseMethod")}}
      <div class="box is-marginless is-shadowless">
        <p>
          Updating or promoting this cluster requires an operation token. Let's generate one by inputting the root key
          shares. If you'd like to encrypt the token with a PGP Key, please click "Provide PGP Key" below, otherwise we can
          begin generation of the Operation Token.
        </p>
      </div>
      <div class="box is-shadowless field is-grouped is-centered is-flex-center">
        <div class="control">
          <button type="button" class="button is-primary" {{action (mut this.generateWithPGP) true}}>
            Provide PGP Key
          </button>
        </div>
        <div class="control">
          <span class="has-side-padding-s">
            or
          </span>
        </div>
        <div class="control">
          <button type="submit" class="button is-primary">
            Generate Operation Token
          </button>
        </div>
      </div>
    {{/if}}
    {{#if (eq this.generateStep "providePGPKey")}}
      <div class="box is-marginless is-shadowless">
        <p>
          Choose a PGP Key from your computer or paste the contents of one in the form below. This key will be used to
          Encrypt the generated Operation Token.
        </p>
        <PgpFile @index="" @key={{this.pgpKeyFile}} @onChange={{action "setKey"}} />
      </div>
      <div class="field is-grouped box is-marginless is-shadowless">
        <div class="control">
          <button type="button" class="button" {{action "reset"}}>
            Back
          </button>
        </div>
        <div class="control">
          <button type="button" disabled={{not this.pgp_key}} class="button is-primary" {{action "savePGPKey"}}>
            Use PGP Key
          </button>
        </div>
      </div>
    {{/if}}
    {{#if (eq this.generateStep "beginGenerationWithPGP")}}
      <div class="box is-marginless is-shadowless">
        <p>
          Below is the base-64 encoded PGP Key that will be used to encrypt the generated Operation Token. Next we'll enter
          portions of the root key to generate an Operation Token. Click the "Generate Operation Token" button to proceed.
        </p>
        <div class="message is-list has-copy-button" tabindex="-1">
          <HoverCopyButton @copyValue={{this.pgp_key}} />
          <div class="message-body">
            <h4 class="title is-7 is-marginless">
              PGP Key
              {{this.pgpKeyFile.filename}}
            </h4>
            <code class="is-word-break">{{this.pgp_key}}</code>
          </div>
        </div>
      </div>
      <div class="field is-grouped box is-marginless is-shadowless">
        <div class="control">
          <button type="button" class="button" {{action "reset"}}>
            Back
          </button>
        </div>
        <div class="control">
          <button type="submit" disabled={{and (not this.pgp_key)}} class="button is-primary">
            Generate Operation Token
          </button>
        </div>
      </div>
    {{/if}}
  </form>
{{else}}
  <form {{action "onSubmit" (hash key=this.key) on="submit"}} id="shamir" aria-label="shamir form">
    <div class="box is-shadowless">
      {{#if this.errors}}
        <div class="box is-shadowless is-marginless no-padding-top is-fullwidth">
          <MessageError @errors={{this.errors}} />
        </div>
      {{/if}}
      <div class="box is-shadowless is-marginless no-padding-top is-fullwidth" data-test-form-text>
        {{#if this.otp}}
          <p>
            <Hds::Alert @type="inline" @color="highlight" class="has-bottom-margin-s" as |A|>
              <A.Title>Info</A.Title>
              <A.Description>
                Below is the generated OTP. This will be used to encode the generated Operation Token. Make sure to save
                this, as you will need it later to decode the Operation Token.
              </A.Description>
            </Hds::Alert>
          </p>
          <div class="has-background-gray-100 box has-copy-button" tabindex="-1">
            <HoverCopyButton @copyValue={{this.otp}} />
            <h4 class="title is-7 is-marginless">
              One Time Password (otp)
            </h4>
            <code class="is-word-break">{{this.otp}}</code>
          </div>
        {{/if}}
        {{#if (has-block)}}
          {{yield}}
        {{else if this.formText}}
          {{this.formText}}
        {{/if}}
      </div>
      <div class="field">
        <label for="key" class="is-label">
          Unseal Key Portion
        </label>
        <div class="control">
          <Input class="input" @type="password" name="key" @value={{this.key}} data-test-shamir-input={{true}} />
        </div>
      </div>
    </div>
    <div class="box is-marginless is-shadowless">
      <div class="columns is-mobile">
        <div class="column is-narrow">
          <button type="submit" class="button is-primary" disabled={{this.loading}} data-test-shamir-submit={{true}}>
            {{if this.generateAction "Generate Token" this.buttonText}}
          </button>
        </div>
        <div class="column is-flex-v-centered is-flex-end">
          {{#if (or this.started this.hasProgress)}}
            <ShamirProgress @threshold={{this.threshold}} @progress={{this.progress}} />
          {{/if}}
        </div>
      </div>
    </div>
  </form>
{{/if}}