File: /apps/sni-foundation/components/search/groupedSiteSearch/groupedSiteSearch.html
<sly data-sly-use.model="sni.models.GroupedSiteSearchModel"
data-sly-use.context="sni.models.Context">
<div class="search-results" data-module="grouped-site-search-results">
<sly data-sly-test.showResults="${model.assetTypeResults['show']}" />
<sly data-sly-test.episodeResults="${model.assetTypeResults['episode']}" />
<sly data-sly-test.videoResults="${model.assetTypeResults['video']}" />
<sly data-sly-test.peopleResults="${model.assetTypeResults['people']}" />
<sly data-sly-test.storyResults="${model.assetTypeResults['story']}" />
<sly data-sly-test.maxResults="${model.isTopResults ? 4 : 20}" />
<!--/*
Search box - currently duplicated. Will need to become a fragment and be included here
Sightly template needs:
isHeader? for configs and menu action
isHeader? control label in front of input box "Search For" on header vs... "Results for" on search page
*/-->
<section class="o-SiteSearch"
data-sly-use.context="sni.models.Context"
data-grouped-form>
<form action="/search" method="get" data-module="search-form" class="m-SearchForm" data-mobile-search-box>
<script type="text/x-config">
{
"searchSite": "${context.osgi['brand-slug'] @ context='unsafe'}",
"searchType": "${context.isMobile ? 'mobile' : 'desktop' @ context='unsafe'} header search",
"selectorPrefix": "m-SearchForm",
"typeAhead": "on",
"focusSelector": "[data-grouped-form]",
"checkFocusState": ${context.isMobile @ context='unsafe'},
"paginationUrl": "${model.paginationUrl @ context='unsafe'}"
}
</script>
<div class="m-SearchForm__m-Area m-Area__m-Container" data-search-form-wrapper="" data-search-form-field="">
<label for="typeaheadinput">Results For</label>
<span class="m-SearchForm__m-InputWrap">
<input id="typeaheadinput" class="m-SearchForm__a-Input a-Input" type="text" autocomplete="off" value="${model.didYouMean ? model.didYouMean : model.searchTerm}" placeholder="${context.isMobile ? 'Search ':''}${context.isMobile ? context.osgi['brand-slug']: ''}" data-type="search-input">
<div class="m-SearchBox__a-Button--Clear" data-type="reset-btn">
<sly data-sly-use.icon="${'sni.models.view.Icon' @ parent='o-Header', type='close'}">
<svg class="o-Header__a-Icon a-Icon--clear">
${icon.atom.markup @ context='unsafe'}
<use xlink:href="#icon-${icon.type}"></use>
</svg>
</sly>
</div>
<button class="m-SearchBox__a-Button--Search" data-type="search-button" type="submit"><sly data-sly-use.icon="${'sni.models.view.Icon' @ parent='o-SearchBox', type='search'}">
<svg class="o-SiteSearch__a-Icon a-Icon--search">
${icon.atom.markup @ context='unsafe'}
<use xlink:href="#icon-${icon.type}"></use>
</svg>
</sly>
</button>
<div data-sly-test="${context.notMobile}" data-typeahead-hints=""></div>
</span>
<a class="m-SearchBoxMobile__a-Button--Cancel" data-type="button-search-cancel">Cancel</a>
<div data-sly-test="${context.isMobile}" data-typeahead-hints=""></div>
</div>
</form>
</section>
<div data-sly-test="${model.didYouMean}" class="search-results__did-you-mean">
Showing results for <span class="search-results__did-you-mean-term">${model.didYouMean}.</span>
<br data-sly-test="${context.isMobile}"/>
Search instead for <span class="search-results__search-term"><a href="${model.didYouMeanUrl}">${model.searchTerm}</a></span>.
</div>
<div data-sly-test="${!model.hasResults}" class="search-results__no-results">
<p class="search-results__no-results-message">Sorry, no results were found for <span class="search-results__search-term">${model.searchTerm}.</span><p>
<ul>
<li>Check your spelling.</li>
<li>Try more general words.</li>
<li>If you feel you reached this page in error, contact us.</li>
</ul>
</div>
<sly data-sly-test="${model.hasResults}">
<div data-sly-test="${context.notMobile}" class="search-results__tabs">
<ul class="m-TabbedContent__m-TabNav">
<li class="m-TabbedContent__a-Tab ${model.isTopResults ? 'is-Active': model.topResultsClass}"><a href="${model.topResultsUrl @ context='unsafe'}" data-type="tab-ctrl">Top Results</a></li>
<li class="m-TabbedContent__a-Tab ${!showResults ? 'is-Disabled' : showResults.tabLinkClass}"><a href="${showResults.assetTypeUrl @ context='unsafe'}" data-type="tab-ctrl">Shows</a></li>
<li class="m-TabbedContent__a-Tab ${!episodeResults ? 'is-Disabled' : episodeResults.tabLinkClass}"><a href="${episodeResults.assetTypeUrl @ context='unsafe'}" data-type="tab-ctrl">Episodes</a></li>
<li class="m-TabbedContent__a-Tab ${!videoResults ? 'is-Disabled' : videoResults.tabLinkClass}"><a href="${videoResults.assetTypeUrl @ context='unsafe'}" data-type="tab-ctrl">Videos</a></li>
<li class="m-TabbedContent__a-Tab ${!peopleResults ? 'is-Disabled' : peopleResults.tabLinkClass}"><a href="${peopleResults.assetTypeUrl @ context='unsafe'}" data-type="tab-ctrl">People</a></li>
<li class="m-TabbedContent__a-Tab ${!storyResults ? 'is-Disabled' : storyResults.tabLinkClass}"><a href="${storyResults.assetTypeUrl @ context='unsafe'}" data-type="tab-ctrl">Features</a></li>
</ul>
</div>
<!--/* mobile */-->
<div data-sly-test="${context.isMobile}" class="search-results__tabs">
<ul class="m-TabbedContent__m-TabNav">
<li class="m-TabbedContent__a-Tab ${model.isTopResults ? 'is-Active': model.topResultsClass}"><a href="${model.topResultsUrl @ context='unsafe'}" data-type="tab-ctrl">Top Results</a></li>
<li data-sly-test="${showResults && showResults.assetTypeUrl}" class="m-TabbedContent__a-Tab ${showResults.tabLinkClass}"><a href="${showResults.assetTypeUrl @ context='unsafe'}" data-type="tab-ctrl">Shows</a></li>
<li data-sly-test="${episodeResults && episodeResults.assetTypeUrl}" class="m-TabbedContent__a-Tab ${episodeResults.tabLinkClass}"><a href="${episodeResults.assetTypeUrl @ context='unsafe'}" data-type="tab-ctrl">Episodes</a></li>
<li data-sly-test="${videoResults && videoResults.assetTypeUrl}" class="m-TabbedContent__a-Tab ${videoResults.tabLinkClass}"><a href="${videoResults.assetTypeUrl @ context='unsafe'}" data-type="tab-ctrl">Videos</a></li>
<li data-sly-test="${peopleResults && peopleResults.assetTypeUrl}" class="m-TabbedContent__a-Tab ${peopleResults.tabLinkClass}"><a href="${peopleResults.assetTypeUrl @ context='unsafe'}" data-type="tab-ctrl">People</a></li>
<li data-sly-test="${storyResults && storyResults.assetTypeUrl}" class="m-TabbedContent__a-Tab ${storyResults.tabLinkClass}"><a href="${storyResults.assetTypeUrl @ context='unsafe'}" data-type="tab-ctrl">Features</a></li>
</ul>
</div>
</sly>
<div class="search-results__group search-results__group--shows" data-sly-test="${(showResults && showResults.results.size > 0) && (showResults.isActiveTab || model.isTopResults)}">
<h4 data-sly-test="${model.isTopResults}" class="search-results__title">Shows</h4>
<div class="search-results__row search-results__row--shows ${context.isMobile && !model.isTopResults ? 'l-Columns l-Columns--2up': (model.isTopResults ? 'nowrap' : '')}">
<sly data-sly-list.show="${model.assetTypeResults['show'].results}">
<!--/* Less than or equal to 4 Shows */-->
<!--/*
totalResults -- Total search results available.
maxResults -- Max results allowed per page.
Top Results Page -- (4 per page),
Asset Type Results Page (e.g. Shows -- 20 results allowed per page)
*/-->
<sly data-sly-test="${showResults.totalResults < 5 && maxResults > showList.index}">
<div class="mediablock" data-sly-test="${show.image || show.dPlusImage}">
<div class="mediablock__mediawrap">
<a href="${show.url}" class="mediablock__image-anchor" target="${show.target}">
<sly data-sly-test=${show.dPlusImage}>
<img src="${show.dPlusImage}?h=360" class="mediablock__image"/>
</sly>
<sly data-sly-test=${!show.dPlusImage}>
<img src="${show.image.rendition['sni7col-square']}" class="mediablock__image"/>
</sly>
</a>
</div>
<div class="mediablock__textwrap">
<a href="${show.url}" class="mediablock__text-anchor" target="${show.target}">
<p class="mediablock__text">${show.title}</p>
</a>
</div>
</div>
</sly>
<!--/* If more than 4 Shows are returned */-->
<sly data-sly-test="${showResults.totalResults > 4 && ((showList.index < 3 && model.isTopResults) || !model.isTopResults)}">
<div class="mediablock" data-sly-test="${show.image || show.dPlusImage}">
<div class="mediablock__mediawrap">
<a href="${show.url}" class="mediablock__image-anchor" target="${show.target}">
<sly data-sly-test=${show.dPlusImage}>
<img src="${show.dPlusImage}?h=360" class="mediablock__image"/>
</sly>
<sly data-sly-test=${!show.dPlusImage}>
<img src="${show.image.rendition['sni7col-square']}" class="mediablock__image"/>
</sly>
</a>
</div>
<div class="mediablock__textwrap">
<a href="${show.url}" class="mediablock__text-anchor" target="${show.target}">
<p class="mediablock__text">${show.title}</p>
</a>
</div>
</div>
<div class="bigbox-ad" data-slot-type="dfp_after_component" data-sly-test="${(!model.isTopResults) && model.adRow[showList.count]}"></div>
</sly>
<!--/* See All Shows */-->
<sly data-sly-test="${model.isTopResults && showList.index == 3 && showResults.totalResults > 4}">
<div class="mediablock">
<div class="mediablock__mediawrap more-results">
<a href="${showResults.assetTypeUrl}" class="mediablock__image-anchor">
See All
</a>
<a href="${showResults.assetTypeUrl}" class="mediablock__image-anchor">
Shows
</a>
</div>
</div>
</sly>
</sly>
</div>
<sly data-sly-test="${showResults.totalResults > maxResults && !model.isTopResults}" data-sly-call="${pagination @ results=showResults}" />
</div>
<div class="search-results__group search-results__group--episodes" data-sly-test="${(episodeResults && episodeResults.results.size > 0) && (episodeResults.isActiveTab || model.isTopResults)}">
<h4 data-sly-test="${model.isTopResults}" class="search-results__title">Episodes</h4>
<div class="search-results__row search-results__row--episodes ${context.isMobile && !model.isTopResults ? 'l-Columns l-Columns--2up': (model.isTopResults ? 'nowrap' : '')}" data-sly-use.atoms="fragments/atoms.html">
<sly data-sly-list.episode="${model.assetTypeResults['episode'].results}">
<!--/* Less than or equal to 4 Episodes */-->
<!--/*
totalResults -- Total search results available.
maxResults -- Max results allowed per page.
Top Results Page -- (4 per page),
Asset Type Results Page (e.g. Episodes -- 20 results allowed per page)
*/-->
<sly data-sly-test="${episodeResults.totalResults < 5 && maxResults > episodeList.index}">
<div class="mediablock" data-sly-test="${episode.image}">
<div class="mediablock__mediawrap">
<sly data-sly-call="${atoms.button @ parent=model.name, data=episode.buttonAtom}"></sly>
<a href="${episode.url}" class="mediablock__image-anchor" target="${episode.target}">
<img src="${episode.image.rendition['sni7col-wide']}" class="mediablock__image"/>
</a>
</div>
<div class="mediablock__textwrap">
<a href="${episode.url}" class="mediablock__text-anchor" target="${episode.target}">
<p class="mediablock__text">${episode.title}</p>
</a>
<p class="mediablock__credit">${episode.showName}</p>
<p class="mediablock__asset-info mediablock__asset-info--show" data-sly-test="${episode.assetInfo}">${episode.assetInfo}</p>
</div>
</div>
</sly>
<!--/* If more than 4 Episodes are returned */-->
<sly data-sly-test="${episodeResults.totalResults > 4 && ((episodeList.index < 3 && model.isTopResults) || !model.isTopResults)}">
<div class="mediablock" data-sly-test="${episode.image}">
<div class="mediablock__mediawrap">
<sly data-sly-call="${atoms.button @ parent=model.name, data=episode.buttonAtom}"></sly>
<a href="${episode.url}" class="mediablock__image-anchor" target="${episode.target}">
<img src="${episode.image.rendition['sni7col-wide']}" class="mediablock__image"/>
</a>
</div>
<div class="mediablock__textwrap">
<a href="${episode.url}" class="mediablock__text-anchor" target="${episode.target}">
<p class="mediablock__text">${episode.title}</p>
</a>
<p class="mediablock__credit">${episode.showName}</p>
<p class="mediablock__asset-info mediablock__asset-info--show" data-sly-test="${episode.assetInfo}">${episode.assetInfo}</p>
</div>
</div>
<div class="bigbox-ad" data-slot-type="dfp_after_component" data-sly-test="${(!model.isTopResults) && model.adRow[episodeList.count]}"></div>
</sly>
<!--/* See All Episodes */-->
<sly data-sly-test="${model.isTopResults && episodeList.index == 3 && episodeResults.totalResults > 4}">
<div class="mediablock">
<div class="mediablock__mediawrap more-results">
<a href="${episodeResults.assetTypeUrl}" class="mediablock__image-anchor">
See All
</a>
<a href="${episodeResults.assetTypeUrl}" class="mediablock__image-anchor">
Episodes
</a>
</div>
</div>
</sly>
</sly>
</div>
<sly data-sly-test="${episodeResults.totalResults > maxResults && !model.isTopResults}" data-sly-call="${pagination @ results=episodeResults}" />
</div>
<div class="search-results__group search-results__group--profiles" data-sly-test="${(peopleResults && peopleResults.results.size > 0) && (peopleResults.isActiveTab || model.isTopResults)}">
<h4 data-sly-test="${model.isTopResults}" class="search-results__title">People</h4>
<div class="search-results__row search-results__row--profiles ${context.isMobile && !model.isTopResults ? 'l-Columns l-Columns--2up': (model.isTopResults ? 'nowrap' : '')}">
<sly data-sly-list.profile="${model.assetTypeResults['people'].results}">
<sly data-sly-test="${peopleResults.totalResults < 5 && maxResults > profileList.index}">
<div class="mediablock" data-sly-test="${profile.image}">
<div class="mediablock__mediawrap">
<a href="${profile.url}" class="mediablock__image-anchor" target="${profile.target}">
<img src="${profile.image.rendition['sni7col-square']}" class="mediablock__image" />
</a>
</div>
<div class="mediablock__textwrap mediablock__textwrap--profiles">
<a href="${profile.url}" class="mediablock__text-anchor" target="${profile.target}">
<p class="mediablock__text">${profile.title}</p>
</a>
</div>
</div>
</sly>
<!--/* If more than 4 Profiles are returned */-->
<sly data-sly-test="${peopleResults.totalResults > 4 && ((profileList.index < 3 && model.isTopResults) || !model.isTopResults)}">
<div class="mediablock" data-sly-test="${profile.image}">
<div class="mediablock__mediawrap">
<a href="${profile.url}" class="mediablock__image-anchor" target="${profile.target}">
<img src="${profile.image.rendition['sni7col-square']}" class="mediablock__image"/>
</a>
</div>
<div class="mediablock__textwrap mediablock__textwrap--profiles">
<a href="${profile.url}" class="mediablock__text-anchor" target="${profile.target}">
<p class="mediablock__text">${profile.title}</p>
</a>
</div>
</div>
<div class="bigbox-ad" data-slot-type="dfp_after_component" data-sly-test="${(!model.isTopResults) && model.adRow[profileList.count]}"></div>
</sly>
<!--/* See All Profiles */-->
<sly data-sly-test="${model.isTopResults && profileList.index == 3 && peopleResults.totalResults > 4}">
<div class="mediablock">
<div class="mediablock__mediawrap more-results">
<a href="${peopleResults.assetTypeUrl}" class="mediablock__image-anchor">
See All
</a>
<a href="${peopleResults.assetTypeUrl}" class="mediablock__image-anchor">
People
</a>
</div>
</div>
</sly>
</sly>
</div>
<sly data-sly-test="${peopleResults.totalResults > maxResults && !model.isTopResults}" data-sly-call="${pagination @ results=peopleResults}" />
</div>
<div class="bigbox-ad" data-slot-type="dfp_after_component" data-sly-test="${context.isMobile && model.isTopResults}"></div>
<div class="search-results__group search-results__group--videos" data-sly-test="${(videoResults && videoResults.results.size > 0) && (videoResults.isActiveTab || model.isTopResults)}">
<h4 data-sly-test="${model.isTopResults}" class="search-results__title">Videos</h4>
<div class="search-results__row search-results__row--videos ${context.isMobile && !model.isTopResults ? 'l-Columns l-Columns--2up': (model.isTopResults ? 'nowrap' : '')}" data-sly-use.atoms="fragments/atoms.html">
<sly data-sly-list.video="${model.assetTypeResults['video'].results}">
<!--/* Less than or equal to 4 Videos */-->
<!--/*
totalResults -- Total search results available.
maxResults -- Max results allowed per page.
Top Results Page -- (4 per page),
Asset Type Results Page (e.g. Videos -- 20 results allowed per page)
*/-->
<sly data-sly-test="${videoResults.totalResults < 5 && maxResults > videoList.index}">
<div class="mediablock" data-sly-test="${video.image}">
<div class="mediablock__mediawrap">
<sly data-sly-call="${atoms.button @ parent=model.name, data=video.buttonAtom}"></sly>
<a href="${video.url}" class="mediablock__image-anchor" target="${video.target}">
<img src="${video.image.rendition['sni7col-wide']}" class="mediablock__image" />
</a>
</div>
<div class="mediablock__textwrap">
<a href="${video.url}" class="mediablock__text-anchor" target="${video.target}">
<p class="mediablock__text">
${video.title} <span class="mediablock__asset-info mediablock__asset-info--video" data-sly-test="${video.assetInfo}">${video.assetInfo}</span>
</p>
</a>
</div>
</div>
</sly>
<!--/* If more than 4 Videos are returned */-->
<sly data-sly-test="${videoResults.totalResults > 4 && ((videoList.index < 3 && model.isTopResults) || !model.isTopResults)}">
<div class="mediablock" data-sly-test="${video.image}">
<div class="mediablock__mediawrap">
<sly data-sly-call="${atoms.button @ parent=model.name, data=video.buttonAtom}"></sly>
<a href="${video.url}" class="mediablock__image-anchor" target="${video.target}">
<img src="${video.image.rendition['sni7col-wide']}" class="mediablock__image" />
</a>
</div>
<div class="mediablock__textwrap">
<a href="${video.url}" class="mediablock__text-anchor" target="${video.target}">
<p class="mediablock__text">
${video.title} <span class="mediablock__asset-info mediablock__asset-info--video" data-sly-test="${video.assetInfo}">${video.assetInfo}</span>
</p>
</a>
</div>
</div>
<div class="bigbox-ad" data-slot-type="dfp_after_component" data-sly-test="${(!model.isTopResults) && model.adRow[videoList.count]}"></div>
</sly>
<!--/* See All Videos */-->
<sly data-sly-test="${model.isTopResults && videoList.index == 3 && videoResults.totalResults > 4}">
<div class="mediablock">
<div class="mediablock__mediawrap more-results">
<a href="${videoResults.assetTypeUrl}" class="mediablock__image-anchor">
See All
</a>
<a href="${videoResults.assetTypeUrl}" class="mediablock__image-anchor">
Videos
</a>
</div>
</div>
</sly>
</sly>
</div>
<sly data-sly-test="${videoResults.totalResults > maxResults && !model.isTopResults}" data-sly-call="${pagination @ results=videoResults}" />
</div>
<!--/* "featured" just means any other asset type (i.e. "not videos, episodes, profiles, or shows") */-->
<div class="search-results__group search-results__group--featured" data-sly-test="${(storyResults && storyResults.results.size > 0) && (storyResults.isActiveTab || model.isTopResults)}">
<h4 data-sly-test="${model.isTopResults}" class="search-results__title">Features</h4>
<div class="search-results__row search-results__row--featured ${context.isMobile && !model.isTopResults ? 'l-Columns l-Columns--2up': (model.isTopResults ? 'nowrap' : '')}">
<sly data-sly-list.featured="${model.assetTypeResults['story'].results}">
<!--/* Less than or equal to 4 Stories */-->
<sly data-sly-test="${storyResults.totalResults < 5 && maxResults > featuredList.index}">
<div class="mediablock" data-sly-test="${featured.image}">
<div class="mediablock__mediawrap">
<a href="${featured.url}" class="mediablock__image-anchor" target="${featured.target}">
<img src="${featured.image.rendition['sni7col-square']}" class="mediablock__image" />
</a>
</div>
<div class="mediablock__textwrap">
<a href="${featured.url}" class="mediablock__text-anchor" target="${featured.target}">
<p class="mediablock__text">
${featured.title} <span class="mediablock__asset-info mediablock__asset-info--photo" data-sly-test="${featured.assetInfo}">${featured.assetInfo}</span>
</p>
</a>
</div>
</div>
</sly>
<!--/* If more than 4 Stories are returned */-->
<sly data-sly-test="${storyResults.totalResults > 4 && ((featuredList.index < 3 && model.isTopResults) || !model.isTopResults)}">
<div class="mediablock" data-sly-test="${featured.image}">
<div class="mediablock__mediawrap">
<a href="${featured.url}" class="mediablock__image-anchor" target="${featured.target}">
<img src="${featured.image.rendition['sni7col-square']}" class="mediablock__image" />
</a>
</div>
<div class="mediablock__textwrap">
<a href="${featured.url}" class="mediablock__text-anchor" target="${featured.target}">
<p class="mediablock__text">
${featured.title} <span class="mediablock__asset-info mediablock__asset-info--photo" data-sly-test="${featured.assetInfo}">${featured.assetInfo}</span>
</p>
</a>
</div>
</div>
<div class="bigbox-ad" data-slot-type="dfp_after_component" data-sly-test="${(!model.isTopResults) && model.adRow[featuredList.count]}"></div>
</sly>
<!--/* See All Features */-->
<sly data-sly-test="${model.isTopResults && featuredList.index == 3 && storyResults.totalResults > 4}">
<div class="mediablock">
<div class="mediablock__mediawrap more-results">
<a href="${storyResults.assetTypeUrl}" class="mediablock__image-anchor">
See All
</a>
<a href="${storyResults.assetTypeUrl}" class="mediablock__image-anchor">
Features
</a>
</div>
</div>
</sly>
</sly>
</div>
<sly data-sly-test="${storyResults.totalResults > maxResults && !model.isTopResults}" data-sly-call="${pagination @ results=storyResults}" />
</div>
</div>
</sly>
<template data-sly-template.pagination="${@ results}">
<sly data-sly-use.pageIncrement="${'groupedSiteSearchHelper.js' @ num1=results.currentPage, num2=1}" /> <!--/* currentPg + 1 */-->
<sly data-sly-use.currPgPlusTwo="${'groupedSiteSearchHelper.js' @ num1=results.currentPage, num2=2}" /> <!--/* currentPg + 2 */-->
<sly data-sly-test.negOne="${'-#' @ format=1, type='number'}" /> <!--/* -1 */-->
<sly data-sly-test.negTwo="${'-#' @ format=2, type='number'}" /> <!--/* -2 */-->
<sly data-sly-use.lastButOnePg="${'groupedSiteSearchHelper.js' @ num1=results.totalPages, num2=negOne}" /> <!--/* totalPages -1 */-->
<sly data-sly-use.currPgMinusOne="${'groupedSiteSearchHelper.js' @ num1=results.currentPage, num2=negOne}" /> <!--/* currentPg -1 */-->
<sly data-sly-use.currPgMinusTwo="${'groupedSiteSearchHelper.js' @ num1=results.currentPage, num2=negTwo}" /> <!--/* currentPg -2 */-->
<sly data-sly-test.negCurrPg="${'-#' @ format=results.currentPage, type='number'}" /> <!--/* -currentPg */-->
<sly data-sly-use.diffTotalPgCurrPg="${'groupedSiteSearchHelper.js' @ num1=results.totalPages, num2=negCurrPg}" /> <!--/* totalPages -currentPg */-->
<!--/* Mobile */-->
<sly data-sly-test="${context.isMobile}">
<sly data-sly-test.prevUrl="${results.assetTypeUrl}/p/${results.previousPage}"></sly>
<sly data-sly-test.nextUrl="${results.assetTypeUrl}/p/${results.nextPage}"></sly>
<!--/* Asset Type Label */-->
<sly data-sly-test.nonFeatureAssetTypeLabel="${results.assetType}${results.assetType=='People' ? '' : 's'}"></sly>
<sly data-sly-test.assetTypeLabel="${results.assetType=='Story' ? 'Features' : nonFeatureAssetTypeLabel}"></sly>
<div class="pagination">
<section class="o-Pagination o-Pagination--Simple">
<ul class="l-Columns l-Columns--2up">
<li class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button o-Pagination__a-PreviousButton ${results.currentPage<=1 ? 'is-Disabled': ''}" href="${results.currentPage>1 ? prevUrl : ''}">
Previous ${assetTypeLabel}
</a>
</li>
<li class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button o-Pagination__a-NextButton ${results.nextPage==0 ? 'is-Disabled': ''}" href="${results.nextPage>0 ? nextUrl : ''}">
Next ${assetTypeLabel}
</a>
</li>
</ul>
</section>
</div>
</sly>
<!--/* Desktop */-->
<sly data-sly-test="${!context.isMobile}">
<!--/* General Rules */-->
<!--/* Show '<' (previous) icon if on pages 2 and above */-->
<!--/* Hide '>' (next) icon on lastPage. Show icon if nextPage>0. nextPage gets set to 0 on lastPage */-->
<!--/* Always show pages 1, 2 if they exist, likewise show lastPage (if last page > 2). lastPage is nothing but the totalPages. */-->
<!--/* From pages 1 - 5 show all links from 1 upto currentPage as long as currentPage <= 5 */-->
<!--/* From page 6 onwards show the 1st ellipses '...' after pages 1, 2 followed by two page number links -- i.e 4, 5,
followed by currentPg (6 in this case), followed by the next two pg number links i.e. -- 7, 8,
followed by the 2nd ellipses if the difference between the currentPg (6) and totalPages (200) is greater than 4.
If (totalPages<9) show the 2nd ellipses only if the difference between the currentPg and totalPages is greater than 3.
e.g. representation of pagination when on Pg 6: (assuming 200 is the lastPg==totalPages)
< 1 2 ... 4 5 (6) 7 8 ... 200 >
*/-->
<section class="o-Pagination">
<ul class="">
<!--/* Previous */-->
<li data-sly-test="${results.currentPage>1}" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button o-Pagination__a-PreviousButton" href="${results.assetTypeUrl}/p/${results.previousPage}">
<
</a>
</li>
<!--/* Page 1 */-->
<li class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button ${results.currentPage==1 ? 'is-Active' : ''}" href="${results.assetTypeUrl}/p/1">1</a>
</li>
<!--/* Page 2 */-->
<li data-sly-test="${results.totalPages>1}" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button ${results.currentPage==2 ? 'is-Active' : ''}" href="${results.assetTypeUrl}/p/2">2</a>
</li>
<!--/* 'pageNumbers' - stores the list of page numbers returned */-->
<sly data-sly-list.pageNumbers="${results.totalPagesList}">
<!--/* Loop through 'pageNumbers' list -- generate the code below for pagination links when current page is found in the list */-->
<sly data-sly-test="${pageNumbersList.count==results.currentPage}">
<!--/* The first '...' is displayed from page 6 onwards if totalPages>=7 and
the difference (currentPage-2 > 4).
*/-->
<li data-sly-test="${results.currentPage>5 && currPgMinusTwo.total>3}" class="o-Pagination__a-ListItem">
<span class="o-Pagination__a-Ellipses">…</span>
</li>
<!--/* Display page number links from 1 through currentPage when currentPage < 6 */-->
<sly data-sly-test="${results.currentPage<6}">
<sly data-sly-test="${results.currentPage>=4}">
<!--/* Current Page - 2 */-->
<li data-sly-test="${results.currentPage>4}" class="o-Pagination__a-ListItem" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button" href="${results.assetTypeUrl}/p/${currPgMinusTwo.total}">${currPgMinusTwo.total}</a>
</li>
<!--/* Current Page - 1 */-->
<li class="o-Pagination__a-ListItem" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button" href="${results.assetTypeUrl}/p/${currPgMinusOne.total}">${currPgMinusOne.total}</a>
</li>
</sly>
<li data-sly-test="${results.currentPage>2}" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button ${results.currentPage==pageNumbersList.count ? 'is-Active' : ''}" href="${results.assetTypeUrl}/p/${pageNumbersList.count}">${pageNumbersList.count}</a>
</li>
<li data-sly-test="${results.currentPage>1 && pageIncrement.total<=results.totalPages}" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button" href="${results.assetTypeUrl}/p/${pageIncrement.total}">${pageIncrement.total}</a>
</li>
<li data-sly-test="${currPgPlusTwo.total<=results.totalPages}" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button" href="${results.assetTypeUrl}/p/${currPgPlusTwo.total}">${currPgPlusTwo.total}</a>
</li>
</sly>
<!--/* When currentPage>=6, display currentPage link prefixed by the previous two page number links,
and suffixed by the two successive page number links */-->
<sly data-sly-test="${results.currentPage>=6}">
<!--/* Current Page - 2 */-->
<li class="o-Pagination__a-ListItem" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button" href="${results.assetTypeUrl}/p/${currPgMinusTwo.total}">${currPgMinusTwo.total}</a>
</li>
<!--/* Current Page - 1 */-->
<li class="o-Pagination__a-ListItem" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button" href="${results.assetTypeUrl}/p/${currPgMinusOne.total}">${currPgMinusOne.total}</a>
</li>
<!--/* Current Page */-->
<li class="o-Pagination__a-ListItem" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button ${results.currentPage==pageNumbersList.count ? 'is-Active' : ''}" href="${results.assetTypeUrl}/p/${pageNumbersList.count}">${pageNumbersList.count}</a>
</li>
<!--/* Current Page + 1 */-->
<li data-sly-test="${diffTotalPgCurrPg.total>=1 && pageIncrement.total<=results.totalPages}" class="o-Pagination__a-ListItem" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button" href="${results.assetTypeUrl}/p/${pageIncrement.total}">${pageIncrement.total}</a>
</li>
<!--/* Current Page + 2 */-->
<li data-sly-test="${diffTotalPgCurrPg.total>=2 && results.currentPage!=results.totalPages}" class="o-Pagination__a-ListItem" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button" href="${results.assetTypeUrl}/p/${currPgPlusTwo.total}">${currPgPlusTwo.total}</a>
</li>
<!--/* Last but one page */-->
<li data-sly-test="${diffTotalPgCurrPg.total==4 && results.currentPage!=results.totalPages}" class="o-Pagination__a-ListItem" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button" href="${results.assetTypeUrl}/p/${lastButOnePg.total}">${lastButOnePg.total}</a>
</li>
</sly>
<li data-sly-test="${diffTotalPgCurrPg.total>4 || (results.totalPages<=9 && diffTotalPgCurrPg.total>3)}" class="o-Pagination__a-ListItem">
<span class="o-Pagination__a-Ellipses">…</span>
</li>
<li data-sly-test="${diffTotalPgCurrPg.total>2}" class="o-Pagination__a-ListItem" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button" href="${results.assetTypeUrl}/p/${results.totalPages}">${results.totalPages}</a>
</li>
</sly>
</sly>
<!-- /* Next */ -->
<li data-sly-test="${results.nextPage>0}" class="o-Pagination__a-ListItem">
<a class="o-Pagination__a-Button o-Pagination__a-NextButton" href="${results.assetTypeUrl}/p/${results.nextPage}">
>
</a>
</li>
</ul>
</section>
</sly>
</template>