<div class="list-header">
  <div class="balloon-wrapper">
    {{i18n 'Global Badge [?]'}}
    <div class="balloon balloon--up" style="text-transform: none;">
      {{i18n 'Your global badge is shown when chatting and whispering.'}}
    </div>
  </div>
</div>
<div class="chat-menu-content">
  {{#if hasAvailableGlobalBadges}}
    <div class="chat-colors">
      <div class="pd-b-2">
        {{#each globalBadgeOptions as |badgeOption|}}
          <span class="balloon-wrapper float-left">
            <a class="chat-colors-swatch {{if badgeOption.isSelected 'selected'}}" {{action 'setGlobalBadge' badgeOption}}><img src="{{badgeOption.src}}"></a>
            <div class="balloon balloon--tooltip balloon--down balloon--center">{{badgeOption.title}}</div>
          </span>
        {{/each}}
        <span class="balloon-wrapper float-left">
          <a class="chat-colors-swatch {{if noGlobalBadgeSelected 'selected'}}" {{action 'removeGlobalBadge'}}><svg width="18" height="18" viewBox="0 0 18 18" style="background:#e5e3e8"><g fill="none" fill-rule="evenodd"><circle fill="#FFF" cx="9" cy="9" r="5"/><path d="M9 15A6 6 0 1 0 9 3a6 6 0 0 0 0 12zm3.668-8.607a4.5 4.5 0 0 1-6.275 6.275l6.275-6.275zm-1.06-1.061a4.5 4.5 0 0 0-6.275 6.275l6.274-6.275z" fill="#6441A4"/></g></svg></a>
          <div class="balloon balloon--tooltip balloon--down balloon--center">{{i18n 'None'}}</div>
        </span>
      </div>
    </div>
  {{else}}
    <div class="chat-settings-copy">
      {{i18n 'No global badges :('}}
    </div>
  {{/if}}
</div>
<div class="list-header">
  <div class="balloon-wrapper">
    {{i18n 'Channel Badge [?]'}}
    <div class="balloon balloon--up" style="text-transform: none;">
      {{i18n 'Change the badge shown when chatting in this channel.'}}
    </div>
  </div>
</div>
<div class="chat-menu-content">
  {{#if hasAvailableChannelBadges}}
    <div class="chat-colors">
      <div class="pd-b-2">
        {{#each channelBadgeOptions as |badgeOption|}}
          <span class="balloon-wrapper float-left">
            <a class="chat-colors-swatch {{if badgeOption.isSelected 'selected'}}" {{action 'setChannelBadge' badgeOption}}><img src="{{badgeOption.src}}"></a>
            <div class="balloon balloon--tooltip balloon--up balloon--center">{{badgeOption.title}}</div>
          </span>
        {{/each}}
        <span class="balloon-wrapper float-left">
          <a class="chat-colors-swatch {{if noChannelBadgeSelected 'selected'}}" {{action 'removeChannelBadge'}}><svg width="18" height="18" viewBox="0 0 18 18" style="background:#e5e3e8"><g fill="none" fill-rule="evenodd"><circle fill="#FFF" cx="9" cy="9" r="5"/><path d="M9 15A6 6 0 1 0 9 3a6 6 0 0 0 0 12zm1.619-1.8A4.5 4.5 0 0 1 6 5.646V7.5l2 2v1.081l2.619 2.619zm1.881-1.371c.625-.773 1-1.757 1-2.829a4.491 4.491 0 0 0-1.671-3.5H10.5L9.041 6.959 8.5 7.5v1H11l1.5 1.5v1.829z" fill="#6441A4"/></g></svg></a>
          <div class="balloon balloon--tooltip balloon--up balloon--center">{{i18n 'Same as Global'}}</div>
        </span>
      </div>
    </div>
  {{else}}
    <div class="chat-settings-copy">
      {{i18n 'No channel badges :('}}
    </div>
  {{/if}}
</div>
