<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}}
      <pre class="masked-value display-only is-word-break">{{@value}}</pre>
    {{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"
      {{on "change" this.onChange}}
      {{on "keyup" (fn this.handleKeyUp @name)}}
      data-test-textarea
    />
  {{/if}}
  {{#if @allowCopy}}
    <CopyButton
      @clipboardText={{@value}}
      @success={{action (set-flash-message "Data copied!")}}
      class="copy-button button {{if @displayOnly 'is-compact'}}"
      data-test-copy-button
    >
      <Icon @name="clipboard-copy" aria-hidden="Copy value" />
    </CopyButton>
  {{/if}}
  {{#if @allowDownload}}
    <button type="button" class="button download-button" {{on "click" (fn (mut this.modalOpen) true)}}>
      <Icon data-test-download-icon @name="download" />
    </button>
  {{/if}}
  <button
    onclick={{this.toggleMask}}
    type="button"
    aria-label={{if this.showValue "mask value" "show value"}}
    title={{if this.showValue "mask value" "show value"}}
    class="{{if (eq @value '') 'has-text-grey'}} masked-input-toggle button"
    data-test-button="toggle-masked"
  >
    <Icon @name={{if this.showValue "eye" "eye-off"}} />
  </button>
</div>

{{! CONFIRM DOWNLOAD MODAL }}
{{#if @allowDownload}}
  <Modal
    @title="Download secret value?"
    @onClose={{action (mut this.modalOpen) false}}
    @isActive={{this.modalOpen}}
    @type="warning"
  >
    <section class="modal-card-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>
    </section>

    <footer class="modal-card-foot modal-card-foot-outlined">
      <DownloadButton
        class="button is-primary"
        @filename={{or @name "secret-value"}}
        @data={{@value}}
        @stringify={{this.stringifyDownload}}
        aria-label="Download secret value"
        @onSuccess={{fn (mut this.modalOpen) false}}
      >
        Download
      </DownloadButton>
      <button type="button" class="button is-secondary" {{on "click" (fn (mut this.modalOpen) false)}}>
        Cancel
      </button>
    </footer>
  </Modal>
{{/if}}