@(collaborators: List[(gitbucket.core.model.Collaborator, Boolean)],
  isGroupRepository: Boolean,
  repository: gitbucket.core.service.RepositoryService.RepositoryInfo)(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
@import gitbucket.core.model.Permission
@gitbucket.core.html.main("Settings", Some(repository)){
  @gitbucket.core.html.menu("settings", repository){
    @gitbucket.core.settings.html.menu("collaborators", repository){
      <h3>Manage Collaborators</h3>
      <form id="form" method="post" action="@helpers.url(repository)/settings/collaborators">
        <ul id="collaborator-list" class="collaborator">
        </ul>
        @gitbucket.core.helper.html.account("userName", 200, false)
        <input type="button" class="btn btn-default" value="Add" id="addCollaborator"/>
        <input type="hidden" id="collaborators" name="collaborators" value="@collaborators.map(x => x._1.userName + ":" + x._1.permission).mkString(",")"/>
        <div>
          <span class="error" id="error-collaborators"></span>
        </div>
        <div class="align-right" style="margin-top: 20px;">
          <input type="submit" class="btn btn-success" value="Apply changes"/>
        </div>
      </form>
    }
  }
}
<script>
$(function(){
  $('input[type=submit]').click(function(){
    updateCollaborators();
  });

  $('#addCollaborator').click(function(){
    $('#error-collaborators').text('');
    var userName = $('#userName').val();

    // check empty
    if($.trim(userName) == ''){
      return false;
    }

    // check duplication
    var exists = $('#collaborator-list li').filter(function(){
      return $(this).data('name') == userName;
    }).length > 0;
    if(exists){
      $('#error-collaborators').text('User has been already added.');
      return false;
    }

    // check existence
    $.post('@context.path/_user/existence', { 'userName': userName },
      function(data, status){
        if(data != ''){
          addCollaboratorHTML(userName, '@Permission.ADMIN.name', data == 'group');
        } else {
          $('#error-collaborators').text('User does not exist.');
        }
      });
  });

  $(document).on('click', '.remove', function(){
    $(this).parent().remove();
  });

  // Don't submit form by ENTER key
  $('#userName').keypress(function(e){
    return !(e.keyCode == 13);
  });

  @collaborators.map { case (collaborator, isGroup) =>
    addCollaboratorHTML('@collaborator.collaboratorName', '@collaborator.permission', @isGroup);
  }

  function addCollaboratorHTML(userName, permission, isGroup){
    var adminButton = $('<label class="btn btn-default btn-mini"><input type="radio" value="@Permission.ADMIN.name" name="' + userName + '">Admin</label>');
    if(permission == '@Permission.ADMIN.name'){
      adminButton.addClass('active');
    }
    var writeButton = $('<label class="btn btn-default btn-mini"><input type="radio" value="@Permission.WRITE.name" name="' + userName + '">Write</label>');
    if(permission == '@Permission.WRITE.name'){
      writeButton.addClass('active');
    }
    var readButton = $('<label class="btn btn-default btn-mini"><input type="radio" value="@Permission.READ.name" name="' + userName + '">Read</label>');
    if(permission == '@Permission.READ.name'){
      readButton.addClass('active');
    }

    $('#collaborator-list').append($('<li>')
      .data('name', userName)
      .append($('<div class="btn-group permission" data-toggle="buttons">')
        .append(adminButton)
        .append(writeButton)
        .append(readButton))
      .append(' ')
      .append($('<a>').attr('href', '@context.path/' + userName).text(userName))
      .append(isGroup ? ' (group)' : '')
      .append($('<a href="#" class="remove pull-right">(remove)</a>')));
  }

  function updateCollaborators(){
    var collaborators = $('#collaborator-list li').map(function(i, e){
      var userName = $(e).data('name');
      return userName + ':' + $(e).find('label.active input[type=radio]').attr('value');
    }).get().join(',');
    $('#collaborators').val(collaborators);
  }
});
</script>