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

<div
  class="masked-input {{if @displayOnly 'display-only'}} {{if @allowCopy 'allow-copy'}}"
  data-test-masked-input
  data-test-field
  ...attributes
>
  {{#if @displayOnly}}
    {{#if this.showValue}}
      {{! Show minus icon if there is no value }}
      {{#if (eq @value "")}}
        <Icon class="masked-value" @name="minus" />
      {{else}}
        <pre class="masked-value display-only is-word-break">{{@value}}</pre>
      {{/if}}
    {{else}}
      <pre class="masked-value display-only masked-font">***********</pre>
    {{/if}}
  {{else}}
    <Textarea
      id={{this.textareaId}}
      name={{@name}}
      @value={{@value}}
      class="input masked-value {{unless this.showValue 'masked-font'}}"
      rows={{1}}
      wrap="off"
      spellcheck="false"
      aria-label={{or @name "masked input"}}
      {{on "change" this.onChange}}
      {{on "keyup" (fn this.handleKeyUp @name)}}
      data-test-textarea={{or @name ""}}
    />
  {{/if}}
  {{#if @allowCopy}}
    <Hds::Copy::Button
      @text="Copy"
      @isIconOnly={{true}}
      @textToCopy={{this.copyValue}}
      @onError={{(fn (set-flash-message "Clipboard copy failed. The Clipboard API requires a secure context." "danger"))}}
      class="transparent has-padding-xxs"
      data-test-copy-button={{or this.copyValue true}}
    />
  {{/if}}
  {{#if @allowDownload}}
    <Hds::Button
      @text="Download secret value"
      @icon="download"
      @isIconOnly={{true}}
      @color="tertiary"
      class="has-padding-xxs"
      data-test-download-icon
      {{on "click" (fn (mut this.modalOpen) true)}}
    />
  {{/if}}
  <Hds::Button
    @text={{if this.showValue "hide value" "show value"}}
    @icon={{if this.showValue "eye-off" "eye"}}
    @isIconOnly={{true}}
    @color="tertiary"
    class="has-padding-xxs"
    data-test-button="toggle-masked"
    {{on "click" this.toggleMask}}
  />
</div>

{{! CONFIRM DOWNLOAD MODAL }}
{{#if this.modalOpen}}
  <Hds::Modal @color="warning" id="confirm-download-modal" @onClose={{fn (mut this.modalOpen) false}} as |M|>
    <M.Header @icon="alert-triangle">
      Download secret value?
    </M.Header>
    <M.Body>
      This download is
      <strong>unencrypted</strong>. Are you sure you want to download this secret data as plaintext?

      <div class="has-top-margin-m">
        <Hds::Form::Toggle::Field
          checked={{this.stringifyDownload}}
          {{on "change" this.toggleStringifyDownload}}
          data-test-stringify-toggle
          as |F|
        >
          <F.Label>Stringify secret value</F.Label>
          <F.HelperText>Preserve formatting for JSON values.</F.HelperText>
        </Hds::Form::Toggle::Field>
      </div>
    </M.Body>
    <M.Footer as |F|>
      <Hds::ButtonSet>
        <DownloadButton
          @filename={{or @name "secret-value"}}
          @data={{@value}}
          @stringify={{this.stringifyDownload}}
          @onSuccess={{fn (mut this.modalOpen) false}}
        />
        <Hds::Button @text="Cancel" @color="secondary" {{on "click" F.close}} />
      </Hds::ButtonSet>
    </M.Footer>
  </Hds::Modal>
{{/if}}