{% set trajecten = [
	{ traject: "Curriculumontwikkeling GO! scholengroep Antwerpen", type: "PI", doorlichting: "true", date: "17/06/2017 - 22/06/2017" },
	{ traject: "Curriculumontwikkeling GO! scholengroep Antwerpen", type: "VT", doorlichting: "false", date: "17/06/2017 - 22/06/2017" },
	{ traject: "Kwaliteitsvolle evaluatie- en rapporteringspraktijk GO! centrum deeltijds onderwijs Deurne, GO! centrum deeltijds onderwijs Oostende", type: "PI", doorlichting: "true", date: "17/06/2017 - 22/06/2017" },
	{ traject: "Curriculumontwikkeling GO! scholengroep Antwerpen", type: "VT", doorlichting: "false", date: "17/06/2017 - 22/06/2017" },
	{ traject: "Curriculumontwikkeling GO! scholengroep Antwerpen", type: "PI", doorlichting: "true", date: "17/06/2017 - 22/06/2017" }
] %}

<div class="a-table">
	<div class="a-table__header">
		<div class="a-table__row">
			<div class="a-table__th w-50">Traject</div>
			<div class="a-table__th w-10">Type</div>
			<div class="a-table__th w-15">Doorlichting</div>
			<div class="a-table__th w-25">Interventie datum</div>
		</div>
	</div>
	<div class="a-table__body">
		{% for traject in trajecten %}
		<div class="a-table__row">
			<div class="a-table__cell w-50">{{ traject.traject }}</div>
			<div class="a-table__cell w-10">{{ traject.type }}</div>
			<div class="a-table__cell w-15">{% if traject.doorlichting %} <span class="icon-check"></span> {% endif %}</div>
			<div class="a-table__cell w-25">{{ traject.date|safe }}</div>
		</div>
		{% endfor %}
	</div>
</div>


{% set interventies = [
	{ url: "interventie-detail.html", checked: false, status: "Actief", statusTag: "success", description: "Curriculumontwikkeling GO! scholengroep Antwerpen", date: "17/06/2017 - 22/06/2017" },
	{ url: "interventie-detail.html", checked: false, status: "Actief", statusTag: "success", description: "Curriculumontwikkeling GO! scholengroep Antwerpen", date: "17/06/2017 - 22/06/2017" },
	{ url: "interventie-detail.html", checked: true, status: "Gepubliceerd", statusTag: "warning", description: "Curriculumontwikkeling GO! scholengroep Antwerpen", date: "17/06/2017 - 22/06/2017" },
	{ url: "interventie-detail.html", checked: false, status: "Actief", statusTag: "success", description: "Curriculumontwikkeling GO! scholengroep Antwerpen", date: "17/06/2017 - 22/06/2017" },
	{ url: "interventie-detail.html", checked: false, status: "Actief", statusTag: "success", description: "Curriculumontwikkeling GO! scholengroep Antwerpen", date: "17/06/2017 - 22/06/2017" }
] %}

<div class="a-table">
	<div class="a-table__header">
		<div class="a-table__row">
			<div class="a-table__th w-5">
				<div class="a-toggle a-toggle--checkbox">
					<label>
						<input type="checkbox" name="input-checkbox" value="3" checked="">
						<span class="toggle__holder">
							<span class="icon-check"></span>
						</span>
					</label>
				</div>
			</div>
			<div class="a-table__th w-20">Status</div>
			<div class="a-table__th w-45">Omschrijving</div>
			<div class="a-table__th w-15">Datum</div>
		</div>
	</div>

	<div class="a-table__body">
		{% for interventie in interventies %}
		<div class="a-table__row">
			<div class="a-table__cell w-5">
				<div class="a-toggle a-toggle--checkbox">
					<label>
					{% if interventie.checked %}
						<input type="checkbox" name="input-checkbox" value="3" checked="">
					{% else %}
						<input type="checkbox" name="input-checkbox" value="3">
					{% endif %}
						<span class="toggle__holder">
							<span class="icon-check"></span>
						</span>
					</label>
				</div>
			</div>

			<div class="a-table__cell w-20"><span class="a-label a-label--{{ interventie.statusTag }}">{{ interventie.status }}</span> </div>
			<div class="a-table__cell w-45"><a href="{{ interventie.url }}">{{ interventie.description }}</a></div>
			<div class="a-table__cell w-25">{{ interventie.date }}</div>
		</div>
		{% endfor %}
	</div>
</div>