@(gist: Option[gitbucket.gist.model.Gist],
  files: Seq[(String, gitbucket.core.util.JGitUtil.ContentInfo)],
  userName: Option[String])(implicit context: gitbucket.core.controller.Context)
@import gitbucket.gist.model.Mode
@import gitbucket.core.view.helpers
@gitbucket.core.html.main("Snippets"){
  <link href="@context.path/plugin-assets/gist/style.css?@helpers.hashQuery" rel="stylesheet">
  <div class="content-wrapper main-center">
    <div class="gist-content">
      <div class="head">
        <div id="error"></div>
        @if(gist.isEmpty){
          <h1 style="margin: 0px;">New snippet</h1>
        } else {
          @gist.map { x =>
            @helpers.avatar(gist.get.userName, 24)
            Editing
            <a class="strong" href="@context.path/gist/@gist.get.userName/@gist.get.repositoryName">@gist.get.title</a>
            @if(gist.get.mode == Mode.Secret.code){
              <span class="label label-warning">Secret</span>
            }
            @if(gist.get.mode == Mode.Private.code){
              <span class="label label-warning">Private</span>
            }
            <div class="pull-right">
              <a href="@context.path/gist/@gist.get.userName/@gist.get.repositoryName/delete" class="btn btn-danger" id="delete">Delete</a>
            </div>
            <div class="muted" style="margin-left: 30px; font-size: 80%;">
              Created at @gist.get.registeredDate
            </div>
          }
        }
      </div>
      <div class="content body">
        <form id="form" method="POST" action="#">
          <input type="text" name="description" id="description" class="form-control" style="margin-bottom: 8px;" value="@gist.map(_.description)" placeholder="Snippet descriptions..."/>
          <div id="editors">
            @files.zipWithIndex.map { case ((fileName, content), i) => {
              @gitbucket.gist.html.editor(i, fileName, content)
            }}
          </div>
          <div>
            <input type="button" value="Add file" class="btn btn-default" id="add_file">
            <div class="pull-right">
              @if(gist.isDefined){
                <a href="@context.path/gist/@gist.get.userName/@gist.get.repositoryName" class="btn btn-default">Cancel</a>
              }
              <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default btn-mini @if(gist.isEmpty || gist.get.mode == Mode.Public.code ){active}">
                  <input type="radio" value="PUBLIC" name="mode" @if(gist.isEmpty || gist.get.mode == Mode.Public.code ){checked}>Public
                </label>
                <label class="btn btn-default btn-mini @if(gist.isDefined && gist.get.mode == Mode.Secret.code ){active}">
                  <input type="radio" value="SECRET" name="mode" @if(gist.isDefined && gist.get.mode == Mode.Secret.code ){checked}>Secret
                </label>
                <label class="btn btn-default btn-mini @if(gist.isDefined && gist.get.mode == Mode.Private.code){active}">
                  <input type="radio" value="PRIVATE" name="mode" @if(gist.isDefined && gist.get.mode == Mode.Private.code){checked}>Private
                </label>
              </div>
              @if(gist.isDefined){
                <input type="submit" value="Update" class="btn btn-success submit_snippet" id="update_snippet">
              } else {
                <input type="submit" value="Create" class="btn btn-success submit_snippet" id="create_snippet">
              }
            </div>
          </div>
          @userName.map { userName =>
            <input type="hidden" id="userName" name="userName" value="@userName"/>
          }
          <input type="hidden" id="count" name="count" value="@files.size"/>
        </form>
      </div>
    </div>
  </div>

  <script src="@helpers.assets("/vendors/ace/ace.js")" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="@helpers.assets("/vendors/jsdifflib/difflib.js")"></script>
  <script type="text/javascript" src="@helpers.assets("/vendors/jsdifflib/diffview.js")"></script>
  <link href="@helpers.assets("/vendors/jsdifflib/diffview.css")" type="text/css" rel="stylesheet" />
  <script>
  $(function(){
    $('#create_snippet').click(function(){
      $('#form').attr('action', '@context.path/gist/_new')
    });

    $('#add_file').click(function(){
      var count = parseInt($('#count').val());
      $.get('@context.path/gist/_add?count=' + count, function(html){
        $('#editors').append(html);
        $('#count').val(count + 1);
      });
    });

    $('#update_snippet').click(function(){
      @gist.map { gist =>
        $('#form').attr('action', '@context.path/gist/@gist.userName/@gist.repositoryName/edit')
      }
    });

    $('.submit_snippet').click(function(){
      var count = parseInt($('#count').val());
      if(count == 0){
        displayError('File is required.');
        return false;
      }
      var value = null;
      for(var i = 0; i < count; i++){
        if($('#editor-area-' + i).length == 1){
          value = ace.edit('editor-' + i).getValue();
          if(value == ''){
            displayError('Files can\'t be empty.');
            return false;
          } else {
            $('#content-' + i).val(ace.edit('editor-' + i).getValue());
          }
        }
      }
      if(value == null){
        displayError('At least one file is required.');
        return false;
      }
      return true;
    });

    $('#delete').click(function(){
      return confirm('Are you positive you want to delete this Gist?');
    });

    function displayError(message){
      $('#error' ).html(
        '<div class="alert alert-error">' +
        '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
        message +
        '</div>'
      );
      $('html, body').animate({
        scrollTop: $("#error").offset().top
      }, 0);
    }
  });
  </script>
}