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

<div class='list-games' id='directory-list'>
  {{persistent-banners}}
  <div class='games-grid items-grid'>
    {{#if isBrowseExperimentEnabled}}
      {{browse-experiment/browse/top-bar}}
    {{else}}
      <div class='directory_header'>
        <h2 class='title'>
          {{i18n 'All Games'}}
        </h2>
      </div>
    {{/if}}

    <div class='js-games'>
      {{#infinite-scroll action="loadMoreTopGames" isLoading=isLoading contentLength=sortedGames.length classNames="tower tower--bleed tower--180 tower--gutter-sm"}}
        {{#each featuredDirectory as |game index|}}
          {{directory-featured-game model=game tt_content_index=index tt_medium="twitch_games_directory" tt_content="featured_games" location="directory"}}
        {{/each}}
        {{#each sortedGames as |game index|}}
          {{directory-game model=game tt_content_index=index tt_medium="twitch_games_directory" tt_content="popular_games"}}
        {{/each}}
        {{tower-placeholder}}
      {{/infinite-scroll}}
    </div>

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