@(repository: service.RepositoryService.RepositoryInfo, content: String, enableWikiLink: Boolean, enableRefsLink: Boolean,
  style: String = "", placeholder: String = "Leave a comment", elastic: Boolean = false)(implicit context: app.Context)
@import context._
@import view.helpers._
<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Write</a></li>
    <li><a href="#tab2" data-toggle="tab" id="preview">Preview</a></li>
    @*
    <li class="pull-right">
      <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown Syntax Guide</a>
    </li>
    *@
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <span id="error-content" class="error"></span>
      <div id="clickable">
        <textarea id="content" name="content"@if(style.nonEmpty){ style="@style"} placeholder="@placeholder">@content</textarea>
        <span class="muted">Attach images by dragging &amp; dropping, or selecting them.</span>
      </div>
    </div>
    <div class="tab-pane" id="tab2">
      <div class="markdown-body" id="preview-area">
      </div>
    </div>
  </div>
</div>
<link  href="@assets/google-code-prettify/prettify.css" type="text/css" rel="stylesheet"/>
<script src="@assets/google-code-prettify/prettify.js"></script>
<script>
$(function(){
  @if(elastic){
    $('#content').elastic();
  }

  $('#preview').click(function(){
    $('#preview-area').html('<img src="@assets/common/images/indicator.gif"> Previewing...');
    $.post('@url(repository)/_preview', {
      content        : $('#content').val(),
      enableWikiLink : @enableWikiLink,
      enableRefsLink : @enableRefsLink
    }, function(data){
      $('#preview-area').html(data);
      prettyPrint();
    });
  });

  @if(!enableWikiLink){
    $("div#clickable").dropzone({
      url: '@path/upload/image/@repository.owner/@repository.name',
      maxFilesize: 10,
      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] + '](@url(repository)/_attached/' + id + ')';
        $('#content').val($('#content').val() + images);
        file.previewElement.remove();
      }
    });
  }
});
</script>