{% set htmlParameters = {
		'isStyleguide' : false,
		'bodyClass': '',
		'rootPath' : '/',
		'pageName' : 'example page',
		'specificStyleguide': 'verslagtool'
	}
%}
{% include "general/_includes/_html_head.njk" %}

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

<main class="o-main">

	<div class="o-header">

		<h1 class="o-header__brand"><a href="#"><span class="go-logo">GO!</span> Verslagtool</a></h1>

		<a href="#" id="toggle_nav" class="o-header__toggle_mobile_nav"><span class="top"></span><span class="middle"></span><span class="bottom"></span></a>

		<nav class="o-header__sidebar">

			<h6 class="o-header__sidebar__section_title">Verslag</h6>

			<ul class="o-header__sidebar__nav">
				<li>
					<a href="index.html" class="o-header__sidebar__nav_item"><span class="icon-trajecten"></span>Trajecten</a>
				</li>
				<li>
					<a href="interventies.html" class="o-header__sidebar__nav_item o-header__sidebar__nav_item--active"><span class="icon-interventies"></span>Interventies</a>
				</li>
			</ul>

			<h6 class="o-header__sidebar__section_title">Beheer</h6>

			<ul class="o-header__sidebar__nav">
				<li>
					<a href="trajectsoorten.html" class="o-header__sidebar__nav_item"><span class="icon-traject-soort"></span>Trajectsoorten</a>
				</li>
			</ul>

			{% include "verslagtool/organisms/_sidebar_contact.njk" %}
		</nav>

	</div>

	<div class="o-main__body">

		<header class="o-main__header">
			<div class="o-main__header_internal">
				<h3 class="o-main__header__title">Interventies</h3>
			</div>
		</header>

		<div class="o-main__content">
			<div class="o-main__content_container">
				<div class="container-fluid">
					<div class="row">
						<div class="col-sm-8">
							<a href="interventie-add.html" class="a-button"><span class="icon-plus-circle"></span> Interventie toevoegen</a>
						</div>
						<div class="col-sm-4 u-text-right">
							<a href="#" class="a-button--outline a-button--round"><span class="icon-search"></span></a>
							<a href="#filters" class="a-button--outline a-button--round" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="filters"><span class="icon-filter"></span></a>
						</div>
					</div>
				</div>

				<div class="o-filters">
					<div id="filters" class="collapse o-filters__inner">
						<div class="container-fluid">

							<div class="row">
								<div class="col-md-12">
									<div class="o-taginput">
									    <label for="taginput-textarea">Scholen</label>

									    <div class="o-taginput__field-holder">
											<span class="a-tag a-tag--button">Antwerpen - GO! centrum deeltijds onderwijs Deurne - Ruggeveldlaan 496 2100 Deurne - Van Der Veken Frans (2100)</span>
											<span id="taginput-textarea" class="o-taginput__input" data-placeholder="Typ om toe te voegen" contenteditable="true"></span>
									    </div>
									</div>


									<div class="a-input">
										<label for="input-select">Traject soort</label>
										<div class="a-input__field-holder">
											<select name="input-selected" id="input-select">
												<option value="" selected="">Leerplannen lichamelijke opvoeding, muzische vorming</option>
												<option value="1">Option 1</option>
												<option value="2">Option 2</option>
												<option value="3">Option 3</option>
												<option value="4" disabled="">Option 4 disabled</option>
												<option value="5">Option 5</option>
											</select>
											<span class="icon-arrow-down"></span>
										</div>
									</div>
								</div>
							</div>

							<div class="row">
								<div class="col-md-4">
									<div class="a-input">
										<label for="input-radio">Status</label>
										<div class="a-toggle a-toggle--radio">
										    <label>
										        <input type="radio" name="input-radio" value="1">
										        <span class="toggle__holder">
										        </span>
										         Alle
										    </label>

										    <label>
										        <input type="radio" name="input-radio" value="3" >
										        <span class="toggle__holder">
										        </span>
										        Actief
										    </label>

										    <label>
										        <input type="radio" name="input-radio" value="3" >
										        <span class="toggle__holder">
										        </span>
										        Gepubliceerd
										    </label>
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="a-input a-input--date">
									    <label for="input-date">Datum</label>
									    <div class="a-input__field-holder">
									        <input type="text" name="input-date" id="input-date" placeholder="Van">
									        <span class="icon-calendar"></span>
									    </div>
									    <div class="a-input__field-holder">
									        <input type="text" name="input-date" id="input-date" placeholder="Tot">
									        <span class="icon-calendar"></span>
									    </div>
									</div>
								</div>
							</div>

							<div class="row">
								<div class="col-md-12 u-text-right"><a href="#" class="o-filters__clear">Clear filters</a></div>
							</div>
						</div>
					</div>
				</div>

				<div class="container-fluid">
					<div class="row">
						<div class="col-md-12">

							<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-15">Status</div>
										<div class="a-table__th w-55">Omschrijving</div>
										<div class="a-table__th w-20">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-15"><span class="a-label a-label--{{ interventie.statusTag }}">{{ interventie.status }}</span> </div>
										<div class="a-table__cell w-55"><a href="{{ interventie.url }}">{{ interventie.description }}</a></div>
										<div class="a-table__cell w-25">{{ interventie.date }}</div>
									</div>
									{% endfor %}
								</div>
							</div>

							<a href="#" class="a-button--outline u-float-left"><span class="icon-download"></span><span>Merge download</span></a>

							<div class="u-float-right">{% include "verslagtool/molecules/tabbar.njk" %}</div>

						</div>

					</div>
				</div>
			</div>
		</div>
	</div>

</main>

{% include "general/_includes/_html_footer.njk" %}