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-card.uk-card-default.uk-card-small
          .uk-card-body
            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= currentImage.path, 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
                  #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]

          .uk-card-footer
            div(class="uk-flex-center", uk-grid)
              #file-save-btn(hidden).uk-width-auto
                button(
                  type="submit",
                ).uk-button.uk-button-primary Save