{{setVariable "group" ""}}
{{setVariable "tileClass" "tile--card-horizontal"}}
{{setVariable "tileColor" "green-dark"}}
{{setVariable "bannerPosition1" 2}}
{{setVariable "bannerPosition2" 12}}
{{setVariable "showMoreButton" "false"}}
{{setVariable "filterTemplate" "true"}}
{{setVariable "isDateGroup" "false"}}
{{#ifNotCondition filterSetup.blockLayout "Filter left"}}
    {{setVariable "tileClass" "tile--card"}}
    {{setVariable "tileColor" "green"}}
    {{setVariable "bannerPosition1" 5}}
    {{setVariable "bannerPosition2" 14}}
    {{setVariable "filterTemplate" "false"}}
{{/ifNotCondition}}

{{#if pagedList.items}}
{{#each pagedList.items as | production |}}
    {{setVariable "showMoreButton" "false"}}
    {{setVariable "isDateGroup" production.isGroup}}
    {{#ifNotCondition production.groupWithCount @root.group}}
        <h2>{{{production.groupWithCount}}}</h2>
        {{resetPosition}}
    {{/ifNotCondition}}
        {{setPosition}}
    {{setVariable "group" production.groupWithCount}}
    {{#ifNotCondition @root.filterTemplate "true"}}
<div class="col-lg-4 col-md-6">
    {{/ifNotCondition}}
    <div class="tile tile--card {{@root.tileClass}} tile--{{@root.tileColor}}" data-tags="{{#if tags}}{{#each tags}}{{key}}, {{/each}}{{/if}}" data-aos="fade-up" data-culture="nl-NL">
        {{#ifCondition @root.filterTemplate "true"}}
        <div class="tile__content">
        {{/ifCondition}}
            <div class="tile__image">
                <picture>
                    <source media="(min-width: 992px)" srcset="{{image}}?height=520&amp;width=778&amp;format=webp&amp;quality=70&rxy={{imageRXY}}" type="image/webp">
                    <source srcset="{{image}}?height=382&amp;width=575&amp;format=webp&amp;quality=70&rxy={{imageRXY}}" type="image/webp">
                    <img src="{{image}}?height=520&amp;width=778&amp;format=webp&amp;quality=70&rxy={{imageRXY}}" width="388" height="260" alt="" onerror="this.style.display='none'" loading="lazy" />
                </picture>
                {{#if label}}
                <div class="tile__label">
                    {{label}}
                </div>
                {{/if}}
            </div>
            <div class="tile__text">
                <h3>{{title}} <sup>{{ageIndication}}</sup></h3>
                {{#if singleDayEvent}}
                <time>{{dateBeautified}}{{#ifCondition false production.differentDatesOnSameDay}} <span>{{timeBeautified}}</span>{{/ifCondition}}</time>
                {{else}}
                <time>{{productionDateRangeBeautified}}</time>
                {{/if}}
                {{#ifCondition @root.filterTemplate "true"}}
                <p>{{{textShort}}}</p>
                {{/ifCondition}}
            </div>
            <div class="tile__footer">
                <ul class="tile__tags">
                    {{#if location}}
                    <li class="tile__tag tile__tag--location"><a href="{{location.url}}">{{location.title}}</a></li>
                    {{/if}}
                    {{#each genres as | genre |}}
                    {{#if genre.url}}
                    <li class="tile__tag"><a href="{{genre.url}}">{{genre.title}}</a></li>
                    {{else}}
                    <li class="tile__tag"><span>{{genre.title}}</span></li>
                    {{/if}}                   
                    {{/each}}
                </ul>
                <a href="{{url}}" class="cta" aria-label="{{title}}">Bekijken</a>
            </div>
            <a href="{{url}}" tabindex="-1"></a>
        {{#ifCondition @root.filterTemplate "true"}}
        </div>
        {{/ifCondition}}
        {{#ifCondition @root.filterTemplate "true"}}
        {{#if dates}}
        {{#ifNotCondition 1 dates.length}}
        

        <div class="tile__dates js-tile-dates">
            <div>
                {{#each datesGrouped as | group |}}

                
                    {{setVariable "headerSet" "false"}}
                    {{#each dates as | date |}}
                        {{#ifNotCondition production.dateBeautified date.dateBeautified}}
                        {{setVariable "showMoreButton" "true"}}
                        {{/ifNotCondition}}

                        <div class="tile__date--{{#ifCondition true production.differentDatesOnSameDay}}{{#ifNotCondition production.dateBeautified date.dateBeautified}}hidden{{/ifNotCondition}}{{/ifCondition}}{{#ifNotCondition true production.differentDatesOnSameDay}}hidden{{/ifNotCondition}} {{#if @root.isDateGroup}}tile__date--withlocation{{/if}}">
                            {{#if @root.isDateGroup}}
                                {{#ifCondition @root.headerSet "false" }}
                                    {{#ifNotCondition title group.productionTitle}}
                                        <div class="richtext"><a href="{{group.productionUrl}}">{{group.productionTitle}}</a></div>
                                    {{/ifNotCondition}}
                                {{/ifCondition}}
                                {{#ifCondition @root.headerSet "true" }}                                     
                                        <div class="richtext empty"></div>
                                {{/ifCondition}}
                            {{/if}}
                            <div><span class="d-lg-inline">{{date.dateBeautifiedShort}}</span></div>
                            <div>{{date.timeBeautified}}</div>
                            <div>{{date.location}}</div>
                            <div><span class="cta">Bekijken</span></div>
                            <a href="{{date.url}}" title="{{date.dateBeautified}} {{date.timeBeautified}}"></a>
                        </div>

                        {{setVariable "headerSet" "true"}}

                    {{/each}} 
                {{/each}}
            </div>
            {{#ifCondition @root.showMoreButton "true" }}
            <button type="button" class="tile__showdates js-tile-showdates">
                Toon alle dagen
                <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M1 1.07104L8.07107 8.14211L15.1421 1.07104" stroke="#100E41" stroke-width="2" />
</svg>
            </button>
            {{/ifCondition}}
        </div>

        {{/ifNotCondition}}
        {{/if}}
        {{/ifCondition}}
    </div>
    {{#ifNotCondition @root.filterTemplate "true"}}
</div>
    {{/ifNotCondition}}
    {{#ifCondition @root.position @root.bannerPosition1}}
        {{#if @root.pagedList.advertisement}}
            {{#ifNotCondition @root.filterTemplate "true"}}
<div class="col-lg-12">
    {{/ifNotCondition}}
    <div class="ad ad--leaderboard ">
    <div>
        <a href="{{@root.pagedList.advertisement.url}}" target="_blank" rel="nofollow" title="{{@root.pagedList.advertisement.wcagTitle}}">
            <picture>
                <source srcset="{{@root.pagedList.advertisement.imageLeaderboard}}?width=894&height=200 1x, {{@root.pagedList.advertisement.imageLeaderboard}}?width=1788&height=400 2x" />
                <img src="{{@root.pagedList.advertisement.imageLeaderboard}}?width=894&height=200" width="894" height="200" alt="" class="d-none d-sm-inline-block" />
            </picture>
            <picture>
                <source srcset="{{@root.pagedList.advertisement.imageLargeMobileBanner}}?width=320&height=100 1x, {{@root.pagedList.advertisement.imageLargeMobileBanner}}?width=640&height=200 2x" />
                <img src="{{@root.pagedList.advertisement.imageLargeMobileBanner}}?width=320&height=100" width="320" height="100" alt="" class="d-sm-none" />
            </picture>            
        </a>
        <span>Advertentie</span>
    </div>
</div>
    {{#ifNotCondition @root.filterTemplate "true"}}
</div>
            {{/ifNotCondition}}
        {{/if}}
    {{/ifCondition}}
    {{#ifCondition @root.position @root.bannerPosition2}}
        {{#if @root.pagedList.advertisement2}}
            {{#ifNotCondition @root.filterTemplate "true"}}
<div class="col-lg-12">
    {{/ifNotCondition}}
    <div class="ad ad--leaderboard ">
    <div>
        <a href="{{@root.pagedList.advertisement.url}}" target="_blank" rel="nofollow" title="{{@root.pagedList.advertisement.wcagTitle}}">
            <picture>
                <source srcset="{{@root.pagedList.advertisement.imageLeaderboard}}?width=894&height=200 1x, {{@root.pagedList.advertisement.imageLeaderboard}}?width=1788&height=400 2x" />
                <img src="{{@root.pagedList.advertisement.imageLeaderboard}}?width=894&height=200" width="894" height="200" alt="" class="d-none d-sm-inline-block" />
            </picture>
            <picture>
                <source srcset="{{@root.pagedList.advertisement.imageLargeMobileBanner}}?width=320&height=100 1x, {{@root.pagedList.advertisement.imageLargeMobileBanner}}?width=640&height=200 2x" />
                <img src="{{@root.pagedList.advertisement.imageLargeMobileBanner}}?width=320&height=100" width="320" height="100" alt="" class="d-sm-none" />
            </picture>            
        </a>
        <span>Advertentie</span>
    </div>
</div>
    {{#ifNotCondition @root.filterTemplate "true"}}
</div>
            {{/ifNotCondition}}
        {{/if}}
    {{/ifCondition}}
{{/each}}
{{#ifNotCondition pagedList.paginator.currentPage pagedList.paginator.endPage}}
{{#ifNotCondition @root.filterTemplate "true"}}
<div class="col-lg-12 text-center">
    {{/ifNotCondition}}
    <button type="button" class="button button--arrowdown button--purple js-productions-more">Laad meer</button>
    {{#ifNotCondition @root.filterTemplate "true"}}
</div>
{{/ifNotCondition}}
{{/ifNotCondition}}
{{else}}
<div class="col-lg-12 text-left">
    <div class="noresults">
        Je filters hebben geen resultaten opgeleverd.<br />Probeer eens een ander filter.
    </div>
</div>
{{/if}}