<div class="flex flex--nowrap">
  <div class='pd-r-3 cm-grid items-grid'>
    <div class='js-streams streams items'>
      {{#if streams}}
        {{#infinite-scroll action="loadMoreStreams" isLoading=isLoading contentLength=streams.length classNames="tower tower--bleed tower--240 tower--gutter-sm"}}
          {{#each streams as |stream index|}}
            {{#unless stream.isBannedorTimedout}}
              {{twitch-communities/stream-list-item
                stream=stream
                permissions=communities.permissions
                tt_medium="twitch_directory"
                tt_content="live_channel"
                tt_content_index=index}}
            {{/unless}}
          {{/each}}
          {{tower-placeholder}}
        {{/infinite-scroll}}
      {{else}}
        {{#unless isLoading}}
          <p class="empty-grid">{{i18n 'There are currently no channels streaming to this community'}}</p>
          {{interactivity-beacon beaconId="no-communities-channels-are-live"}}
        {{/unless}}
      {{/if}}
    </div>
  </div>

  <div class="flex__item flex__item--noShrink c4">
    {{twitch-communities/panel
      editMode=communities.isEditing
    }}
  </div>
</div>
