@(i: Int,
  fileName: String,
  content: gitbucket.core.util.JGitUtil.ContentInfo)(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
<div class="panel panel-default" id="editor-area-@i">
  <div class="panel-heading" style="padding: 6px;">
    <div class="pull-right">
      <select id="wrap-@i" class="form-control" style="margin-bottom: 0px; padding: 0px;">
        <optgroup label="Line Wrap Mode">
          <option value="false">No wrap</option>
          <option value="true">Soft wrap</option>
        </optgroup>
      </select>
    </div>
    <a href="javascript:void(0);" style="padding-left: 8px; padding-right: 6px;" id="remove-@i" data-index="@i"><span class="octicon octicon-x"></span></a>
    <input type="text" id="fileName-@i" name="fileName-@i" class="form-control" value="@fileName" placeholder="Name this file..." style="width: 300px; margin-bottom: 0px; display: inline;">
  </div>
  <div class="panel-body">
    <div id="editor-@i" class="editor" data-index="@i" style="width: 100%; height: 400px;"></div>
  </div>
</div>
<input type="hidden" id="content-@i" name="content-@i" value=""/>
<input type="hidden" id="charset-@i" name="charset-@i" value="@content.charset"/>
<input type="hidden" id="lineSeparator-@i" name="lineSeparator-@i" value="@content.lineSeparator"/>
<input type="hidden" id="initial-@i" value="@content.content"/>
<script>
$(function(){
  $('#editor-@i').text($('#initial-@i').val());

  var editor = ace.edit('editor-@i');
  editor.setTheme("ace/theme/monokai");

  if(localStorage.getItem('gitbucket:editor:wrap') == 'true'){
    editor.getSession().setUseWrapMode(true);
    $('#wrap-@i').val('true');
  }

  @if(fileName.nonEmpty){
    var modelist = ace.require("ace/ext/modelist");
    var mode = modelist.getModeForPath("@fileName");
    editor.getSession().setMode(mode.mode);
  }

  $('#wrap-@i').change(function(){
    if($('#wrap-@i option:selected').val() == 'true'){
      editor.getSession().setUseWrapMode(true);
      localStorage.setItem('gitbucket:editor:wrap', 'true');
    } else {
      editor.getSession().setUseWrapMode(false);
      localStorage.setItem('gitbucket:editor:wrap', 'false');
    }
  });

  $('#remove-@i').click(function(){
    if(confirm('Remove this file. Are you sure?')){
      $('#editor-area-@i').remove();
    }
  });
});
</script>