{{>list_header}}
<div class="content-cards-list{{#if extraCssClass}} {{extraCssClass}}{{/if}}{{#eq (makeCarousel contentCards) true}} content-card-slider main-carousel{{#eq (length contentCards) 3}} hide-arrows{{/eq}}{{/eq}}"{{#and trackPageInGa (not dontTrackGroupInGa)}} data-ga-track data-ga-event-category="Banner tracking"{{/and}}{{#eq (makeCarousel contentCards) true}} data-activate-scroll="5"{{/eq}}>
  {{#each contentCards}}

    {{#eq sys.contentType.sys.id 'displayCard'}}
{{>display_card fields dataEntryId=sys.id}}
    {{/eq}}

    {{#eq sys.contentType.sys.id 'contentCard'}}
{{>content_card fields dataEntryId=sys.id pageName=@root/data.fields.url trackPageInGa=../trackPageInGa dontTrackGroupInGa=../dontTrackGroupInGa componentName=../name componentHeading=../heading index=(sum @index 1) ccgIndex=../componentIndex useFullMobileWidth=../useFullMobileWidth}}
    {{/eq}}

    {{#eq sys.contentType.sys.id 'searchResultCard'}}
{{>search_result_card fields dataEntryId=sys.id pageName=@root/data.fields.url center=(gt (length ../contentCards) 2) carousel=(makeCarousel ../contentCards) numberOfCards=(length ../contentCards)}}
    {{/eq}}

    {{#eq sys.contentType.sys.id 'offerCard'}}
{{>offer_card fields dataEntryId=sys.id pageName=@root/data.fields.url large=(lt (length ../contentCards) 4)}}
    {{/eq}}

    {{#eq sys.contentType.sys.id 'contentCardGroup'}}
      {{#withFirst fields.contentCards 1}}
{{>content_card fields dataEntryId=sys.id pageName=@root/data.fields.url trackPageInGa=../../trackPageInGa dontTrackGroupInGa=../../dontTrackGroupInGa componentName=../../name componentHeading=../../heading index=(sum @../index 1) ccgIndex=../../componentIndex}}
      {{/withFirst}}
    {{/eq}}

    {{#eq sys.contentType.sys.id 'page'}}
{{>content_card (pageToContentCardMapper this) trackPageInGa=../trackPageInGa dontTrackGroupInGa=../dontTrackGroupInGa ccgIndex=../componentIndex}}
    {{/eq}}

    {{#eq sys.contentType.sys.id 'conceptPage'}}
{{>content_card (pageToContentCardMapper this) ccgIndex=../componentIndex}}
    {{/eq}}

    {{#eq sys.contentType.sys.id 'scriptComponent'}}
       {{{fields.codeBlock}}}
    {{/eq}}

  {{/each}}
</div>
{{#each contentCards}}
  {{#if fields.linkModal}}
{{>link_modal linkModalId=(slug (lowercase fields.heading))}}
  {{/if}}

  {{#eq sys.contentType.sys.id 'contentCardGroup'}}
    <div class="hidden">
      <script>var alreadyInCCSegment{{sys.id}} = false</script>
      {{#each fields.contentCards}}
        {{#eq @index 0}}
          <script>var defaultCCId = '{{sys.id}}'</script>
        {{/eq}}
        {{#gt @index 0}}
          {{#eq sys.contentType.sys.id 'scriptComponent'}}
            {{{fields.codeBlock}}}
          {{else}}
{{>content_card fields dataEntryId=sys.id pageName=@root/data.fields.url trackPageInGa=../../trackPageInGa dontTrackGroupInGa=../../dontTrackGroupInGa componentName=../../name componentHeading=../../heading index=(sum @../index 1) ccgIndex=../../componentIndex}}
          {{/eq}}
          {{#if fields.personalisation.fields.segment}}
            {{{fields.personalisation.fields.segment.fields.segmentCode}}}
            <script>
              (function() {
                if(location.search.indexOf('personalisation=off') > -1) {
                  return
                }

                var tuiCookie = superAbTesting.helper.getSegment(),
                    variantToSee = 0,
                    cookieDistribution = {{generateCookieDistribution fields.heading fields.personalisation.fields.variationDistribution}}

                for(var i = 0; i < 2; i++) {
                  if(cookieDistribution[i].indexOf(tuiCookie) > -1) {
                    variantToSee = i
                    break
                  }
                }

                var eventLabel = '{{fields.personalisation.fields.segment.fields.name}};{{fields.name}};Original'
                var isInCCSegment{{sys.id}} = window['{{fields.personalisation.fields.segment.fields.segmentName}}']()
                var personalizedCard{{sys.id}}
                if (isInCCSegment{{sys.id}} && !alreadyInCCSegment{{../sys.id}}) {
                  if (variantToSee > 0) {
                    {{>maximum_displays}}
                    if (!hasSeenEnough) {
                      var defaultContentCard{{sys.id}} = document.querySelector('[data-id="' + defaultCCId + '"]')
                      if (defaultContentCard{{sys.id}}) {
                        personalizedCard{{sys.id}} = document.querySelector('[data-id="{{sys.id}}"]')
                        defaultContentCard{{sys.id}}.outerHTML = personalizedCard{{sys.id}}.outerHTML
                        alreadyInCCSegment{{../sys.id}} = true
                        eventLabel = eventLabel.replace('Original','Variation')
                      }
                    }
                  }
                  if (hasSeenEnough) {
                    return
                  }
                  var displayData = {
                    'eventCategory': 'DSO',
                    'eventAction': 'display',
                    'eventLabel': eventLabel,
                    'event': 'genericTrackEventNonInteraction'
                  }

                  var clickData = {
                    'eventCategory': 'DSO',
                    'eventAction': 'click',
                    'eventLabel': eventLabel,
                    'event': 'genericTrackEvent'
                  }

                  if (window.dataLayer) {
                    window.dataLayer.push(displayData)
                  }

                  if (variantToSee === 0) {
                    document.querySelector('[data-id="' + defaultCCId + '"]').addEventListener('click', function () {
                      if (window.dataLayer) {
                        window.dataLayer.push(clickData)
                      }
                      e.preventDefault()
                      return false
                    })
                  } else {
                    document.querySelector('[data-id="{{sys.id}}"]').addEventListener('click', function () {
                      if (window.dataLayer) {
                        window.dataLayer.push(clickData)
                      }
                    })
                  }
                }
              })()
            </script>
          {{/if}}
        {{/gt}}
      {{/each}}
    </div>
  {{/eq}}
{{/each}}

{{#if buttonGroup}}
  {{>button_group buttonGroup=buttonGroup alternateLayout=alternateLayout}}
{{/if}}