<div class='testPage__testResultWrapper' data-id='{{ result.id }}'>
	<div>
		{{#eq userType 'account'}}
		<div>
			Student: <span class='hl'>{{result.student.shortName}}</span>
		</div>
		{{/eq}}
		<div>
			Submitted by: <span class='hl'>{{result.account.shortName}}</span>
		</div>
		<div>
			Submitted at: <span class='hl'>{{formatTime result.time}}</span>
		</div>
	</div>
	<div class='testPage__testResult'>
		<div class='testPage__testResult__grade'>
			{{result.grade}}
		</div>
		<div class='testPage__testResult__score'>
			<span>{{result.mark}}</span>
			<span>---</span>
			<span>{{result.test.template.maxMark}}</span>
		</div>
		<div class='testPage__testResult__eq'>
			<span>=</span>
		</div>
		<div class='testPage__testResult__percentage'>
			<span>{{result.percentage}}%</span>
		</div>
	</div>

	{{#if edit}}
	<div class='testPage__testResult__edit'>
		{{>button style='full' colour='primary' addClasses='resultEdit' content='Edit result'}}

		<div class='form' style='display: none;'>
			<form method='post' action='{{linkRoot}}/{{result.id}}/edit' >
				<input type='number' name='mark' id='mark' min=0 max={{result.test.template.maxMark}} placeholder='{{result.mark}}' />
				<input type='submit' value='Submit new mark' />
			</form>
			<form method='post' action='{{linkRoot}}/{{result.id}}/delete' >
				<input type='submit' value='Delete test result' class='testResult__deleteButton' />
			</form>
		</div>
	</div>
	{{/if}}
</div>

{{#if edit}}
<script>
	document.querySelector('.testPage__testResultWrapper[data-id="{{result.id}}"] a.resultEdit').addEventListener('click', (e) => {
		e.preventDefault();

		const form = e.path[1].childNodes[3];
		const link = e.path[0];

		link.innerText =
			(form.style.display === 'none')
				? 'Hide edit box'
				: 'Edit result';

		form.style.display =
			(form.style.display === 'none')
				? 'block'
				: 'none';
	});

	document.querySelector('.testPage__testResultWrapper[data-id="{{result.id}}"] .form form:nth-child(2)').addEventListener('submit', (e) => {
		if (!confirm('Delete test result?'))
			e.preventDefault();
	});
</script>
{{/if}}
