<div
  class="masked-input {{if this.displayOnly 'display-only'}} {{if this.allowCopy 'allow-copy'}}"
  data-test-masked-input
  data-test-field
>
  {{#if this.displayOnly}}
    {{#if this.showValue}}
      <pre class="masked-value display-only is-word-break">{{this.value}}</pre>
    {{else}}
      <pre class="masked-value display-only masked-font">***********</pre>
    {{/if}}
  {{else if this.inputField}}
    <input
      autocomplete="off"
      spellcheck="false"
      value={{this.value}}
      class="input {{unless this.showValue 'masked-font'}}"
      onchange={{action "updateValue"}}
      data-test-input
    />
  {{else}}
    {{! template-lint-disable no-down-event-binding }}
    <textarea
      class="input masked-value {{unless this.showValue 'masked-font'}}"
      rows={{1}}
      wrap="off"
      onkeydown={{action this.onKeyDown}}
      onchange={{action "updateValue"}}
      onkeyup={{action (action "handleKeyUp" this.name) value="target.value"}}
      value={{this.value}}
      spellcheck="false"
      data-test-textarea
    ></textarea>
    {{! template-lint-enable no-down-event-binding }}
  {{/if}}
  {{#if this.allowCopy}}
    <CopyButton
      @clipboardText={{this.value}}
      @success={{action (set-flash-message "Data copied!")}}
      class="copy-button button {{if this.displayOnly 'is-compact'}}"
      data-test-copy-button
    >
      <Icon @name="clipboard-copy" aria-hidden="Copy value" />
    </CopyButton>
  {{/if}}
  <button
    onclick={{action "toggleMask"}}
    type="button"
    class="{{if (eq this.value '') 'has-text-grey'}} masked-input-toggle button"
    data-test-button="toggle-masked"
  >
    <Icon @name={{if this.showValue "eye" "eye-off"}} />
  </button>
</div>