@(collaborators: List[String], repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
@import context._
@html.main("Settings"){
  @html.header("settings", repository)
  @menu("collaborators", repository){
    <h3>Manage Collaborators</h3>
    <ul class="collaborator">
      @collaborators.map { collaboratorName =>
        <li>
          <a href="@path/@collaboratorName">@collaboratorName</a>
          <a href="@path/@repository.owner/@repository.name/settings/collaborators/remove?name=@collaboratorName" class="remove">(remove)</a>
        </li>
      }
    </ul>
    <form method="POST" action="@path/@repository.owner/@repository.name/settings/collaborators/add" validate="true">
      <div>
        <span class="error" id="error-userName"></span>
      </div>
      <input type="text" name="userName" id="userName" style="width: 300px; margin-bottom: 0px;"/>
      <input type="submit" class="btn" value="Add"/>
    </form>
  }
}
<script>
$('#userName').typeahead({
  source: function (query, process) {
    return $.get('@path/@repository.owner/@repository.name/settings/collaborators/proposals', { query: query },
      function (data) {
        return process(data.options);
      });
  }
});
</script>