{{#unless this.inputOnly}}
  <div class="level is-mobile">
    <div class="level-left">
      <label class="is-label" data-test-text-label={{true}}>
        {{#if this.label}}
          {{this.label}}
          {{#if @helpText}}
            <InfoTooltip>
              <span data-test-help-text>
                {{@helpText}}
              </span>
            </InfoTooltip>
          {{/if}}
        {{else}}
          File
        {{/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="switch is-rounded is-success is-small"
          checked={{@file.enterAsText}}
          {{on "change" (toggle "enterAsText" @file)}}
        />
        <label for={{concat "useText-" this.elementId}}>
          Enter as text
        </label>
      </div>
    </div>
  </div>
{{/unless}}
<div
  class="field text-file box is-fullwidth is-marginless is-shadowless {{if this.inputOnly 'is-paddingless'}}"
  data-test-component="text-file"
>
  {{#if @file.enterAsText}}
    <div class="control has-icon-right">
      <textarea
        class="textarea {{unless this.showValue 'masked-font'}}"
        {{on "input" this.updateData}}
        data-test-text-file-textarea={{true}}
      >{{@file.value}}</textarea>
      <button
        {{on "click" this.toggleMask}}
        type="button"
        class="{{if (eq this.value '') 'has-text-grey'}} masked-input-toggle button {{if this.displayOnly 'is-compact'}}"
        data-test-button
      >
        <Icon @name={{if this.showValue "eye" "eye-off"}} />
      </button>
    </div>
    <p class="help has-text-grey">
      {{this.textareaHelpText}}
    </p>
  {{else}}
    <div class="control is-expanded">
      <div class="file has-name is-fullwidth">
        <div class="file-label" aria-label="Choose a file">
          <Input
            id="file-input"
            class="file-input"
            @type="file"
            {{on "change" this.pickedFile}}
            data-test-text-file-input={{true}}
          />
          <label for="file-input" class="file-cta button">
            <Icon @name="upload" class="has-light-grey-text" />
            Choose a file…
          </label>
          <span class="file-name has-text-grey-dark" data-test-text-file-input-label={{true}}>
            {{#if @file.fileName}}
              {{@file.fileName}}
            {{else}}
              No file chosen
            {{/if}}
          </span>
          {{#if @file.fileName}}
            <button
              type="button"
              class="file-delete-button"
              aria-label="Clear file selection"
              {{on "click" this.clearFile}}
              data-test-text-clear={{true}}
            >
              <Icon @name="x-circle" />
            </button>
          {{/if}}
        </div>
      </div>
    </div>
    <p class="help has-text-grey">
      {{this.fileHelpText}}
    </p>
  {{/if}}
</div>