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

<div id="directory-list">
  {{#if isBrowseExperimentEnabled}}
    {{browse-experiment/browse/top-bar}}
    {{#if (not storage.userLearnedMoreAboutDiscovery)}}
      <div class="brick brick--pd-none brick--theme-white brick--marked mg-b-2" data-test-selector="discovery-test-help">
        <figcaption class="brick__caption flex flex--spaceBetween flex--verticalCenter">
          <a href="http://help.twitch.tv/customer/portal/articles/2537603-guide-to-the-discover-directory">{{i18n "Learn more about how we come up with our suggestions."}}</a>
          <button {{action "dismiss"}} class="button button--icon-only button--secondary">
            <figure class="icon">
              {{svg-icon path='svg/close-small'}}
            </figure>
          </button>
        </figcaption>
      </div>
    {{/if}}
  {{else}}
    <div class='directory_header mg-b-4'>
      <h2 class='title' data-test-selector="discovery-test-title">
        {{i18n 'Discover'}}
      </h2>
      {{#if (not storage.userLearnedMoreAboutDiscovery)}}
        <div class="brick brick--pd-none brick--theme-white brick--marked mg-t-3" data-test-selector="discovery-test-help">
          <figcaption class="brick__caption flex flex--spaceBetween flex--verticalCenter">
            <a href="http://help.twitch.tv/customer/portal/articles/2537603-guide-to-the-discover-directory">{{i18n "Learn more about how we come up with our suggestions."}}</a>
            <button {{action "dismiss"}} class="button button--icon-only button--secondary">
              <figure class="icon">
                {{svg-icon path='svg/close-small'}}
              </figure>
            </button>
          </figcaption>
        </div>
      {{/if}}
    </div>
  {{/if}}

  {{#if recsHoldout.shouldShowRecs}}
    {{#if this.discoverShowCoviews}}
      {{video/coviews/carousel-container
        tt_medium='discovery_directory'
        sectionIndex=0
      }}
    {{/if}}
    {{#each similarChannels.recommendations as |recommendedStream index|}}
      {{stream/similar-channels
        streams=recommendedStream.streams
        channel=recommendedStream.channel
        tt_medium='discovery_directory'
        tt_content='similar_channel'
        sectionIndex=(at-offset index 1)
      }}
    {{/each}}
    {{interactivity-beacon beaconId="discover-directory-recommendations"}}
  {{/if}}

  {{#unless (and similarChannels.recommendations recsHoldout.shouldShowRecs)}}
    {{interactivity-beacon beaconId="discover-directory-no-recommendations"}}

    <div data-test-selector="discovery-test-empty">
      <h4 class="sub-text align-center">{{i18n 'None of our suggestions for you are live.'}}</h4>
      <h5 class="hint align-center">{{i18n 'Please check back soon!'}}</h5>
    </div>
  {{/unless}}
</div>
