<div class="brick brick--theme-grey typeset">
  <div class="flex flex--verticalCenter">
    <div class="flex__item flex__item--grow">
      <h4>{{i18n 'Channel Moderation'}}</h4>
    </div>
    <div class="flex__item">
      <div class="balloon-wrapper c4">
        {{twitch-communities/moderation/banned-channels/search
          search=(action 'search')
          query=(readonly query)
        }}

        {{twitch-communities/moderation/banned-channels/search-results
          bannedChannels=bannedChannels
          users=searchResults
          addTimeoutCb=(action 'addTimeoutCb')
          addBanItem=(action 'addBanItem')
          unbanChannel=(action 'unbanChannel')
        }}
      </div>
    </div>
  </div>
  <div class="sub-text mg-t-1">
    {{#with (i18n-split-string 'If a channel is violating your rules, you can ban or timeout that channel from streaming to your community. Your moderation actions must adhere to our |Community Guidelines|.') as |translation|}}
      {{at-index translation 0}}
      <a href="/p/community-guidelines" target="_blank" rel="noopener">{{at-index translation 1}}</a>{{at-index translation 2}}
    {{/with}}
  </div>
</div>
<div class="brick brick--theme-grey pd-b-0 pos-relative">
  {{#if isLoadingBans}}
    <div class="align-center pd-t-2 pd-b-3"><span class='loading-spinner'></span></div>
  {{else}}
    {{#if bannedChannels}}
      {{#each bannedChannels as |channel|}}
        {{twitch-communities/moderation/banned-channels/search-result
          user=channel
          isBanned=true
          unbanChannel=(action 'unbanChannel')
        }}
      {{/each}}
    {{else}}
      <div class="empty-grid pd-t-2 pd-b-3">{{i18n 'Hooray! There are no banned channels!'}}</div>
      {{interactivity-beacon beaconId="no-banned-channels"}}
    {{/if}}
  {{/if}}
</div>
