mixin headline_presentation_hamburger
	button.btn.btn-primary.btn-sm(onclick="show_navsidebar();", style="line-height: 1.25;")
		span(style="font-size: 150%;") ⇤
		
		
	div#navsidebarslider(style="position:fixed; right:0px; background:#007bff; top:45%; z-index: 1; border-top-left-radius: .3rem; border-bottom-left-radius: .3rem;")
		//- width: 12px; font-weight: bold; color: white; text-align: center; font-size: 80%; padding-left: 2px;
		button.btn.btn-primary.btn-sm(style="line-height: 1.25; padding: .25rem .25rem;")
			span(style="font-size: 150%;") ⇤
		//- | 〈
		//- 〉
		
	//-
		div(style="display: block; background: #555; width: 32px; height: 28px; position: relative; margin-left: auto; margin-right: 0px; border-radius: 4px;", onclick="show_navsidebar();")
			span(style="top:  4px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
			span(style="top: 12px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
			span(style="top: 20px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
	//-
		.dropdown
			.dropdown-toggle(data-toggle="dropdown", style="display: block; background: #555; width: 32px; height: 28px; position: relative; margin-left: auto; margin-right: 0px; border-radius: 4px; ")
				//- margin-right: auto; (normalerweise)
				span(style="top:  4px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
				span(style="top: 12px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
				span(style="top: 20px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
			.dropdown-menu
				.dropdown-item
					input.form-check-input#check_as_presentation(type="checkbox")
					label.form-check-label(for="check_as_presentation") Als Präsentation
					//- , onclick="event.stopPropagation();"

mixin navsidebar(gliederung, current)
	div#navsidebar.navsidebar.hide_on_print
		table(style="width: 100%;")
			tr
				td
					button.btn.btn-primary.btn-sm(onclick="hide_navsidebar();", style="line-height: 1.25;")
						span(style="font-size: 150%;") ⇥
				td(style="text-align: right; vertical-align: bottom; font-size: 100%;")
					input#check_as_presentation(type="checkbox",style="margin-right: 5px;")
						//- .form-check-input
					label(for="check_as_presentation") Als Präsentation
						//- .form-check-label
		hr(style="border-top: 2px solid #0e4f88; margin-top: 10px; margin-bottom: 10px;")
		a(href=pathoffset+"/")
			b Start
		each item in gliederung
			- var item_path = pathoffset + "/" + item.id;
			.div(style="margin-top: 10px;")
				if(current.length > 0 && current[0].id === item.id)
					b !{item.name}
				else
					a(href=item_path)
						b !{item.name}
					
			if(item.subs.length > 0)
				ul.liarrow
					each subitem in item.subs
						- var subitem_path = item_path + "/" + subitem.id;
						li
							if(current.length > 1 && current[1].id === subitem.id)
								| !{subitem.name}
							else
								a(href=subitem_path) !{subitem.name}
			

mixin headline_presentation_script
	script.
		var check_as_presentation = sessionStorage.getItem('show_as_presentation');
		if(check_as_presentation === null) {
			console.log('no "show_as_presentation" in sessionStorage; set to false')
			check_as_presentation = false;
			sessionStorage.setItem('show_as_presentation', false);
		}
		else
			check_as_presentation = JSON.parse(check_as_presentation);
		
		console.log("show_as_presentation: ", check_as_presentation);
		
		$('#check_as_presentation').prop('checked', check_as_presentation);
		console.log($('#check_as_presentation').prop('checked'))
		
		$('#check_as_presentation').change(function() {
			console.log('change');
			console.log($('#check_as_presentation').prop('checked'));
			sessionStorage.setItem('show_as_presentation', $('#check_as_presentation').prop('checked'));
			location.reload();
		});
		
		$(document).ready(function(){
			$("#navsidebar").css("margin-right", $("#navsidebar").outerWidth()*-1);
			$("#navsidebar").scrollTop(0);
			$("#navsidebarslider").click(show_navsidebar);
			
			$(window).resize(function(){
				if($("#navsidebar").hasClass("navsidebarvisible")) {
					$("#navsidebarslider").css("margin-right",$("#navsidebar").outerWidth());
				}
				else {
					$("#navsidebar").css("margin-right", $("#navsidebar").outerWidth()*-1);
				}
			});
		});
		
		function show_navsidebar() {
			console.log("show navsidebar", $("#navsidebar").outerWidth());
			$("#navsidebar").animate({"margin-right": "+="+$("#navsidebar").outerWidth()});
			$("#navsidebar").focus();
			$("#navsidebar").addClass("navsidebarvisible")
			$("#navsidebarslider").animate({"margin-right": "+="+$("#navsidebar").outerWidth()});
			$("#navsidebarslider button span").text("⇥");
			$("#navsidebarslider").off("click");
			$("#navsidebarslider").click(hide_navsidebar);
		}
		
		function hide_navsidebar() {
			console.log("hide navsidebar", $("#navsidebar").outerWidth());
			$("#navsidebar").animate({"margin-right": "-="+$("#navsidebar").outerWidth()});
			$("#navsidebar").removeClass("navsidebarvisible")
			$("#navsidebarslider").animate({"margin-right": "-="+$("#navsidebar").outerWidth()});
			$("#navsidebarslider button span").text("⇤");
			$("#navsidebarslider").off("click");
			$("#navsidebarslider").click(show_navsidebar);
		}

mixin body_presentation_script
	script.
		if(JSON.parse(sessionStorage.getItem('show_as_presentation')))
			register_presentationkeys();
		else
			show_all_slides();
			
mixin headline_template(title)
	div(style="margin-top: 15px; padding-left: 1rem; padding-right: 1rem;")
		table(style="font-variant: small-caps; margin-bottom: 0px; width: 100%;")
			tr
				td(style="padding: 0px; font-size: 1rem;")
					b
						a(href="/") BibelWissen.Halieus.DE
				td(style="padding: 0px; text-align: right; font-size: 0.8rem;").hide_on_print
					a(href="http://www.halieus.de/impressum_datenschutz.html" target="_blank") Impressum & Datenschutzerklärung
		//- p(style="font-size: 130%; font-variant: small-caps; margin-bottom: 0px;")
		//-		b Einführung in das Evangelium nach Markus
		table(style="margin-bottom: 0px; width: 100%;")
			tr
				td(style="padding: 0px; font-size: 130%; font-variant: small-caps;")
					b !{title}
				td.hide_on_print(style="padding: 0px; text-align: right;")
					+headline_presentation_hamburger
								
		+headline_presentation_script

mixin navigation_auto_template(gliederung, current, bgcolor)
	ol.breadcrumb(onclick="show_all_slides();", style="margin-top: .5rem; border-radius: 0;")
		if(current.length === 0)
			.h3(style="margin-bottom: 0px; color: #0e4f88; width: 100%;") Start 
				span.small.dropdown
					a.dropdown-toggle(data-toggle="dropdown", href="#", style="margin-bottom: 0px; color: #0e4f88; width: 100%;")
					.dropdown-menu
						a.dropdown-item(href="#")
							b Start
						each sub in gliederung
							a.dropdown-item(href=pathoffset + "/" + sub.id) !{sub.name}
		else
			li.breadcrumb-item
				a(href=pathoffset+"/") Start
			- var nr_items = current.length;
			- var cnt = 0;
			- var subs = gliederung;
			- var fullpath = pathoffset;
			- var old_fullpath;
			each item in current
				- cnt = cnt+1;
				- old_fullpath = fullpath;
				- fullpath = fullpath + "/" + item.id;
				if(cnt != nr_items)
					li.breadcrumb-item
						a(href=fullpath) !{item.name} 
						if(subs.length > 1)
							span.small.dropdown.hide_on_print
								a.dropdown-toggle(data-toggle="dropdown", href="#", style="margin-bottom: 0px; color: "+bgcolor+"; width: 100%;")
								.dropdown-menu
									each sub in subs
										a.dropdown-item(href=old_fullpath + "/" + sub.id)
											if(sub.id === item.id)
												b !{sub.name}
											else
												span !{sub.name}
							
				else
					li.breadcrumb-item
					.h3(style="margin-bottom: 0px; color: "+bgcolor+"; width: 100%;") !{item.name} 
						if(subs.length > 1)
							span.small.dropdown.hide_on_print
								a.dropdown-toggle(data-toggle="dropdown", href="#", style="margin-bottom: 0px; color: "+bgcolor+"; width: 100%;")
								.dropdown-menu
									each sub in subs
										a.dropdown-item(href=old_fullpath + "/" + sub.id)
											if(sub.id === item.id)
												b !{sub.name}
											else
												span !{sub.name}
											 
				- subs = item.subs;

mixin bottom_autonav_template(gliederung, current, hrcolor)
	hr.hide_on_print(style="margin-top: 2rem; border-top-width: 7px; border-top-color: "+hrcolor+";")
	ul.hide_on_print.nav.nav-fill.nav-pills(style="padding-left: 1rem; padding-right: 1rem;")
		- var nr_items = current.length;
		if(nr_items === 0)
			li.nav-item
				a.nav-link.active(href="#") Start
			each item in gliederung
				- var my_fullpath = pathoffset + "/" + item.id;
				
				li.nav-item
					a.nav-link(href=my_fullpath) !{item.name}
			
		else
			li.nav-item
				a.nav-link(href=pathoffset+"/") Start
			- var fullpath = pathoffset;
			each item in gliederung
				- var my_fullpath = fullpath + "/" + item.id;
				
				if(item.id === current[0].id)
					li.nav-item
						a.nav-link.active !{item.name}
				else
					li.nav-item
						a.nav-link(href=my_fullpath) !{item.name}
		
	if(nr_items > 1)				
		hr.hide_on_print(style="border-top-width: 5px; border-top-color: "+hrcolor+";")
		.small.hide_on_print(style="margin-top: 3px;")
			ul.nav.nav-fill.nav-pills.pill-sub-1
				- fullpath = fullpath + "/" + current[0].id;
				each item in current[0].subs
					- var my_fullpath = fullpath + "/" + item.id;
					if(item.id === current[1].id)
						li.nav-item
							a.nav-link.active !{item.name}
					else
						li.nav-item
							a.nav-link(href=my_fullpath) !{item.name}

	hr(style="border-top-width: 2px; border-top-color: "+hrcolor+";")
	p.small(style="margin-left: 15px; margin-right: 15px;")
		i Geistiges Eigentum von Pfarrer Peter Fischer, Rödental