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

<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 o-header__sidebar__nav_item--active"><span class="icon-trajecten"></span>Trajecten</a>
				</li>
				<li>
					<a href="interventies.html" class="o-header__sidebar__nav_item"><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">Trajecten</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="traject-add.html" class="a-button"><span class="icon-plus-circle"></span><span>Traject toevoegen</span></a>
						</div>
						<div class="col-sm-4 u-text-right">
							<div class="m-search m-search--collapsible m-search--collapsed">
								<div class="m-search__field-holder">
									<input type="text" name="input-search" id="input-search" placeholder="Wat zoek je?" />
									<span class="icon-search"></span>
									<span class="icon-close"></span>
								</div>
							</div>
							<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-3">
									<div class="a-input">
										<label for="input-radio">Doorlichting</label>
										<div class="a-toggle a-toggle--radio a-toggle--horizontal">
										    <label>
										        <input type="radio" name="input-radio" value="1">
										        <span class="toggle__holder">
										        </span>
										         Ja
										    </label>

										    <label>
										        <input type="radio" name="input-radio" value="3" >
										        <span class="toggle__holder">
										        </span>
										        Neen
										    </label>
										</div>
									</div>
								</div>
								<div class="col-md-3">
									<div class="a-input">
										<label for="input-radio">Status</label>
										<div class="a-toggle a-toggle--radio a-toggle--horizontal">
										    <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 a-input--date-multi">
										<label for="input-date">Multi-date picker</label>
										<div class="a-input__field-holder">
											<input type="text" name="input-date-1" id="input-date-1" placeholder="Van" /><!-- comment here to strip whitespace
										 --><input type="text" name="input-date-2" id="input-date-2" 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">


							{% set trajecten = [
								{ url: "traject-detail.html", traject: "Curriculumontwikkeling GO! scholengroep Antwerpen", type: "PI", doorlichting: "true", date: "17/06/2017" },
								{ url: "traject-detail.html", traject: "Curriculumontwikkeling GO! scholengroep Antwerpen", type: "VT", doorlichting: "false", date: "17/06/2017" },
								{ url: "traject-detail.html", traject: "Kwaliteitsvolle evaluatie- en rapporteringspraktijk GO! centrum deeltijds onderwijs Deurne, GO! centrum deeltijds onderwijs Oostende", type: "PI", doorlichting: "true", date: "17/06/2017" },
								{ url: "traject-detail.html", traject: "Curriculumontwikkeling GO! scholengroep Antwerpen", type: "VT", doorlichting: "false", date: "17/06/2017" },
								{ url: "traject-detail.html", traject: "Curriculumontwikkeling GO! scholengroep Antwerpen", type: "PI", doorlichting: "true", date: "17/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"><a href="{{ traject.url }}">{{ traject.traject }}</a></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>

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

</main>

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