@(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(){
  try {
    $([$('#@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();
      }
    });
  } catch(e) {
    if (e.message !== "Dropzone already attached.") {
      throw e;
    }
  }

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