<div class='cl-container subscription-dash chat-perks'>
  {{#if model.isLoaded}}
    {{#if prefixApproved}}
      <div class='cl-section'>
        <div class='section-header'>
          {{link-to '' 'dashboards.subscription-dash' class='header-back'}}

          <div class='header-content indented'>
            <p class='title'>
              {{i18n "Chat Emoticons"}}
            </p>

            <p class='desc'>
              {{i18n "Emoticons that your subscribers can use in Twitch chat"}}
            </p>
          </div>
        </div>

        <div class='cl-subheader'>
          {{i18n "Current Emoticons"}}

          <div class="edit-mode-toggle">
            {{#if emoticonEditMode}}
              <a class="edit-mode-toggle__button button button--text" {{action 'cancelEditingMode'}}>
                Cancel
              </a>

              <button class="{{if noEmoticonsChecked "disabled"}} button" disabled={{noEmoticonsChecked}} {{action 'submitEdit'}}>
                Delete
              </button>
            {{else if emoticons.length}}
              <button class="edit-mode-toggle__button button" {{action 'enableEditingMode'}}>
                Edit
              </button>
            {{/if}}
          </div>
        </div>

        <div class='section-content'>
          <fieldset class='current-emoticon sub-section clearfix'>
            <div class='label-wrapper'>
              <label>Emoticons ({{emoticons.length}} / {{emoticonSet.emoticon_limit}})</label>
            </div>

            <div class='cl-input-container'>
              <ul class="emoticon-list clearfix {{if emoticonEditMode "emoticon-list-edit"}}">
                {{#each emoticons as |emoticon|}}
                  <li class="emoticon">
                    {{#with (concat emoticon.regex (if (eq emoticon.state 'pending') ' (Pending)')) as |title|}}
                      <label for={{title}} class="{{if emoticon.checked "emoticon-deleted"}}">
                        {{#if (eq emoticon.state 'pending')}}
                          <div class='emoticon-lock'></div>
                        {{else if emoticonEditMode}}
                          {{input id=title class="emoticon-delete" type="checkbox" checked=emoticon.checked}}
                        {{/if}}

                        <div class="balloon-wrapper">
                          <img src={{emoticon.url}} title={{title}} class='emoticon-img'>
                          <div class="balloon balloon--tooltip balloon--down">
                            {{title}}
                          </div>
                        </div>
                      </label>
                    {{/with}}
                  </li>
                {{/each}}
              </ul>

              {{#unless emoticons.length}}
                <p class='desc'>
                  {{i18n "Submit new emoticons using the uploader below"}}
                </p>
              {{/unless}}
            </div>
          </fieldset>
        </div>

        {{#if (and emoticonLimitReached (not maxLevelReached))}}
          {{partial 'dashboards/subscription-dash/subscriber-achievement'}}
        {{else}}
          {{emoticon-submit content=model channel=model.name}}
        {{/if}}
      </div>
    {{else}}
      <div class="notice {{if prefixRejected 'emergency'}}">
        <div class='section-content'>
          <p>
            {{~#if prefixRejected~}}
              {{i18n "Your prefix has been rejected. Please choose another one"}}
            {{~else~}}
              {{i18n "Please set your emoticon prefix. The prefix must be approved before submitting your emoticons"}}
            {{~/if~}}
          </p>
        </div>
      </div>

      <div class='cl-section'>
        <div class='section-header'>
          {{link-to '' 'dashboards.subscription-dash' class='header-back'}}

          <div class='header-content indented'>
            <p class='title'>
              {{i18n "Emoticon Code Prefix"}}
            </p>

            <p class='desc'>
              {{i18n "Prefix that will be prepended before your emoticon's unique code"}}
            </p>
          </div>
        </div>

        <form>
          <div class='section-content'>
            <fieldset class='unique-prefix clearfix'>
              <div class='label-wrapper'>
                <label>
                  {{i18n "Unique Prefix"}}
                </label>
              </div>

              <div class='cl-input-container'>
                <input value={{or newPrefix emoticonSet.prefix}} placeholder="prefix" disabled={{prefixPending}} class='string js-prefix code-input' oninput={{action 'updateNewPrefix' value="target.value"}} maxlength='10'>

                <p class='desc'>
                  {{i18n "Prefix must begin with a lowercase letter. Prefix must be 3-10 characters in length, all lowercase. Numbers may follow first character."}}
                </p>

                <p class='form-microcopy js-prefix-example prefix-example'>
                  {{i18n "Example of how it will work:"}}
                  <span class='prefix'>{{or newPrefix emoticonSet.prefix 'prefix'}}</span><span class='code'>Emotecode</span>
                </p>
              </div>
            </fieldset>

            {{#if prefixPending}}
              <div class='sub-section prefix-submitted'>
                <div class='form-actions'>
                  {{i18n "Your prefix has been submitted for approval. Thank you for your patience."}}
                </div>
              </div>
            {{else}}
              <div class='cl-button-container submit-button-fieldset'>
                <div class='form-actions'>
                  <button disabled={{prefixPending}} class='button submit' {{action 'savePrefix'}}>
                    <span>
                      {{i18n "Submit Prefix"}}
                    </span>
                  </button>
                </div>
              </div>
            {{/if}}
          </div>
        </form>
      </div>
    {{/if}}
  {{/if}}

  {{#if model.notFound}}
    No subscription program found for channel {{model.id}}
  {{/if}}

  {{#if model.forbidden}}
    You are not an editor of {{model.id}}'s channel
  {{/if}}
</div>
