{% 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"><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 o-main__body--sidebar">

		<header class="o-main__header">
			<div class="o-main__header_internal">
				<h3 class="o-main__header__title"><a href="traject-detail.html"><span class="icon-arrow-back"></span> <span class="label">Interventie toevoegen</span></a></h3>

				<div class="o-main__header__actions">
					<a href="#" id="btn-toggle-notes" class="a-button o-main__header__actions__showhidenotes a-button--outline"><span>Notities</span></a>
				</div>

				<div class="u-clearfloat"></div>
			</div>
		</header>

		<div class="o-main__content">
			<div class="o-main__content_container">
				<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">Trajecten</label>
								<div class="a-input__field-holder">
									<select name="input-selected" id="input-select">
										<option value="" selected="">Curriculumontwikkeling GO! scholengroep Antwerpen</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 class="o-taginput">
							    <label for="taginput-textarea">Effecten</label>

							    <div class="o-taginput__field-holder">
									<span class="a-tag a-tag--button">Leerplannen lichamelijke opvoeding, muzische vorming </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 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="Pick a date">
							        <span class="icon-calendar"></span>
							    </div>
							</div>

							<script src="/js/vendor/pikaday.min.js"></script>
							<script>
							    var picker = new Pikaday({
							        field: document.getElementById("input-date"),
							        minDate: new Date('2000-01-01'),
							        maxDate: new Date('2020-12-31'),
							        yearRange: [2000,2020],
							        firstDay: 1
							    });
							</script>

							<div class="a-input">
							    <label for="input-text">Omschrijving</label>
							    <div class="a-input__field-holder">
							        <input type="text" placeholder="Placeholder">
							    </div>
							</div>

							<div class="o-taginput">
							    <label for="taginput-textarea">Doelgroep</label>

							    <div class="o-taginput__field-holder">
									<span class="a-tag a-tag--button">Schoolteam </span>
									<span id="taginput-textarea" class="o-taginput__input" data-placeholder="Typ om toe te voegen" contenteditable="true"></span>
							    </div>
							</div>

							<div class="o-taginput">
							    <label for="taginput-textarea">Effecten</label>

							    <div class="o-taginput__field-holder">
									<span class="a-tag a-tag--button">Leerplannen lichamelijke opvoeding, muzische vorming </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">Aard</label>
								<div class="a-input__field-holder">
									<select name="input-selected" id="input-select">
										<option value="" selected="">Vakgroepoverleg</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 class="o-taginput">
							    <label for="taginput-textarea">Begeleidingsteam</label>

							    <div class="o-taginput__field-holder">
									<span class="a-tag a-tag--button">Anna Janssens </span>
									<span id="taginput-textarea" class="o-taginput__input" data-placeholder="Typ om toe te voegen" contenteditable="true"></span>
							    </div>
							</div>

							<div class="o-taginput">
							    <label for="taginput-textarea">Deelnemers</label>

							    <div class="o-taginput__field-holder">
								    <span class="a-tag a-tag--select">
										Adjunct directeur
										<span class="a-tag__select">
										<select name="tag-select-number" id="tag-select-number">
											<option value="1">1</option>
											<option value="2">2</option>
											<option value="3">3</option>
											<option value="4">4</option>
											<option value="5">5</option>
										</select>
										<span class="icon-select"></span>
										</span>
										<a href="#" class="a-tag__btn"><span class="icon-close"></span></a>
									</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">Volgend overleg</label>
								<div class="a-input__field-holder">
									<select name="input-selected" id="input-select">
										<option value="" selected="">Lorem ipsum dolor sit amet</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 class="o-rteditor">
								<label>Doelstelling</label>
								<div id="editor2">
									<h1>Rich text</h1>

									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
								</div>
							</div>

							<div class="o-rteditor">
								<label>Behandelde items</label>
								<div id="editor">
									<h1>Rich text</h1>

									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
								</div>
							</div>

							<script>
								$(document).ready(function(e) {
									if(!window.rtinited) {
										CKEDITOR.replace("editor2");
										CKEDITOR.replace("editor");
									}

									window.rtinited = true;
								});
							</script>

							<div class="o-appointment-input">
								<h4 class="o-appointment-input__title">Afspraken</h4>

								<div class="o-appointment-input__labels">
									<label for="input-text-1">Wat</label>
									<label for="input-text-2">Wie</label>
									<label for="input-text-3">Termijn</label>
								</div>
								<div class="o-appointment-input__fields-holder">
									<div class="o-appointment-input__field">
										<input type="text" name="input-text-1" id="input-text" placeholder="" />
										<input type="text" name="input-text-2" id="input-text" placeholder="" />
										<input type="text" name="input-text-3" id="input-text" placeholder="" />
									</div>
									<div class="o-appointment-input__field">
										<input type="text" name="input-text-1" id="input-text" placeholder="" />
										<input type="text" name="input-text-2" id="input-text" placeholder="" />
										<input type="text" name="input-text-3" id="input-text" placeholder="" />
									</div>
								</div>
								<a href="#" class="o-appointment-input__add-btn"><span class="icon-plus-circle"></span> <span>Nieuwe afspraak</span></a>
							</div>

							<hr>

							<div class="u-text-right">
								<a href="traject-detail.html" class="a-button a-button--outline">Annuleren</a>
								<a href="interventie-detail.html" class="a-button">Opslaan</a>
								<a href="interventie-detail.html" class="a-button">Opslaan &amp; publiceren</a>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="o-main__sidebar">
				<div class="m-notes">
					<div class="m-notes__inner">

						<div class="m-notes__header">
							<h2>Notities (2)</h2>

							<a href="#" class="m-notes__close"><span class="icon-close"></span><span>sluiten</span></a>

							<hr>

							<small>The notes are only visible internally</small>
						</div>

						<article class="m-note">
							<div class="m-note__header">
								<span class="icon-calendar"></span> 19/07/2017

								<a href="#" class="m-note__edit"><span class="icon-edit"></span></a>
								<a href="#" class="m-note__delete"><span class="icon-delete"></span></a>
								<a href="#" class="m-note__save"><span class="icon-check"></span></a>
							</div>
							<div class="m-note__body">
								<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
							</div>
							<div class="m-note__confirm_delete u-vertical-center collapse">
								<div>
									<span class="m-note__confirm_delete_cta">Ben je zeker dat je deze notitie wil verwijderen?</span>
									<a href="#" class="a-button m-note__btn_confirm_delete"><span>Ja, verwijderen</span></a>
									<a href="#" class="m-note__cancel_delete">Annuleren</a>
								</div>
							</div>
						</article>

						<article class="m-note">
							<div class="m-note__header">
								<span class="icon-calendar"></span> 19/07/2017

								<a href="#" class="m-note__edit"><span class="icon-edit"></span></a>
								<a href="#" class="m-note__delete"><span class="icon-delete"></span></a>
								<a href="#" class="m-note__save"><span class="icon-check"></span></a>
							</div>
							<div class="m-note__body">
								<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
							</div>
							<div class="m-note__confirm_delete u-vertical-center collapse">
								<div>
									<span class="m-note__confirm_delete_cta">Ben je zeker dat je deze notitie wil verwijderen?</span>
									<a href="#" class="a-button m-note__btn_confirm_delete"><span>Ja, verwijderen</span></a>
									<a href="#" class="m-note__cancel_delete">Annuleren</a>
								</div>
							</div>
						</article>

						<a href="#" class="m-notes__add">
							<span class="icon-plus"></span>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>

</main>


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