<DModalBody
  @title="admin.badges.badge_groupings.modal_title"
  @class="badge-groupings-modal"
>
  <div class="badge-groupings">
    <ul class="badge-groupings-list">
      {{#each this.workingCopy as |wc|}}
        <li class="badge-grouping-item">
          <div class="badge-grouping">
            {{#if wc.editing}}
              <Input @value={{wc.name}} class="badge-grouping-name-input" />
              <DButton @action={{action "save" wc}} @icon="check" />
            {{else}}
              <span>{{wc.displayName}}</span>
            {{/if}}
          </div>
          <div class="actions">
            <DButton
              @action={{action "edit" wc}}
              @disabled={{wc.system}}
              @icon="pencil-alt"
            />
            <DButton @action={{action "up" wc}} @icon="chevron-up" />
            <DButton @action={{action "down" wc}} @icon="chevron-down" />
            <DButton
              @action={{action "delete" wc}}
              @disabled={{wc.system}}
              @icon="times"
            />
          </div>
        </li>
      {{/each}}
    </ul>
  </div>
  <DButton @action={{action "add"}} @label="admin.badges.new" />
</DModalBody>

<div class="modal-footer">
  <DButton
    @action={{action "saveAll"}}
    @label="admin.badges.save"
    @class="btn-primary"
    @disabled={{this.submitDisabled}}
  />
  <DModalCancel @close={{route-action "closeModal"}} />
</div>