<!doctype html>{% load sass_tags static %}
<html>
  <head>
	<title>{{ settings.TITLE }}</title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link href="{% sass_src 'css/style.scss' %}" rel="stylesheet" type="text/css">
	<base target="_blank" >
	<link rel="stylesheet" href="{% static 'timeline/css/timeline.css' %}">
	<link rel="stylesheet" href="{% static 'timeline/css/fonts/font.default.css' %}">
	<style>
		html, body {
			height:100%;
			width:100%;
			padding: 0px;
			margin: 0px;
		}
		#timeline, #tl {
			height: 100%;
			width:100%;
		}
		#tl {
			display: block;
		}
		.tl-timeline {
		
		}
		.tl-attribution {
			display: none !important;
		}

		.tl-timeline h1, .tl-timeline h2, .tl-timeline h3, .tl-timeline h4, .tl-timeline h5, .tl-timeline h6 {
			text-transform: initial !important;
		}
		.tl-timeline .tl-timegroup-message {
			color: #000 !important;
		}
	</style>
	</head>
	<body>
	<div id="title" class="page tl-timeline">
		<div class="content">
			{{ title.body | safe }}
		</div>
	</div>
	<div id="about" class="page tl-timeline">
		<div class="content">
		{{ about.body | safe }}
		</div>
	</div>
    <div id="timeline" class="page">
		<div id="tl"></div>
	</div>
    <div id="imprint" class="page tl-timeline">
		<div class="content">
		{{ imprint.body | safe }}
		</div>
	</div>
    <div id="contact" class="page tl-timeline">
		<div class="content">
		<form class="contact-form" action="/disabled" method="post">
			<input type="text" placeholder="Your name" name="name" required><br>
			<input type="text" placeholder="Your email" name="email" required><br>
			<textarea placeholder="Message" name="message" required></textarea><br>
			<input type="submit" value="Send message" />
			{% csrf_token %}
		</form>
		</div>
	</div>
	<div id="menu-overlay" class="tl-timeline">
		<ul>
			<li><a href="#start" target="_self">timeline</a></li>
			<li><a href="#about" target="_self">about</a></li>
			<li><a href="#contact" target="_self">contact</a></li>
			<li><a href="#imprint" target="_self">imprint</a></li>
		</ul>
	</div>
	<div id="menu">
		<svg viewBox="0 0 100 100" width="64" height="64">
		  <rect y="20" width="80" height="10"></rect>
		  <rect y="40" width="80" height="10"></rect>
		  <rect y="60" width="80" height="10"></rect>
		</svg>
	</div>
	<script src="{% static 'timeline/js/timeline.js' %}"></script>
    <script>
		function submitContact(event) {
			event.preventDefault()
			event.stopPropagation()
			var data = {}
			var form = document.querySelector('.contact-form')
			form.querySelectorAll('input,textarea').forEach(input => {
				if (input.name) {
					data[input.name] = input.value
				}
			})
			fetch('/contact/', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					'X-CSRFToken': data.csrfmiddlewaretoken,
				},
				body: JSON.stringify(data)
			}).then(response => response.json()).then(response => {
				if (response.sent) {
					var content = document.querySelector('#contact .content')
					content.innerHTML = `
						Thank you for taking the time to send us a message, we will get back to you soon.
						<br><br>
						<a href="/" target="_self">Back to Timeline</a>
					`
				}
			})
		}
		document.querySelector('#contact .contact-form').addEventListener('submit', submitContact)

		var data = {{ timeline_json | safe }};
		var timeline

		function load_timeline() {
			timeline = new TL.Timeline('tl', data, {
				hash_bookmark: true,
				debug: false,
				timenav_height: 100,
			});
		}
		function openPage(qs) {
			var active = document.querySelector(qs)
			document.querySelectorAll('.page').forEach(page => {
				if (page != active) {
					if (page.classList.contains('active')) {
						page.classList.remove('active')
						active.classList.add('active')
					}
				}
			})
			active.classList.add('active')
		}
		function hashchange(event) {
			console.log('hc', document.location.hash.slice(1).length, document.location.hash.slice(1))
			var page
			if (document.location.hash.slice(1).length) {
				page = document.querySelector(document.location.hash + '.page')
			}
			if (page) {
				openPage(document.location.hash)
			} else if (document.location.hash.slice(1).length) {
				openPage('#timeline')
				if (!timeline) {
					load_timeline()
				}
			} else {
				openPage("#title")
			}
		}
		window.addEventListener('hashchange', hashchange)
		hashchange()

		document.querySelector('#menu').addEventListener('click', event => {
			var overlay = document.querySelector('#menu-overlay')
			if (overlay.classList.contains('active')) {
				overlay.classList.remove('active')
			} else {
				overlay.classList.add('active')
			}
		})
		document.querySelectorAll('#menu-overlay a').forEach(a => {
			a.addEventListener('click', event => {
				var overlay = document.querySelector('#menu-overlay')
				overlay.classList.remove('active')
			})
		})
    </script>
  </body>
</html>