Sightly Template Details

<!--/*
  Season List template: episodes for season rendered in mediaBlocks (shown as a 4-up grid on DT, stack on MOB)
  use cases: show pages, episode pages with slight difference in models (e.g., to set applicable season)
*/-->


<template data-sly-template.seasonList="${@ mode='show'}"
    data-sly-test.model="${mode=='episode' ? 'sni.models.seasonlist.SeasonListEP' : 'sni.models.seasonlist.SeasonList'}">

<sly data-sly-use.model=${model}
     data-sly-use.atoms="fragments/atoms.html"
     data-sly-use.FWSheader="fragments/organisms/FWStrip/header.html"
     data-sly-use.mediaBlock="fragments/molecules/mediaBlock.html" >
  <sly data-sly-use.styleByCategory="sni-foundation/styleByCategory.html"
       data-sly-call="${styleByCategory.cmpnCss}"
       data-sly-test="${model.hasContent}"/>
  <!-- seasonList/seasonListTempl.html -->
  <section class="o-Capsule o-${model.capsuleType}" data-module="season-grid" data-sly-test="${model.hasContent}">

    <script type="application/json" data-analytics-config data-sly-test="${model.defaultTitle}">
      {
        "componentTitle": "${model.defaultTitle @ context='text'}"
      }
    </script>
    <script type="text/x-config">
      {
        "hasDropdown": ${model.hasDropdown @ context='unsafe'},
        "seasonsSelector": "seasonList",
        "showRef": "${model.showPath @ context='unsafe'}",
        "targetContainer": "[data-grid-container]",
        "loadMore": {
          "hideButton":true,
          "loadButtonClass": ".load-more-btn",
          "loadContainer": ".o-SeasonList__m-Body--Main",
          "loadDataSource": ".o-SeasonList__m-LoadMoreList"
        }
      }
    </script>
    <!--/*include the header area*/-->
    <!--/* Season List drop down should be added here */-->
    <sly data-sly-call="${FWSheader.view @ model = model, defaultHeadline='Episodes', selectedSeason=model.currentSeason}"></sly>

    <!--/*include the body file (the grid of episodes) */-->
    <sly data-sly-use.templ="${'seasonList/bodyTempl.html'}" data-sly-call="${templ.body @mode=mode}"/>

  </section>
</sly>

</template>