<div class='ad_leader' id='dfp-directory-banner'></div>

<div id='directory-list'>
  {{persistent-banners}}

  <div class='streams-grid items-grid'>
    <div class='directory_header'>
      {{#if isBrowseExperimentEnabled}}
        {{browse-experiment/browse/top-bar}}
      {{else}}
        <h2 class='title'>
          {{i18n 'Channels'}}
        </h2>
        {{#common/tab-container class='js-nav'}}
          {{#common/tab-item}}
            {{#link-to "directory.channels.all"}}{{i18n "All"}}{{/link-to}}
          {{/common/tab-item}}
          {{#common/tab-item}}
            {{#link-to "directory.channels.xbOne"}}{{i18n "Xbox One"}}{{/link-to}}
          {{/common/tab-item}}
          {{#common/tab-item}}
            {{#link-to "directory.channels.psFour"}}{{i18n "PlayStation 4"}}{{/link-to}}
          {{/common/tab-item}}
          {{#common/tab-item}}
            {{#link-to "directory.channels.creative"}}{{i18n "Creative"}}{{/link-to}}
          {{/common/tab-item}}
          {{#common/tab-item}}
            {{#link-to "directory.channels.random"}}{{i18n "Random"}}{{/link-to}}
          {{/common/tab-item}}
        {{/common/tab-container}}
      {{/if}}
    </div>

    {{#if isBrowseExperimentEnabled}}
      {{filter-bar/aggregate/popular-with-language streamType=model.type}}
      {{#unless languageDirectoryFilter.languageFilters}}
        {{outlet "localizedContent"}}
      {{/unless}}
    {{else}}
      {{outlet "localizedContent"}}
    {{/if}}

    {{#if showLanguageDirectoryFilter}}
      {{directory/directory-channels-by-language titleText=title hasLocalizedChannels=channelsBroadcasterLanguage.hasChannels}}
    {{else}}

      {{#unless isBrowseExperimentEnabled}}
        <div class='section_header first'>
          <h3 class='title'>
            {{title}}
          </h3>
        </div>
      {{/unless}}

      <div class='js-streams streams items'>
        {{#infinite-scroll action="loadMoreChannels" hideMore=content.hideMore isLoading=content.isLoading contentLength=content.length classNames="tower tower--bleed tower--240 tower--gutter-sm"}}
          {{#each model as |channel index|}}
            {{stream-preview stream=channel tt_medium="twitch_directory" tt_content="live_channel" tt_content_index=index}}
          {{/each}}
          {{tower-placeholder}}
        {{/infinite-scroll}}
      </div>

      {{#if this.isLoading}}
        {{loading-more-spinner}}
      {{else if (not model.length)}}
        <p class='empty-grid'>
          {{t 'general.Twitch.noChannelsLive'}}
        </p>

        {{interactivity-beacon beaconId="no-channels-directory-channels-are-live"}}
      {{/if}}
    {{/if}}
  </div>
</div>
