{{!-- TODO: remove inline styles: --}}
<input type="file"
  accept="image/png"
  name={{inputName}}
  required
  onchange={{action 'onInputChange'}}
  style="display: none; height: 0; width: 0;">

<figure style="display: flex; justify-content: center; margin: auto; height: 85px; width: 85px;">
  <img src={{imgSrc}} style={{imageStyle}}>

  {{#unless file}}
    <p style="margin: auto;">
      {{svg-icon path='svg/plus'}}
      <span class="strong">{{i18n 'Upload Image'}}</span>
    </p>
  {{/unless}}
</figure>

<figcaption class="sub-text">
  {{styled-i18n '%{width} x %{height}px' (hash width=imageWidthRequirement height=imageHeightRequirement)}}
</figcaption>

{{#if (or showBadImageError showFileSizeError showImageDimensionError)}}
  <div class="balloon balloon--up balloon--center balloon--alert balloon--fancy show">
    {{#if showBadImageError}}
      {{i18n 'Bad PNG file'}}
    {{else if showFileSizeError}}
      {{styled-i18n 'Max file size is %{number} KB' (hash number=fileSizeLimitKilobytes)}}
    {{else if showImageDimensionError}}
      {{styled-i18n 'PNG must be %{width} x %{height}px' (hash width=imageWidthRequirement height=imageHeightRequirement)}}
    {{/if}}
  </div>
{{else if (not file)}}
  <div class="balloon balloon--tooltip balloon--down balloon--center">
    {{i18n 'Choose a PNG to upload'}}
  </div>
{{/if}}
