discourse/app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.hbs

<DModal
  @title={{i18n "admin.badges.badge_groupings.modal_title"}}
  @bodyClass="badge-groupings-modal"
  @closeModal={{@closeModal}}
>
  <:body>
    <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" />
              {{else}}
                <span>{{wc.displayName}}</span>
              {{/if}}
            </div>
            <div class="actions">
              {{#if wc.editing}}
                <DButton @action={{fn (mut wc.editing) false}} @icon="check" />
              {{else}}
                <DButton
                  @action={{fn (mut wc.editing) true}}
                  @disabled={{wc.system}}
                  @icon="pencil-alt"
                />
              {{/if}}
              <DButton @action={{fn this.up wc}} @icon="chevron-up" />
              <DButton @action={{fn this.down wc}} @icon="chevron-down" />
              <DButton
                @action={{fn this.delete wc}}
                @disabled={{wc.system}}
                @icon="times"
              />
            </div>
          </li>
        {{/each}}
      </ul>
    </div>
    <DButton
      @action={{this.add}}
      class="badge-groupings__add-grouping"
      @label="admin.badges.new"
    />
  </:body>
  <:footer>
    <DButton
      @action={{this.saveAll}}
      @label="admin.badges.save"
      class="btn-primary badge-groupings__save"
      @disabled={{this.submitDisabled}}
    />
    <DButton
      class="btn-flat d-modal-cancel"
      @action={{@closeModal}}
      @label="cancel"
    />
  </:footer>
</DModal>