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

<div class="level is-mobile">
  <div class="level-left">
    <label class="has-text-weight-bold" data-test-pgp-label>
      {{#if this.label}}
        {{this.label}}
      {{else}}
        PGP KEY
        {{if (not-eq this.index "") (inc this.index)}}
      {{/if}}
    </label>
  </div>
  <div class="level-right">
    <div class="control is-flex">
      <input
        data-test-text-toggle
        id={{concat "useText-" this.elementId}}
        type="checkbox"
        name={{concat "useText-" this.elementId}}
        class="toggle is-success is-small"
        checked={{this.key.enterAsText}}
        onchange={{action "handleToggle"}}
      />
      <label for={{concat "useText-" this.elementId}} class="has-text-weight-bold is-size-8">
        Enter as text
      </label>
    </div>
  </div>
</div>
<div class="field">
  {{#if this.key.enterAsText}}
    <div class="control">
      <textarea
        class="textarea"
        oninput={{action "updateData"}}
        data-test-pgp-file-textarea={{true}}
        aria-labelledby={{concat "pgpFileTextarea-" this.elementId}}
      >{{this.key.value}}</textarea>
    </div>
    <p class="help has-text-grey" id={{concat "pgpFileTextarea-" this.elementId}}>
      {{#if this.textareaHelpText}}
        {{this.textareaHelpText}}
      {{else}}
        Enter a base64-encoded key
      {{/if}}
    </p>
  {{else}}
    <div class="control is-expanded">
      <div class="file">
        <div class="file-label is-fullwidth">
          <input
            id="file-input"
            class="file-input"
            type="file"
            onchange={{action "pickedFile"}}
            data-test-pgp-file-input={{true}}
          />
          <span class="file-cta is-fullwidth">
            <span class="file-icon has-text-grey-dark">
              <Icon @name="file" />
            </span>
            <label for="file-input" class="file-label has-text-grey-dark" data-test-pgp-file-input-label={{true}}>
              {{#if this.key.filename}}
                {{this.key.filename}}
              {{else}}
                Choose a file&hellip;
              {{/if}}
            </label>
            {{#if this.key.filename}}
              <Hds::Button
                @text="Clear key"
                @icon="x"
                @isIconOnly={{true}}
                @color="secondary"
                class="file-delete-button"
                {{on "click" (action "clearKey")}}
                data-test-pgp-clear={{true}}
              />
            {{/if}}
          </span>
        </div>
      </div>
    </div>
    <p class="help has-text-grey">
      {{#if this.fileHelpText}}
        {{this.fileHelpText}}
      {{else}}
        Select a PGP key from your computer
      {{/if}}
    </p>
  {{/if}}
</div>