<div class="image-input-container">
  <input
    #fileInput
    type="file"
    accept="image/png,image/jpeg,image/gif,image/webp,image/bmp,image/avif"
    hidden
    (change)="onFileSelected($event)"
  />
  <input
    [name]="props.name"
    [required]="!!props.required"
    [readonly]="props.readonly"
    [formControl]="formControl"
    [formlyAttributes]="field"
    matInput
    placeholder="https://..."
  />
  @if (IS_ELECTRON) {
    <button
      mat-stroked-button
      type="button"
      (click)="openFileExplorer()"
      [disabled]="props.readonly || isPickerBusy()"
      class="select-button"
    >
      <mat-icon>folder_open</mat-icon>
      {{ T.F.PROJECT.FORM_THEME.BTN_SELECT_IMAGE | translate }}
    </button>
  }
  @if (isUnsplashAvailable) {
    <button
      mat-stroked-button
      type="button"
      (click)="openUnsplashPicker()"
      [disabled]="props.readonly || !isUnsplashAvailable"
      class="unsplash-button"
    >
      <mat-icon>image</mat-icon>
      Load from Unsplash
    </button>
  }
</div>
