<div class="emoji-uploader form-horizontal">
  <div class="control-group">
    <span class="label">
      {{i18n "admin.emoji.name"}}
    </span>
    <div class="input">
      <Input
        id="emoji-name"
        name="name"
        placeholder={{i18n "admin.emoji.name"}}
        @value={{readonly this.name}}
        {{on "input" (action (mut this.name) value="target.value")}}
      />
    </div>
  </div>
  <div class="control-group">
    <span class="label">
      {{i18n "admin.emoji.group"}}
    </span>
    <div class="input">
      <ComboBox
        @name="group"
        @id="emoji-group-selector"
        @value={{this.group}}
        @content={{this.newEmojiGroups}}
        @onChange={{action "createEmojiGroup"}}
        @valueProperty={{null}}
        @nameProperty={{null}}
        @options={{hash allowAny=true}}
      />
    </div>
  </div>
  <div class="control-group">
    <div class="input">
      <input
        class="hidden-upload-field"
        disabled={{this.uploading}}
        type="file"
        multiple="true"
        accept=".png,.gif"
      />
      <DButton
        @class="btn-primary"
        @translatedLabel={{this.buttonLabel}}
        @icon="plus"
        @action={{action "chooseFiles"}}
        @disabled={{this.uploading}}
      />
    </div>
  </div>
</div>