<!DOCTYPE html>
<html lang="la">
<head>
	<meta charset="UTF-8">
	<title>Familia Romana – Pensum A</title>
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/LLPSI.css') }}">
	<script type="text/javascript">
		function adjust_size() {
			const forms = document.querySelectorAll('form');
			const form = forms[0];

			Array.from(form.elements).forEach((input) => {
				if (input.type=="text") {
					input.setAttribute("style", input.getAttribute("style") + "; width: " + input.dataset.expected.length + "em");
				}
			});
		}

		function nomacron_to_macron(char) {
			var mapper = {	'A': 'Ā',
							'a': 'ā',
							'E': 'Ē',
							'e': 'ē',
							'I': 'Ī',
							'i': 'ī',
							'O': 'Ō',
							'o': 'ō',
							'U': 'Ū',
							'u': 'ū'};
			return mapper[char[0]];
		}

		function macron_to_nomacron(char) {
			var mapper = {	'Ā': 'A',
							'ā': 'a',
							'Ē': 'E',
							'ē': 'e',
							'Ī': 'I',
							'ī': 'i',
							'Ō': 'O',
							'ō': 'o',
							'Ū': 'U',
							'ū': 'u'};
			return mapper[char];
		}

		function input_to_nomacron(input) {
			return input.replace(/Ā|ā|Ē|ē|Ī|ī/, macron_to_nomacron);
		}

		function input_to_macron(input) {
			return input.replace(/(\w)\1/, nomacron_to_macron);
		}


		function validate() {
			const forms = document.querySelectorAll('form');
			const form = forms[0];
			

			Array.from(form.elements).forEach((input) => {
				if (input.type=="text" && document.getElementById('vowel_length').checked == false) {
					is_macron_ok = (input.value == input_to_nomacron(input.dataset.expected));
					is_double_ok = false;
				} else {
					is_double_ok = (input_to_macron(input.value) == input.dataset.expected);
					is_macron_ok = (input.value == input.dataset.expected);
				}
				if (input.type=="text" && !(is_double_ok || is_macron_ok)) {
					input.setAttribute("class", "incorrect");
				} else if (input.type=="text") {
					input.setAttribute("class", "correct");
				}
			});

			return false;
		}

		function show_answers() {
			const forms = document.querySelectorAll('form');
			const form = forms[0];
			
			Array.from(form.elements).forEach((input) => {
				if (input.type=="text") {
					input.setAttribute("value", input.dataset.expected);
				}
			});
		}
	</script>
</head>
<body>
	<h1><a href="/latin/llpsi">Lingua Latina Per Se Illustrata</a></h1>
	<h2>{{pensum_title}}</h2>
	Quantitās: <input type="checkbox" id="vowel_length">
	<form class="Pensum" onsubmit="return validate();">
		{{pensum_content|safe}}
		<br>
		<input type="submit" value="Mitte"><button onclick="show_answers();">Responsa</button>
	</form>
	<script type="text/javascript">adjust_size();</script>
</body>
</html>