<div class='cl-subheader'>
  {{i18n "Upload Emoticon"}}
</div>
<div class='section-content'>
  <fieldset>
    <div class='cl-input-container'>
      <p>
        {{i18n "Please upload 3 different sizes for the emoticon you wish to submit and set a unique emoticon code. You can also submit new images for an existing emoticon using the same unique code"}}
      </p>
    </div>
  </fieldset>
  <fieldset class='emoticon-uploader-small uploader clearfix'>
    <div class='label-wrapper'>
      <label>
        {{i18n "Small Emoticon Image"}}
      </label>
    </div>
    <div class='cl-input-container'>
      <input disabled={{isSaving}} class='js-small' name='28x28' type='file'>
      <p class='desc'>
        {{i18n "Upload 28 x 28px PNG image with transparent background. Max 25kb"}}
      </p>
    </div>
  </fieldset>
  <fieldset class='emoticon-uploader-medium uploader clearfix'>
    <div class='label-wrapper'>
      <label>
        {{i18n "Medium Emoticon Image"}}
      </label>
    </div>
    <div class='cl-input-container'>
      <input disabled={{isSaving}} class='js-medium' name='56x56' type='file'>
      <p class='desc'>
        {{i18n "Upload 56 x 56px PNG image with transparent background. Max 25kb"}}
      </p>
    </div>
  </fieldset>
  <fieldset class='emoticon-uploader-large uploader clearfix'>
    <div class='label-wrapper'>
      <label>
        {{i18n "Large Emoticon Image"}}
      </label>
    </div>
    <div class='cl-input-container'>
      <input disabled={{isSaving}} class='js-large' name='112x112' type='file'>
      <p class='desc'>
        {{i18n "Upload 112 x 112px PNG image with transparent background. Max 25kb"}}
      </p>
    </div>
  </fieldset>
  <fieldset class='emoticon-code clearfix'>
    <div class='label-wrapper'>
      <label>
        {{i18n "Unique Code"}}
      </label>
    </div>
    <div class='cl-input-container'>
      <input class='string code-input js-code-input' maxlength='20'>
      <p class='desc'></p>
      {{i18n "The code will be capitalized and appended after your emoticon prefix. Alphabets only. Max 20 characters"}}
    </div>
  </fieldset>
  <fieldset class='emoticon-code-preview clearfix'>
    <div class='label-wrapper'>
      <label>
        {{i18n "Full Emoticon Code Preview"}}
      </label>
    </div>
    <div class='cl-input-container'>
      <div class='preview'>
        <span class='prefix'>{{emoticonSet.prefix}}</span><span class='code'></span>
      </div>
    </div>
  </fieldset>
  <div class='cl-button-container submit-button-fieldset'>
    <div class='form-actions'>
      <button disabled={{isSaving}} class='button submit'>
        <span>
          {{i18n "Submit Changes"}}
        </span>
      </button>
    </div>
  </div>
</div>
