<section class="cl-container subscription-dash chat-perks">
  <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 'Loyalty Badges'}}
        </p>

        <p class="desc">
          {{i18n "Badge that appears before your subscriber's name in chat. Set up to five badges to display, based on the subscriber's tenure."}}
        </p>
      </div>
    </div>

    <fieldset>
      <div class="label-wrapper">
        <span class="strong">{{i18n 'Current Badges'}}</span>
      </div>

      <div class="cl-input-container">
        {{#each badgeList as |badge|}}
          {{dashboards/subscription-dash/badges/badge-display
            imgSrc=badge.image_2x_url
            name=badge.name
            title=badge.title}}
        {{/each}}
      </div>
    </fieldset>


    <div class="cl-subheader">
      {{i18n 'Manage Badges'}}
    </div>

    {{#if isTimedOut}}
      <fieldset>
        <div class="label-wrapper">
          <span class="strong">{{i18n 'Upload Badge Images'}}</span>
        </div>

        <div class="cl-input-container">
          <p class="strong">{{i18n 'Contact Partner Help'}}</p>

          <p class="pd-t-1">
            {{i18n "One or more of the badges you've attempted to upload violate our Terms of Service. As such, your ability to upload new badges has been temporarily disabled and the offending content has been deleted."}}
          </p>

          <p class="pd-t-1">
            {{#with (i18n-split-string 'Please contact |email| for more information.') as |translated|}}
              {{at-index translated 0}}
              <a href="mailto:{{email}}">{{email}}</a>
              {{at-index translated 2}}
            {{/with}}
          </p>
        </div>
      </fieldset>
    {{else}}
      <div class="pd-x-2">
        {{#common/tab-container class="clearfix pd-t-2"}}
          {{#each badgeList as |badge index|}}
            {{#common/tab-item}}
              {{#dashboards/subscription-dash/badges/tabs-item
                isActive=(eq selectedIndex index)
                name=badge.name
                select=(action (mut selectedIndex) index)
              }}{{i18n badge.name}}
              {{/dashboards/subscription-dash/badges/tabs-item}}
            {{/common/tab-item}}
          {{/each}}
        {{/common/tab-container}}
      </div>

      {{#if selectedBadge.id}}
        {{dashboards/subscription-dash/badges/delete-form
          badge=selectedBadge
          onBadgeDelete=(action 'onBadgeDelete')
          channelID=channelID}}
      {{else}}
        {{dashboards/subscription-dash/badges/upload-form
          onBadgeCreate=(action 'onBadgeCreate')
          channelID=channelID
          requiredTenureMonths=selectedBadge.required_tenure_months}}
      {{/if}}
    {{/if}}
  </div>
</section>
