@(owner: String, repository: String)(textarea: Html)(implicit context: app.Context)
@import context._
<div class="muted attachable">
  @textarea
  <div class="clickable">Attach images by dragging &amp; dropping, or selecting them.</div>
</div>
@defining("(id=\")([\\w\\-]*)(\")".r.findFirstMatchIn(textarea.body).map(_.group(2))){ textareaId =>
<script>
$(function(){
  $([$('#@textareaId').closest('div')[0], $('#@textareaId').next('div')[0]]).dropzone({
    url: '@path/upload/image/@owner/@repository',
    maxFilesize: 10,
    acceptedFiles: 'image/*',
    dictInvalidFileType: 'Unfortunately, we don\'t support that file type. Try again with a PNG, GIF, or JPG.',
    previewTemplate: "<div class=\"dz-preview\">\n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress>Uploading your images...</span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
    success: function(file, id) {
      var images = '\n![' + file.name.split('.')[0] + '](@baseUrl/@owner/@repository/_attached/' + id + ')';
      $('#@textareaId').val($('#@textareaId').val() + images);
      $(file.previewElement).prevAll('div.dz-preview').addBack().remove();
    }
  });

  // Adjust clickable area width
  $('#@textareaId').next('div.clickable').css('width', ($('#@textareaId').width() + 8) + 'px');
});
</script>
}