         <p className="form-help error">{@state.error.toString()}</p>}
       <form style={style}>
         <p>
-          Username
-          <br />
-
-          <input type="text" ref="usernameInput" className="standard-input" />
+          Username: <input type="text" ref="usernameInput" className="standard-input" />
           <br />
 
           <span className="column columns-container">

          </tr>
          <tr>
            <th>Tester</th>
            <td>?</td>
          </tr>
          <tr>
            <th>Translator</th>
            <td>Translators will have access to the translation site?</td>
          </tr>
        </tbody>
      </table>
    </div>

  renderUserRow: (projectRoleSet, user) ->
    <p>
      <strong>{user.display_name}</strong>{' '}
      <button type="button" className="secret-button" onClick={@removeRoleSet.bind this, projectRoleSet}>&times;</button>
      <br />

      <span className="columns-container inline">
        {for role in POSSIBLE_ROLES
          toggleThisRole = @toggleRole.bind this, projectRoleSet, role
          # TODO: Translate this.
          <label key={role}>
            <input type="checkbox" name={role} checked={role in projectRoleSet.roles} disabled={role is 'owner' or projectRoleSet.id in @state.saving} onChange={toggleThisRole} />{' '}
            {role[...1].toUpperCase()}{role[1...]}
          </label>}
      </span>
    </p>

  toggleRole: (projectRoleSet, role) ->
    index = projectRoleSet.roles.indexOf role

apiClient = require '../../api/client'

POSSIBLE_ROLES = [
  'collaborator'
  'expert'
  'scientist'
  'moderator'
  'tester'
  # 'translator'
]

CollaboratorCreator = React.createClass
