<div class="root">
  <div class="button-file" [ngClass]="classes" [ngbTooltip]="buttonTooltip()">
    @if (icon()) {
      <my-global-icon [iconName]="icon()"></my-global-icon>
    }

    <span>{{ inputLabel() }}</span>

    <input
      type="file"
      [name]="inputName()" [id]="inputName()" [accept]="extensions()"
      (change)="fileChange($event)" [(ngModel)]="fileInputValue"
      />
  </div>

  @if (displayFilename() === true && filename) {
    <div class="filename">{{ filename }}</div>
  }

  @if (displayReset() && file) {
    <button i18n class="reset-button reset-button-small ms-2" (click)="reset()">Reset</button>
  }
</div>
