{{setVariable "showMoreButton" "false"}}
{{setVariable "filterTemplate" "true"}}
{{setVariable "tileGradient" "1"}}
{{setVariable "showDate" filterSetup.showDates}}

{{#each filterSetup.genres}}
{{#if isChecked}}
<h1>{{titleOverview}}</h1>
{{/if}}
{{/each}}

{{#if pagedList.items}}
{{#each pagedList.items as | production |}}
    {{setVariable "showMoreButton" "false"}}
    {{setVariable "tileGradient" gradient}}
    {{#if @root.showDate}}
    {{#ifNotCondition production.group @root.group}}
<div class="productions__day">
    <span>{{{production.group}}}</span>
</div>
        {{resetPosition}}
    {{/ifNotCondition}}
        {{setPosition}}
    {{setVariable "group" production.group}}
    {{/if}}
<div class="tile js-tile">
    <div class="tile__image gradient{{@root.tileGradient}}">
        <div>
            <picture>
                <source media="(min-width: 992px)" srcset="{{imageWithFocalPoint}}&width=450&height=252&mode=crop&format=webp&quality=70 1x, {{imageWithFocalPoint}}&width=900&height=504&mode=crop&format=webp&quality=70 2x" type="image/webp" />
                <source srcset="{{imageWithFocalPoint}}&width=343&height=192&mode=crop&format=webp&quality=70 1x, {{imageWithFocalPoint}}&width=686&height=384&mode=crop&format=webp&quality=70 2x" type="image/webp" />
                <img loading="lazy" src="{{imageWithFocalPoint}}&width=343&height=192&mode=crop&format=webp&quality=70" width="343" height="192" onerror="this.style.display='none'" alt="{{imageAlt}}" />
            </picture>
            <div class="genres">
                {{#if genres}}
                {{#each genres}}
                <div class="genre genre--reverse genre--small color{{@root.tileGradient}}">{{name}}</div>
                {{/each}}
                {{/if}}
                {{#if hallLabel}}
                <div class="genre genre--reverse genre--small color{{@root.tileGradient}}">{{hallLabel}}</div>
                {{/if}}
            </div>
        </div>
    </div>
    <div class="tile__text">
        <h3><span class="gradient{{@root.tileGradient}}">{{{title}}}{{#if ageIndication}} ({{ageIndication}}){{/if}}</span></h3>
        <p>{{subtitle}}</p>
        <div class="genres">
            {{#if @root.showDate}}
            {{#if time}}
            <div class="genre genre--reverse genre--small color{{@root.tileGradient}}">{{time}}</div>
            {{/if}}
            {{#if type}}
            <div class="genre genre--reverse genre--small genre--outline color{{@root.tileGradient}}">{{type}}</div>
            {{/if}}
            {{else}}
            {{#if dateCompact}}
            <div class="genre genre--reverse genre--small color{{@root.tileGradient}}">{{dateCompact}}</div>
            {{/if}}
            {{#if dateCompact2}}
            <div class="genre genre--reverse genre--small color{{@root.tileGradient}}">{{dateCompact2}}</div>
            {{/if}}
            {{/if}}
        </div>
    </div>

    {{#if @root.showDate}}
    <div class="tile__footer">
        <a href="{{url}}" class="button button--small">Meer informatie</a>
        {{#if button.url}}
        <a href="{{button.url}}" target="_blank" class="button button--small button--{{button.classname}}">{{button.text}}</a>
        {{else}}
        <span class="button button--small button--{{button.classname}} button--disabled">{{button.text}}</span>
        {{/if}}
    </div>
    {{/if}}
    {{#ifNotCondition isPerformance true}}
    <a href="{{url}}" title="{{title}}"></a>
    {{/ifNotCondition}}
</div>


{{/each}}
{{#ifNotCondition pagedList.paginator.currentPage pagedList.paginator.endPage}}
<div class="productions__more">
    <button type="button" class="button button--more js-productions-more">Toon meer</button>
</div>
{{/ifNotCondition}}
{{else}}
<div class="noresults">
    <p>
        Je filters hebben geen resultaten opgeleverd.<br />Probeer eens een ander filter.
    </p>
</div>
{{/if}}