@(gist: gitbucket.gist.model.Gist,
  comments: Seq[gitbucket.gist.model.GistComment],
  hasWritePermission: Boolean,
  repository: gitbucket.core.service.RepositoryService.RepositoryInfo)(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
@comments.map { comment =>
  <div class="panel panel-default issue-comment-box" id="comment-@comment.commentId">
    <div class="panel-heading">
      @helpers.avatar(comment.commentedUserName, 20)
      @helpers.user(comment.commentedUserName, styleClass="username strong")
      <span class="muted">
        commented
        @gitbucket.core.helper.html.datetimeago(comment.registeredDate)
      </span>
      <span class="pull-right">
      @if((hasWritePermission || context.loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false))){
        <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-pencil" aria-label="Edit"></i></a>&nbsp;
        <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-x" aria-label="Remove"></i></a>
      }
      </span>
    </div>
    <div class="panel-body issue-content markdown-body" id="commentContent-@comment.commentId">
      @helpers.markdown(
        markdown           = comment.content,
        repository         = repository,
        branch             = "master",
        enableWikiLink     = false,
        enableRefsLink     = true,
        enableLineBreaks   = true,
        enableTaskList     = true,
        hasWritePermission = hasWritePermission
      )
    </div>
  </div>
}
<script>
$(function(){
  $('.issue-comment-box i.octicon-pencil').click(function(){
    var id  = $(this).closest('a').data('comment-id');
    var url = '@context.path/gist/@gist.userName/@gist.repositoryName/_comments/' + id;
    var $content = $('#commentContent-' + id);

    if(!id){
      id  = $(this).closest('a').data('issue-id');
      url = '@helpers.url(repository)/issues/_data/' + id;
      $content = $('#issueContent');
    }

    $.get(url, { dataType : 'html' }, function(data){
      $content.empty().html(data);
    });
    return false;
  });
  $('.issue-comment-box i.octicon-x').click(function(){
    if(confirm('Are you sure you want to delete this?')) {
      var id = $(this).closest('a').data('comment-id');
      $.post('@context.path/gist/@gist.userName/@gist.repositoryName/_comments/' + id + '/_delete',
      function(data){
        if(data > 0) {
          $('#comment-' + id).prev('div.issue-avatar-image').remove();
          $('#comment-' + id).remove();
        }
      });
    }
    return false;
  });
  $(document).on('click', '.commit-comment-box i.icon-pencil', function(){
    var id  = $(this).closest('a').data('comment-id');
    var url = '@context.path/gist/@gist.userName/@gist.repositoryName/_comments/' + id;
    var $content = $('.commit-commentContent-' + id, $(this).closest('.box'));

    $.get(url, { dataType : 'html' }, function(data){
      $content.empty().html(data);
    });
    return false;
  });
  $(document).on('click', '.commit-comment-box i.icon-remove-circle', function(){
    if(confirm('Are you sure you want to delete this?')) {
      var id = $(this).closest('a').data('comment-id');
      $.post('@context.path/gist/@gist.userName/@gist.repositoryName/_comments/' + id + '/_delete',
      function(data){
        if(data > 0) {
          $('.commit-comment-' + id).closest('.not-diff').remove();
          $('.commit-comment-' + id).closest('.inline-comment').remove();
        }
      });
    }
    return false;
  });
});
</script>