{% 
	set items = [
		{ id:1, class: 'primary', href: null, title: "Personeel & jobs", cta: 'Ga naar personeel & jobs', subs: [ 'Werken bij het GO!', 'Onderwijspersoneel', 'Onderwijsloopbaanbegeleiding' ]}, 
		{ id:2, class: 'primary', href: null, title: "Pedagogische begeleiding", cta: 'CTA02', subs: [ 'Link 01', 'Link 02', 'Link 03' ]},
		{ id:3, class: 'primary', href: null, title: "Over GO!", cta: 'CTA03', subs: [ 'Link 01', 'Link 02', 'Link 03' ]},
		{ id:4, class: 'primary', href: null, title: "Infrastructuur", cta: 'CTA04', subs: [ 'Link 01', 'Link 02', 'Link 03' ]},
		{ id:5, class: 'primary', href: null, title: "Communicatie", cta: 'CTA05', subs: [ 'Link 01', 'Link 02', 'Link 03' ]},
		{ id:6, class: 'primary', href: null, title: "Regelgeving & financiën", cta: 'CTA06', subs: [ 'Link 01', 'Link 02', 'Link 03' ]},
		{ id:7, class: 'primary', href: null, title: "Crisismanagement", cta: 'CTA07', subs: [ 'Link 01', 'Link 02', 'Link 03' ]},
		{ id:8, class: 'primary', href: '#', title: "Beleidsthema's", cta: 'CTA07', subs: [ 'Link 01', 'Link 02', 'Link 03' ]},
		{ id:9, class: 'primary', href: '#', title: "Thema's A-Z", cta: 'CTA07', subs: [ 'Link 01', 'Link 02', 'Link 03' ]}
	] 
%}


<div class="o-categories">
	
	<div class="o-categories__collection">
		
		{% for item in items %}
		
		{% if item.href %}
			
			<a href="{{item.href}}" class="o-category o-category--{{item.class}}">
				<div class="o-category__header">
					<strong>{{ item.title | safe}}</strong>				
				</div>
			</a>
			
		{% else %}
		
		<div class="o-category o-category--{{item.class}}">
			
			<div class="o-category__header">
				<strong>{{ item.title | safe}}</strong>				
			</div>
			
			<div class="o-category__body">
				<span class="o-category__close"></span>
	
				<ul>
				{% for sub in item.subs %}
					<li><a href="#">{{ sub | safe }}</a></li>
				{% endfor %}
				</ul>
				
				<a href="#" class="a-button o-category__cta"><span class="icon-plus-circle"></span><span>{{item.cta | safe}}</span></a>
			</div>	
		</div>
		
		{% endif %}
		
		{% endfor %}
		
	</div>

</div>

<script>
	

	$(document).ready(function(){
		if(!window.styleguidesingletoncategory) {
			
			window.isMobile = true;
			
			// on resize, toggle behaviour
			$(window).resize(function(evt) {
				window.isMobile = (window.innerWidth <= 720);
				$('.o-category').toggleClass('o-category--active', false);
			});
			$(window).resize();
			
			// open/close behaviour
			$('.o-category .o-category__header').click(function(evt) {
				evt.preventDefault();
				
				if(window.isMobile) {
					$($(this).parent().children('.o-category__body')[0]).slideToggle('fast');
				} else {
					$($(this).parent().children('.o-category__body')[0]).attr('style', '');
					
					$('.o-category--active').toggleClass('o-category--active', false);
				}
				
				$(this).parent().toggleClass('o-category--active');
			});
			
			// create body close click zone
			$('.o-category .o-category__close').click(function(evt) {
				evt.preventDefault();
				
				$('.o-category--active').toggleClass('o-category--active', false);
			});
			
			// styleguide workaround to ensure this block only runs once
			window.styleguidesingletoncategory = true;
		}
	});
</script>