<div class="filter-bar">
  <div class="filter-bar__left">
    <div class="filter-bar__item">
      {{filter-bar/filters/clips-sort selectedSortOption=model.sortOption}}
    </div>
  </div>
</div>

{{clips/clips-card-rows clips=model.clips}}
{{#if (and (eq model.clips.items.length 0) (not model.clips.items.isLoading))}}
  <div class="container" data-test-selector="clips-empty-container">
    {{#if (not-eq model.sortOption model.popularSortOption)}}
      <div class="tower">
        <div class="col-xs-3"></div>
        <div class="col-xs-6 align-center">
          <h5 class="sub-text mg-t-2 mg-b-2">
            {{t 'directory.game.clips.emptyList.popularClipsUpsell.info'}}
          </h5>
          <button class="button button--hollow" {{action 'popularSortOption'}}>
            {{t 'channel.clips.emptyList.popularClipsUpsell.button'}}
          </button>
        </div>
        <div class="col-xs-3"></div>
      </div>
    {{else}}
      <p data-test-selector="clips-empty-title" class="empty-grid">{{t 'channel.clips.emptyList.title'}}</p>
      <h5 data-test-selector='clips-help' class='align-center sub-text'>
        {{#intl/t-yield 'directory.game.clips.emptyList.learnCreateClips' dynamicYields=(array 'x:link' 'directory') as |h|}}
          {{#h.section 'x:link' as |text|}}
            <a href="https://help.twitch.tv/customer/portal/articles/2442508-how-to-use-clips">
              {{text}}
            </a>
          {{/h.section}}
          {{#h.section 'directory'}}
            {{#link-to-game model.game}}
              {{model.game.name}}
            {{/link-to-game}}
          {{/h.section}}
        {{/intl/t-yield}}
      </h5>
    {{/if}}
  </div>
{{/if}}
