{% extends "_grid.twig" %}
	
{% block details %}
	

	<div class="cell large-3 large-cell-block-y recht-sidebar">
		<div class="grid-y large-grid-frame">
			
			{% include 'partials/navigation.twig' %}

		</div>
	</div>

	<div class="cell large-auto large-cell-block-y recht-content">
		<div class="grid-x">
			
			{% for item in categories.pages %}
				
				<div class="cell small-12 medium-6 large-4">
					
					{% if item.page_links_to %}
						
						{% set link = item.page_links_to[0] %}
						
						<div class="image image__grid-y image__hover-text">
							<div class="image-wrapper" data-src="{{ item.image[0] }}" data-lazy-load>
								<a class="h2" href="{{ link.url }}">{{ link.title }}</a>
							</div>
						</div>
						
						
					{% elseif item.clickable == 0 %}
					
						<div class="image image__grid-y"><div class="image-wrapper" data-src="{{ item.image[0] }}" data-lazy-load></div></div>
						
					{% elseif item.clickable == 2 %}
					
						<!--<div class="image image__grid-y"><div class="image-wrapper" data-src="{{ item.image[0] }}" data-lazy-load><a class="icon icon__play" data-open="modal-{{ item.page_id }}"></a></div></div>
						
						<div class="reveal small reveal__video" id="modal-{{ item.page_id }}" data-reveal>
							<div class="responsive-embed widecreen">{{ item.embed_code|raw }}</div>
						</div>-->
							
						<div class="image image__grid-y">
							<div class="responsive-embed responsive-embed__video-autoplay">{{ item.embed_code|raw }}</div>
						</div>	
						
					{% else %} 
					
						<div class="image image__grid-y">
							<div class="image-text">
								<h2 class="image-heading">{{ item.title }}</h2>
								<a class="image-link" href="{{ item.url }}">Lees verder</a>
							</div>
						</div>
						
					{% endif %}
				
				</div>
			
			{% endfor %}
			
			{% if categories.pages|length < 12 %}
				
				{% set filler = 12 - categories.pages|length  %}
					
				
				{% for i in 1 .. filler %}
					<div class="cell small-12 medium-6 large-4">
			
						{% if item.clickable == 0 %}
							<div class="image image__grid-y"><div class="image-wrapper" data-src="{{ item.image[0] }}" data-lazy-load></div></div>
						{% else %} 
							<div class="image image__grid-y">
								<div class="image-text">
									<h2 class="image-heading">{{ item.title }}</h2>
									<a class="image-link" href="{{ item.link }}">Lees verder</a>
								</div>
							</div>
						{% endif %}
			
					</div>
				{% endfor %}
				
			{% endif %}
			
			
		</div>
	</div>

  
{% endblock %}