{{#modal-dialog action=closeModal}}
  {{#file-drop-zone
    accept=acceptedMimeTypes
    name="user[profile_image]"
    isUploading=isLoading
    onFileDrop=(action 'onFileDrop')}}

    <div class='card pd-2'>
      <div class='drop-zone drop-zone__border drop-zone__border--landscape flex flex--column flex--verticalCenter'>
        {{#if errorMessage}}
          <div class="flex__item">
            <h5 class="mg-b-1">
              <span class="inline-warning">{{i18n errorMessage}}</span>
            </h5>
          </div>
        {{/if}}

        <div class="flex__item pos-relative">
          <div class="drop-zone__upload-svg drop-zone__upload-svg--anim-backfill">
            {{partial 'svg/upload'}}
          </div>

          <div class="drop-zone__upload-svg drop-zone__upload-svg--anim-fill">
            {{partial 'svg/upload'}}
          </div>
        </div>

        {{#if isLoading}}
          <div class="flex__item">
            <h4 class="mg-1">{{i18n 'Uploading'}}</h4>
          </div>
        {{else}}
          <div class="flex__item">
            <h4 class="mg-1">{{i18n 'Drag and drop your image here'}}</h4>
          </div>
          <div class="flex__item">
            <button class="button button--hollow">
              {{t 'general.common.browse'}}
            </button>
          </div>
          {{#if showRecommendedSize}}
            <div class="flex__item">
              <p class="hint drop-zone__image-recommendation">
                {{#if communityCoverImage}}
                  {{i18n 'Required image size: 1200x180 and less than 3MB'}}
                {{else if communityAvatarImage}}
                  {{i18n 'Required image size: 600x800 and less than 1MB'}}
                {{else}}
                  {{i18n 'Recommended image size: 1200x380 and less than 3MB'}}
                {{/if}}
              </p>
            </div>
          {{/if}}
        {{/if}}
      </div>
    </div>
  {{/file-drop-zone}}
{{/modal-dialog}}
