mixin renderFileUploadImage (actionUrl, containerId, imageId, imageClass, defaultImage, currentImage, cropperOptions)
  div(id= containerId).dtp-file-upload
    form(method="POST", action= actionUrl, enctype="multipart/form-data", onsubmit= "return dtp.app.submitImageForm(event);").uk-form
      .uk-margin
        .uk-tile.uk-tile-default.uk-padding-small
          div(uk-grid).uk-flex-middle.uk-flex-center
            div(class="uk-width-1-1 uk-width-auto@m")
              .upload-image-container.size-512
                if !!currentImage
                  img(id= imageId, src= `/image/${currentImage._id}`, class= imageClass).sb-large
                else
                  img(id= imageId, src= defaultImage, class= imageClass)

            div(class="uk-width-1-1 uk-width-auto@m")
              .uk-text-small.uk-margin(hidden= !!currentImage)
                if !currentImage
                  #file-select
                    .uk-margin(class="uk-text-center uk-text-left@m")
                      span.uk-text-middle Select an image
                      div(uk-form-custom).uk-margin-small-left
                        input(
                          type="file",
                          formenctype="multipart/form-data",
                          accept=".jpg,.png,image/jpeg,image/png",
                          data-file-select-container= containerId,
                          data-file-select="test-image-upload",
                          data-file-size-element= "file-size",
                          data-file-max-size= 15 * 1024000,
                          data-image-id= imageId,
                          data-cropper-options= cropperOptions,
                          onchange="return dtp.app.selectImageFile(event);",
                        )
                        button(type="button", tabindex="-1").uk-button.uk-button-default Select

                #file-info(class="uk-text-center uk-text-left@m", hidden)
                  #file-name.uk-text-bold
                  if currentImage
                    div resolution: #[span#image-resolution-w= numeral(currentImage.metadata.width).format('0,0')]x#[span#image-resolution-h= numeral(currentImage.metadata.height).format('0,0')]
                    div size: #[span#file-size= numeral(currentImage.metadata.size).format('0,0.00b')]
                    div last modified: #[span#file-modified= moment(currentImage.created).format('MMM DD, YYYY')]
                  else
                    div resolution: #[span#image-resolution-w 512]x#[span#image-resolution-h 512]
                    div size: #[span#file-size N/A]
                    div last modified: #[span#file-modified N/A]

          div(class="uk-flex-center", uk-grid)
            #remove-btn(hidden= !currentImage).uk-width-auto
              button(
                type= "button",
                data-image-type= imageId,
                onclick= "return dtp.app.removeImageFile(event);",
              ).uk-button.uk-button-danger Remove

            #file-save-btn(hidden).uk-width-auto
              button(
                type="submit",
              ).uk-button.uk-button-primary Save
