@(account: Option[gitbucket.core.model.Account], members: List[gitbucket.core.model.GroupMember])(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
@gitbucket.core.html.main(if(account.isEmpty) "Create group" else "Edit group"){
<div class="content-wrapper main-center">
  <div class="content body">
    <h2>@{if(account.isEmpty) "Create group" else "Edit group"}</h2>
    <form id="form" method="post" action="@if(account.isEmpty){@context.path/groups/new} else {@context.path/@account.get.userName/_editgroup}" validate="true">
      <div class="row">
        <div class="col-md-5">
          <fieldset class="form-group">
            <label for="groupName" class="strong">Group name</label>
            <div>
              <span id="error-groupName" class="error"></span>
            </div>
            <input type="text" name="groupName" id="groupName" class="form-control" value="@account.map(_.userName)"@if(account.isDefined){ readonly}/>
          </fieldset>
          <fieldset class="form-group">
            <label class="strong">URL (Optional)</label>
            <div>
              <span id="error-url" class="error"></span>
            </div>
            <input type="text" name="url" id="url" class="form-control" value="@account.map(_.url)"/>
          </fieldset>
          <fieldset class="form-group">
            <label for="groupDescription" class="strong">Description (Optional)</label>
            <input type="text" name="groupDescription" id="groupDescription"
              value="@account.map(_.groupDescription)"
              style="width: 300px;" />
          </fieldset>
          <fieldset class="form-group">
            <label for="avatar" class="strong">Image (Optional)</label>
            @gitbucket.core.helper.html.uploadavatar(account)
          </fieldset>
        </div>
        <div class="col-md-7">
          <fieldset class="form-group">
            <label class="strong">Members</label>
            <ul id="member-list" class="collaborator">
            </ul>
            @gitbucket.core.helper.html.account("memberName", 200, true, false)
            <input type="button" class="btn btn-default" value="Add" id="addMember"/>
            <input type="hidden" id="members" name="members" value="@members.map(member => member.userName + ":" + member.isManager).mkString(",")"/>
            <div>
              <span class="error" id="error-members"></span>
            </div>
          </fieldset>
        </div>
      </div>
      <fieldset class="border-top">
        @if(account.isDefined){
          <div class="pull-right">
            <a href="@helpers.url(account.get.userName)/_deletegroup" id="delete" class="btn btn-danger">Delete group</a>
          </div>
        }
        <input type="submit" class="btn btn-success" value="@if(account.isEmpty){Create group} else {Update group}"/>
        @if(account.isDefined){
          <a href="@helpers.url(account.get.userName)" class="btn btn-default">Cancel</a>
        }
      </fieldset>
    </form>
  </div>
</div>
}
<script>
$(function(){
  $('input[type=submit]').click(function(){
    updateMembers();
  });

  $('#addMember').click(function(){
    $('#error-members').text('');
    var userName = $('#memberName').val();

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

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

    // check existence
    $.post('@context.path/_user/existence', { 'userName': userName },
      function(data, status){
        if(data == 'user'){
          addMemberHTML(userName, false);
        } else {
          $('#error-members').text('User does not exist.');
        }
      });
  });

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

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

  $('#delete').click(function(){
    return confirm('Once you delete this group, there is no going back.\nAre you sure?');
  });

  @members.map { member =>
    addMemberHTML('@member.userName', @member.isManager);
  }

  function addMemberHTML(userName, isManager){
    var memberButton = $('<label class="btn btn-default btn-mini"><input type="radio" value="false" name="' + userName + '">Member</label>');
    if(!isManager){
      memberButton.addClass('active');
    }
    var managerButton = $('<label class="btn btn-default btn-mini"><input type="radio" value="true" name="' + userName + '">Manager</label>');
    if(isManager){
      managerButton.addClass('active');
    }

    $('#member-list').append($('<li>')
      .data('name', userName)
      .append($('<div class="btn-group is_manager" data-toggle="buttons">')
        .append(memberButton)
        .append(managerButton))
      .append(' ')
      .append($('<a>').attr('href', '@context.path/' + userName).text(userName))
      .append(' ')
      .append($('<a href="#" class="remove pull-right">(remove)</a>')));
  }

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