discourse/app/assets/javascripts/admin/templates/groups.js.handlebars

<!-- work in progress, please ignore -->
<div class='row groups'>
  <div class='content-list span6'>
    <h3>{{i18n admin.groups.edit}}</h3>
    <ul>
      {{#each group in model}}
        <li>
        <a href="#" {{action "edit" group}} {{bindAttr class="group.active"}}>{{group.name}} <span class="count">{{group.userCountDisplay}}</span></a>
        </li>
      {{/each}}
    </ul>
    <div class='controls'>
      <button class='btn' {{bindAttr disabled="refreshingAutoGroups"}} {{action "refreshAutoGroups"}}>Refresh</button>
      <button class='btn' {{action newGroup}}>New</button>
    </div>
  </div>

  <div class='content-editor'>
    {{#if model.active}}
      {{#if model.active.loaded}}
        {{#with model.active}}
          {{#if automatic}}
            <h3>{{name}}</h3>
          {{else}}
            {{textField value=name placeholderKey="admin.groups.name_placeholder"}}
          {{/if}}

          {{view Discourse.UserSelector id="group-users" placeholderKey="admin.groups.selector_placeholder" tabindex="1" usernamesBinding="usernames"}}
          <div class='controls'>
            <button {{action save this}} {{bindAttr disabled="disableSave"}} class='btn'>{{i18n admin.customize.save}}</button>
            {{#unless automatic}}
              {{#if id}}
                <a {{action destroy this}} class='delete-link'>{{i18n admin.customize.delete}}</a>
              {{/if}}
            {{/unless}}
          </div>
        {{/with}}
      {{else}}
        <div class='spinner'>{{i18n loading}}</div>
      {{/if}}
    {{else}}
      nothing here yet
    {{/if}}
  </div>
</div>