<div class="image-field">
  @if (value()) {
    <img class="image-field__thumb" [src]="value()" alt="" />
  } @else {
    <div class="image-field__thumb image-field__thumb--empty"></div>
  }
  <div class="image-field__controls">
    <app-input [ngModel]="value() || ''" [disabled]="disabled()" (ngModelChange)="setValue($event)" />
    <div class="image-field__actions">
      <app-button variant="secondary" size="sm" [disabled]="disabled()" (click)="openPicker()">
        {{ (value() ? 'adminCategories.replaceImage' : 'adminCategories.chooseImage') | translate }}
      </app-button>
      @if (value()) {
        <app-button variant="ghost" size="sm" [disabled]="disabled()" (click)="remove()">{{ 'common.remove' | translate }}</app-button>
      }
    </div>
  </div>
</div>
<app-media-picker [open]="pickerOpen" (selected)="onPicked($event)" (closed)="pickerOpen = false" />
