<div class='ad_leader' id='dfp-directory-banner'></div>
<div id='directory-list'>
  {{persistent-banners}}
  <div class='items-grid'>
    {{#if isBrowseExperimentEnabled}}
      {{browse-experiment/browse/top-bar}}
    {{else}}
      <div class='directory_header flex flex--verticalCenter'>
        <h2 class='title flex__item--noGrow flex__item--noShrink mg-0 pd-0'>
          {{i18n 'Communities'}}
        </h2>
        <div class="flext__item flex__item--grow flex__item--noShrink">
          <h4 class="pd-0 mg-0 float-left">
            <span class="pill mg-l-1">{{i18n 'Beta'}}</span>
          </h4>
          <div class="balloon-wrapper balloon-wrapper--hotspot inline-block mg-l-1">
            <div class="balloon balloon--down c4">
              <span class="block mg-b-1">{{i18n 'Help us become more powerful than you can possibly imagine.'}}</span>
              <span class="block">
                {{#with (i18n-split-string "Your feedback is really important to us. Share suggestions on the |Communities Product Forum|.") as |translation|}}
                  {{at-index translation 0}}
                  <a href="https://twitch.uservoice.com/forums/587656-communities" target="_blank" rel="noopener">{{at-index translation 1}}</a>{{at-index translation 2}}
                {{/with}}
                {{#with (i18n-split-string "Discuss with other users on the |Twitch Communities Curse chat server|.") as |translation|}}
                  {{at-index translation 0}}
                  <a href="https://curse.com/twitch" target="_blank" rel="noopener">{{at-index translation 1}}</a>{{at-index translation 2}}
                {{/with}}
              </span>
            </div>
          </div>
        </div>
        <div class="flext__item flex--noGrow flex--noShrink">
          <a onclick={{action 'createCommunity'}} class="button">
            {{i18n 'Create a Community'}}
          </a>
        </div>
      </div>
    {{/if}}

    <div class="brick brick--theme-white brick--marked mg-b-2">
      {{#with (i18n-split-string "Anyone can create, discover, and stream to a community. Each community centers around a topic or activity. Find new streams that you’re interested in or broadcast to a specific audience. For more information, |read our announcement|.") as |translation|}}
        {{at-index translation 0}}
        <a href="http://link.twitch.tv/communities" target="_blank" rel="noopener">{{at-index translation 1}}</a>{{at-index translation 2}}
      {{/with}}
    </div>

    {{#if isBrowseExperimentEnabled}}
      <div class="mg-b-2">
        <a onclick={{action 'createCommunity'}} class="button">
          {{i18n 'Create a Community'}}
        </a>
      </div>
    {{/if}}

    {{#if sortedCommunities}}
      {{#infinite-scroll action="loadMoreTopCommunities" isLoading=isLoading contentLength=sortedCommunities.length classNames="tower tower--bleed tower--180 tower--gutter-sm"}}
        {{#each sortedCommunities as |community index|}}
          {{directory-community model=community tt_content_index=index tt_medium="twitch_communities_directory" tt_content="communities_select_click"}}
        {{/each}}
        {{tower-placeholder}}
      {{/infinite-scroll}}
    {{else}}
      {{#unless isLoading}}
        <p class="empty-grid">{{i18n "No Communities"}}</p>
      {{/unless}}
    {{/if}}

    {{#if isLoading}}
      {{loading-more-spinner}}
    {{/if}}
  </div>
</div>
