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

        {{twitch-communities/moderation/moderators/search-results
          moderators=moderators
          users=searchResults
          addModerator=(action 'addModerator')
          removeModerator=(action 'removeModerator')
        }}
      </div>
    </div>
  </div>
  <div class="sub-text mg-t-1">{{i18n 'Moderators can help you manage your community by banning or timing out channels that violate your rules.'}}</div>
</div>
{{#if isLoadingMods}}
  <div class="brick brick--theme-grey pd-b-0 pos-relative">
    <div class="align-center pd-t-2 pd-b-3"><span class='loading-spinner'></span></div>
  </div>
{{else}}
  {{#if moderators}}
    <div class="brick brick--theme-grey pd-b-0 pos-relative">
      {{#each moderators as |moderator|}}
        {{twitch-communities/moderation/moderators/search-result
          user=moderator
          isModerator=true
          addModerator=(action 'addModerator')
          removeModerator=(action 'removeModerator')
        }}
      {{/each}}
    </div>
  {{else}}
    {{interactivity-beacon beaconId="no-moderators"}}
  {{/if}}
{{/if}}
