@(account: Option[model.Account], members: List[(String, Boolean)])(implicit context: app.Context)
@import context._
@import view.helpers._
@main(if(account.isEmpty) "Create group" else "Edit group"){
<div style="width: 700px; margin: 10px auto;">
  <form id="form" method="post" action="@if(account.isEmpty){@path/groups/new} else {@path/@account.get.userName/_editgroup}" validate="true">
      <div class="row-fluid">
        <div class="span7">
          <fieldset>
            <label for="groupName" class="strong">Group name</label>
            <div>
              <span id="error-groupName" class="error"></span>
            </div>
            <input type="text" name="groupName" id="groupName" value="@account.map(_.userName)"@if(account.isDefined){ readonly}/>
            @*
            @if(account.isDefined){
              <label for="removed">
                <input type="checkbox" name="removed" id="removed" value="true" @if(account.get.isRemoved){checked}/>
                Disable
              </label>
            }
            *@
          </fieldset>
          <fieldset>
            <label class="strong">URL (Optional)</label>
            <div>
              <span id="error-url" class="error"></span>
            </div>
            <input type="text" name="url" id="url" style="width: 300px;" value="@account.map(_.url)"/>
          </fieldset>
          <fieldset>
            <label for="avatar" class="strong">Image (Optional)</label>
            @helper.html.uploadavatar(account)
          </fieldset>
        </div>
        <div class="span5">
          <fieldset>
            <label class="strong">Members</label>
            <ul id="member-list" class="collaborator">
              @members.map { case (userName, isManager) =>
                <li data-name="@userName">
                  <input type="checkbox" class="is_manager" id="is_manager_@userName" @if(isManager){checked}/>
                  <a href="@path/@url(userName)">@userName</a>
                  <a href="#" class="remove">(remove)</a>
                </li>
              }
            </ul>
            @helper.html.account("memberName", 200)
            <input type="button" class="btn" value="Add" id="addMember"/>
            <input type="hidden" id="members" name="members" value="@members.map(x => x._1 + ":" + x._2).mkString(",")"/>
            <div>
              <span class="error" id="error-members"></span>
            </div>
          </fieldset>
        </div>
      </div>
      <fieldset class="margin">
        @if(account.isDefined){
          <div class="pull-right">
            <a href="@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="@url(account.get.userName)" class="btn">Cancel</a>
        }
      </fieldset>
  </form>
</div>
}
<script>
$(function(){
  $('#addMember').click(function(){
    $('#error-memberName').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-memberName').text('User has been already added.');
      return false;
    }

    // check existence
    $.post('@path/admin/users/_usercheck', {
      'userName': userName
    }, function(data, status){
      if(data == 'true'){
        // add member
        $('#member-list').append($('<li>')
          .data('name', userName)
          .append($('<input type="checkbox" class="is_manager">').attr('id', 'is_manager_' + userName))
          .append($('<a>').attr('href', '@path/' + userName).text(userName))
          .append(' ')
          .append($('<a>').attr('href', '#').addClass('remove').text('(remove)')));
        $('#members').val('');

        // update hidden value
        updateMembers();
      } else {
        $('#error-memberName').text('User does not exist.');
      }
    });
  });

  $(document).on('click', '.remove', function(){
    // remove member
    $(this).parent().remove();
    // update hidden value
    updateMembers();
    $('#members').val(members);
  });

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

  $('.is_manager').change(function(){
    updateMembers();
  });

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

  function updateMembers(){
    var members = $('#member-list li').map(function(i, e){
      var userName = $(e).data('name');
      return userName + ':' + $('#is_manager_' + userName).prop('checked');
    }).get().join(',');
    $('#members').val(members);
  }
});
</script>