<div class="image-uploader__container">
    <div class="image-uploader__preview">
      {{#if (has-block)}}
        {{yield (component "avatar" src=@image loading=(eq @state "loading"))}}
      {{else}}
        <Avatar
          @src={{@image}}
          @loading={{eq @state "loading"}}
        />
      {{/if}}
    </div>
  <input {{did-insert this.setUploader}} type="file" accept={{or @acceptedFileTypes "image/jpeg, image/png"}} id={{concat "hidden-file-input-" (unique-id)}} hidden {{on "change" this.onFileChanged}} data-test-image-uploader-file-input>
  <div class="image-uploader__controls">
    <Boxel::Button @kind="secondary-light" @size="small" class="image-uploader__button" aria-label="Upload an image" data-test-image-uploader-upload-button {{on "click" this.upload}}>{{@cta}}</Boxel::Button>
    {{#if @image}}
      <Boxel::Button @kind="secondary-light" @size="small" class="image-uploader__button image-uploader__button--icon" aria-label="Remove current image" {{on "click" @onRemoveImage}} data-test-image-uploader-delete-button>{{svg-jar "trash" width=18 height=18}}</Boxel::Button>
    {{/if}}
  </div>
  {{#if (eq @state "error")}}
    <div class="image-uploader__error-message" data-test-image-uploader-error>
      {{@errorMessage}}
    </div>
  {{else}}
    <div class="image-uploader__requirements" data-test-image-uploader-requirements>
      {{@imageRequirements}}
    </div>
  {{/if}}
</div>
