{{#items}}
	<a class="result-item vacancy {{#top}}state-featured{{/top}} {{style_class}}" href="{{url}}">
		<div class="content-box">
			<button class="trigger-favorites" data-vacancy-id="{{id}}" type="button"></button>
			<h2 class="title">
				{{{title}}}
				{{^featured_as_filter}}
					{{#top}}<span class="featured-note">{{translation_top_vacancy}}</span>{{/top}}
				{{/featured_as_filter}}	
			</h2>
			<p class="sub-title">{{{intro}}}</p>
			<p class="summary">
				{{#featured_as_filter}}
					{{#top}}
						<span class="featured-note">{{translation_top_vacancy}}</span>
					{{/top}}
				{{/featured_as_filter}}
				{{#distance}}
					<span class="detail-group">
						<span class="value"><strong>{{distance}}</strong></span>
					</span>
				{{/distance}}
				{{^hide_location_label_on_overview}}
					{{#location}}
						<span class="detail-group icon-location">
							<span class="value">{{ location }}</span>
						</span>
					{{/location}}
				{{/hide_location_label_on_overview}}
				{{#filters}}
					<span class="detail-group {{{icon}}}">
						<span class="value">{{{name}}}</span>
					</span>
				{{/filters}}
			</p>
			{{#show_read_more}}
				<span class="cta">Bekijk deze vacature</span>
			{{/show_read_more}}
		</div>
		{{#organisation_logo}}
		<div class="media-box">
			<img src="{{organisation_logo}}" alt="">
		</div>
		{{/organisation_logo}}
	</a>
{{/items}}

{{#pagination}}
	<p class="results-summary">{{translation_shown}}: <span class="current">{{first_item}}-{{last_item}}</span> {{translation_of}} <span class="total">{{item_amount}}</span></p>
	<nav class="nav">
		<a class="control-link state-prev {{^previous}}state-disabled{{/previous}}" {{#previous}}data-pagenumber="{{number}}"{{/previous}} href="#" aria-label="Previous page"></a>
		<ul class="numbers-nav">
			{{#control_items}}
				{{#number}}
					<li><a href="#" class="{{#current}}state-current{{/current}}" data-pagenumber="{{number}}">{{number}}</a></li>
				{{/number}}
				{{^number}}
					<li class="divider">&hellip;</li>
				{{/number}}
			{{/control_items}}
		</ul>
		<a class="control-link state-next {{^next}}state-disabled{{/next}}" {{#next}}data-pagenumber="{{number}}"{{/next}} href="#" aria-label="Next page"></a>
	</nav>
{{/pagination}}

{{#secondary_pagination}}
	<p class="results-summary">{{translation_shown}}: <span class="current">{{first_item}}-{{last_item}}</span> {{translation_of}} <span class="total">{{item_amount}}</span></p>
{{/secondary_pagination}}