<div class="streams-grid items-grid">
  <div class="directory_header">
    {{#common/tab-container class="js-nav"}}
      {{#if showCommunityTab}}
        {{#common/tab-item}}
          <a href={{route-for 'directory.creative.hashtag' 'all'}} {{action 'showChannels'}} class='js-nav-channels {{if showingChannels 'active'}}'>
            {{i18n 'Live Channels'}}
          </a>
        {{/common/tab-item}}
        {{#common/tab-item}}
          <a href={{route-for 'directory.game' game.name}} {{action 'showCommunities'}} class='js-nav-communities {{if showingCommunities 'active'}}'>
            {{i18n 'Communities'}}
          </a>
        {{/common/tab-item}}
        {{#common/tab-item}}
          <a href={{route-for 'directory.creative.hashtag.videos' 'all'}} {{action 'showVods'}} class='js-nav-videos {{if showingVods 'active'}}'>
            {{t 'general.Twitch.videos'}}
          </a>
        {{/common/tab-item}}
      {{else}}
        {{#common/tab-item}}
          {{#link-to 'directory.creative.hashtag.index' hashtagName (query-params period='month') class='js-nav-channels'}}
            {{t 'general.Twitch.liveChannels'}}
          {{/link-to}}
        {{/common/tab-item}}
        {{#common/tab-item}}
          {{#link-to 'directory.creative.hashtag.videos' hashtagName class='js-nav-videos'}}
            {{t 'general.Twitch.videos'}}
          {{/link-to}}
        {{/common/tab-item}}
      {{/if}}
      {{#if showingVods}}
        {{#common/tab-item class="mg-l-auto"}}
          {{#link-to 'directory.creative.hashtag.videos' hashtagName (query-params period='all')}}
            {{i18n 'All Time'}}
          {{/link-to}}
        {{/common/tab-item}}
        {{#common/tab-item}}
          {{#link-to 'directory.creative.hashtag.videos' hashtagName (query-params period='month')}}
            {{i18n 'Month'}}
          {{/link-to}}
        {{/common/tab-item}}
        {{#common/tab-item}}
          {{#link-to 'directory.creative.hashtag.videos' hashtagName (query-params period='week')}}
            {{i18n 'Week'}}
          {{/link-to}}
        {{/common/tab-item}}
      {{/if}}
    {{/common/tab-container}}
  </div>

  {{#if showingCommunities}}
    {{community-discovery communities=communities tt_medium="creative_directory"}}
  {{else if (or showingChannels showingVods)}}
    <div class="items {{if showingChannels 'js-streams'}} {{if showingVods 'js-videos'}} streams">
      {{#infinite-scroll
          action=(action 'loadMore')
          isLoading=model.isLoading
          contentLength=model.length
          classNames='tower tower--bleed tower--240 tower--gutter-sm'}}
        {{#each model as |stream index|}}
          {{#if showingChannels}}
            {{stream-preview stream=stream showTags=true tt_medium='twitch_creative_directory' tt_content='live_channel' tt_content_index=index}}
          {{else}}
            {{! showingVods}}
            {{video/preview-card video=stream showTags=true tt_medium='twitch_creative_directory' tt_content='popular_videos' tt_content_index=index}}
          {{/if}}
        {{/each}}
        {{tower-placeholder}}
      {{/infinite-scroll}}

      {{#if model.isLoading}}
        {{loading-more-spinner}}
      {{else if (eq model.length 0)}}
        <p class="empty-grid">
          {{t 'general.Twitch.noChannelsLive'}}
        </p>
        {{interactivity-beacon beaconId="no-tag-streams-channels-live"}}
      {{/if}}
    </div>
  {{/if}}

  {{yield}}
</div>
