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

<form {{on "submit" (perform this.submitForm)}} data-test-pki-key-import-form>
  <MessageError @errorMessage={{this.errorBanner}} class="has-top-margin-s" />
  <div class="box is-sideless is-fullwidth is-marginless">
    <p class="has-bottom-margin-l">
      Use this form to import a single pem encoded rsa, ec, or ed25519 key.
      <DocLink @path="/vault/api-docs/secret/pki#import-key">
        Importing a PKI key
      </DocLink>
    </p>
    {{#let (find-by "name" "keyName" @model.formFields) as |attr|}}
      <FormField data-test-field={{attr}} @attr={{attr}} @model={{@model}} @showHelpText={{false}} />
    {{/let}}
    <TextFile @onChange={{this.onFileUploaded}} @label="PEM Bundle" data-test-pki-key-file />
  </div>
  <Hds::ButtonSet class="has-top-padding-s">
    <Hds::Button
      @text="Import key"
      @icon={{if this.submitForm.isRunning "loading"}}
      type="submit"
      disabled={{this.submitForm.isRunning}}
      data-test-pki-key-import
    />
    <Hds::Button
      @text="Cancel"
      @color="secondary"
      disabled={{this.submitForm.isRunning}}
      {{on "click" this.cancel}}
      data-test-cancel
    />
  </Hds::ButtonSet>
  {{#if this.invalidFormAlert}}
    <div class="control">
      <AlertInline
        @type="danger"
        class="has-top-padding-s"
        @message={{this.invalidFormAlert}}
        data-test-pki-key-validation-error
      />
    </div>
  {{/if}}
</form>