<bit-form-field [control]="formFieldControl">
  <ng-content select="bit-label" ngProjectAs="bit-label" />

  <!-- The focusable control; bit-form-field's <label for> targets this via [id]. Rendered as a
       real bitPrefix so it reuses the field's pill styling. -->
  <button
    type="button"
    bitPrefix
    [id]="inputId()"
    [attr.aria-describedby]="describedBy()"
    [attr.aria-disabled]="disabled() || null"
    class="tw-whitespace-nowrap tw-border-0 tw-bg-transparent tw-py-2 tw-text-sm tw-cursor-pointer aria-disabled:tw-cursor-not-allowed"
    [class.tw-text-fg-inactive]="disabled()"
    (click)="openPicker()"
    (blur)="onBlur()"
  >
    {{ "chooseFile" | i18n }}
  </button>

  <!-- Filename readout in the field's default content. Clickable so the whole field opens the
       picker; not a focus stop. Keyboard access is provided by the "Choose file" button above,
       so the missing keyboard handler here is a false positive. NOSONAR -->
  <!-- prettier-ignore -->
  <div class="tw-flex tw-size-full tw-items-center" [class.tw-cursor-pointer]="!disabled()" [class.tw-cursor-not-allowed]="disabled()" (click)="openPicker()"> <!-- NOSONAR -->
    @if (fileName(); as name) {
      <bit-file-name [name]="name" class="tw-text-sm" />
    } @else {
      <span
        class="tw-text-sm"
        [class.tw-text-fg-body-subtle]="!disabled()"
        [class.tw-text-fg-inactive]="disabled()"
      >
        {{ "noFileSelected" | i18n }}
      </span>
    }
  </div>

  <!-- Hidden native input, invoked programmatically by the button. -->
  <input
    #fileInput
    type="file"
    [id]="fileInputId()"
    [attr.aria-labelledby]="inputId()"
    class="tw-sr-only"
    tabindex="-1"
    aria-hidden="true"
    [accept]="accept()"
    [disabled]="disabled() || null"
    (change)="onFileChange($event)"
  />

  <span [id]="statusId()" class="tw-sr-only" aria-live="polite" aria-atomic="true">
    {{ fileName() ? ("fileChosen" | i18n: fileName()) : ("chooseFile" | i18n) }}
  </span>

  <ng-content select="bit-hint" ngProjectAs="bit-hint" />
</bit-form-field>
