{% set htmlParameters = {
		'isStyleguide' : true,
		'bodyClass': 'styleguide ',
		'rootPath' : '../',
		'pageName' : 'Styleguide',
		'specificStyleguide': 'verslagtool'
	}
%}

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

<div class="js-scroll-nav">



	<!-- CONTENT ///////////////////////////////////////////////////// -->


	<section class="styleguide">
		<div class="styleguide__container">
			<main>


				<!-- INTRO //////////////////////////////////////// -->


				<h1 class="styleguide__title js-scroll-nav__title">{{ CONFIG.PROJECT_TITLE}}  - {{htmlParameters.specificStyleguide}} Styleguide</h1><br/>
				<p class="styleguide__p">
					Welcome to the {{ CONFIG.PROJECT_TITLE}}  - {{htmlParameters.specificStyleguide}} styleguide – an internal guide &amp; code repository for designing
					and coding projects for {{ CONFIG.PROJECT_TITLE}}  - {{htmlParameters.specificStyleguide}}.
				</p>
				<div class="a-alert is-information">
				    <p class="icon-alert">
				       This styleguide has dependecies on the general styleguide
				    </p>
				</div>
				<br/>
				<a href="../verslagtool/index.html" class="a-button">Go to general styleguide</a>
			</main>
		</div>
	</section>

	<!-- MOLECULES ////////////////////////////////////////// -->

	<h1 class="styleguide__section-title js-scroll-nav__title">Molecules</h1>

	<section class="styleguide">
		<div class="styleguide__container">
			<main>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Pagination</h1>
				<small>/sass/styleguide/verslagtool/molecules/_pagination.scss</small>
				<p class="styleguide__p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet nesciunt rem ipsa animi tenetur repellendus quae tempora aliquam libero. Error libero, quae eius quibusdam nulla? Eius excepturi, reprehenderit cupiditate quis?</p>

				{% include "verslagtool/molecules/pagination.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/molecules/pagination.njk" %}
					</code>
				</div>

				<!-- NOTES /////////////////////////////////////////// -->

				<h1 class="styleguide__title js-scroll-nav__sub-title">Notes</h1>

				<h4 class="styleguide__sub-title">General principle</h4>
				<p class="styleguide__p">
					Editable note component with deletion confirmation dialogue.
				</p>


				{% include "verslagtool/molecules/notes.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/molecules/notes.njk" %}
					</code>
				</div>

				<!-- SEARCH FIELD /////////////////////////////////////////// -->

				<h1 class="styleguide__title js-scroll-nav__sub-title">Search</h1>

				<h4 class="styleguide__sub-title">General principle</h4>
				<p class="styleguide__p">
					Simple search field.
				</p>


				{% include "verslagtool/molecules/search.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/molecules/search.njk" %}
					</code>
				</div>

				<!-- MODALS /////////////////////////////////////////// -->

				<h1 class="styleguide__title js-scroll-nav__sub-title">Modals</h1>

				<h4 class="styleguide__sub-title">General principle</h4>
				<p class="styleguide__p">
					A simple modal.
				</p>


				{% include "verslagtool/molecules/modal.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/molecules/modal.njk" %}
					</code>
				</div>





			</main>
		</div>
	</section>

	<!-- ORGANISMS ////////////////////////////////////////// -->

	<h1 class="styleguide__section-title js-scroll-nav__title">Organisms</h1>

	<section class="styleguide">
		<div class="styleguide__container">
			<main>
				<h1 class="styleguide__title js-scroll-nav__sub-title">Search</h1>
				<small>/sass/styleguide/verslagtool/organisms/_search.scss</small>
				<p class="styleguide__p">
				System to input tags
				</p>

				{% include "verslagtool/organisms/search.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/organisms/search.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Tag Input</h1>
				<small>/sass/styleguide/verslagtool/organisms/_taginput.scss</small>
				<p class="styleguide__p">
				System to input tags
				</p>

				{% include "verslagtool/organisms/taginput.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/organisms/taginput.njk" %}
					</code>
				</div>

				<h1 class="styleguide__title js-scroll-nav__sub-title">Multi-Select</h1>
				<small>/sass/styleguide/verslagtool/organisms/_multiselect.scss</small>
				<p class="styleguide__p">
				Dropdown tag input
				</p>

				{% include "verslagtool/organisms/multiselect.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/organisms/multiselect.njk" %}
					</code>
				</div>

				<!-- CATEGORY BROWSER /////////////////////////////////////////// -->

				<h1 class="styleguide__title js-scroll-nav__sub-title">Category Browser</h1>
				<small>/sass/styleguide/verslagtool/organisms/_categorybrowser.scss</small>
				<p class="styleguide__p">
				Nested hierarchy browser, can be opened in a popover.
				</p>

				{% include "verslagtool/organisms/categorybrowser.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/organisms/categorybrowser.njk" %}
					</code>
				</div>

				<!-- APPOINTMENT INPUT /////////////////////////////////////////// -->

				<h1 class="styleguide__title js-scroll-nav__sub-title">Appointment input</h1>
				<small>/sass/styleguide/verslagtool/organisms/_categorybrowser.scss</small>
				<p class="styleguide__p">
				Triple input field holder.
				</p>

				{% include "verslagtool/organisms/appointmentinput.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/organisms/appointmentinput.njk" %}
					</code>
				</div>

				<!-- Rich Text Editor /////////////////////////////////////////// -->

				<h1 class="styleguide__title js-scroll-nav__sub-title">Rich Text Editor</h1>
				<small>/sass/styleguide/verslagtool/organisms/_rteditor.scss</small>
				<p class="styleguide__p">
				Rich text editor (based on ckeditor).
				</p>

				{% include "verslagtool/organisms/rteditor.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/organisms/rteditor.njk" %}
					</code>
				</div>

				<!-- Taxonomy Editor /////////////////////////////////////////// -->

				<h1 class="styleguide__title js-scroll-nav__sub-title">Taxonomy Editor</h1>
				<small>/sass/styleguide/verslagtool/organisms/_treeview.scss</small>
				<p class="styleguide__p">
				Nested taxonomy editor.
				</p>

				{% include "verslagtool/organisms/treeview.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/organisms/treeview.njk" %}
					</code>
				</div>

				<!-- Tools Header /////////////////////////////////////////// -->

				<h1 class="styleguide__title js-scroll-nav__sub-title">Tools Header</h1>
				<small>/sass/styleguide/verslagtool/organisms/_header.scss</small>
				<p class="styleguide__p">
				Header.
				</p>

				{% include "verslagtool/organisms/header.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/organisms/header.njk" %}
					</code>
				</div>

				<!-- Sidebar /////////////////////////////////////////// -->

				<h1 class="styleguide__title js-scroll-nav__sub-title">Sidebar</h1>
				<small>/sass/styleguide/verslagtool/organisms/_main.scss</small>
				<p class="styleguide__p">
				Sidebar.
				</p>

				{% include "verslagtool/organisms/sidebar.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/organisms/sidebar.njk" %}
					</code>
				</div>

				<!-- Collapsible /////////////////////////////////////////// -->

				<h1 class="styleguide__title js-scroll-nav__sub-title">Collapsible filters</h1>
				<small>/sass/styleguide/verslagtool/organisms/_filters.scss</small>
				<p class="styleguide__p">
				Collapsible filters
				</p>

				{% include "verslagtool/organisms/filters.njk" %}

				<div class="styleguide__highlight-box">
					<code class="js-encode-html prettyprint">
						{% include "verslagtool/organisms/filters.njk" %}
					</code>
				</div>

			</main>
		</div>
	</section>


</div>

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