extends withQuestions

block content
	.container#grading
		.row
			.col.s12.m10.offset-m1.l8.offset-l2.xl6.offset-xl3
				h4= examName
				h4.title(@click="toggleDisplay('grading')") Grading
				// TODO: Allow grading per student, per question or sub-question
				.card(v-show="display=='grading'")
					ul.tabs.tabs-fixed-width
						li.tab
							a(href="#group0") All
						li.tab(v-for="group in groupList()")
							a(:href="groupId(group,'#')") G.{{ group }}
					table(:id="groupId(group)" v-for="group in [0].concat(groupList())")
						thead
							tr
								th Forename
								th Name
								th(v-for="(q,i) in assessment.questions") Q.{{ (i+1) }}
						tbody
							tr.assessment(v-for="s in studentList(group)")
								td {{ s.forename }}
								td {{ s.name }}
								td(v-for="(q,i) in assessment.questions" :style="{background-color: getColor(number,i)}" @click="seeDetails(number,i)")  
				h4.title(@click="toggleDisplay('assessment')") Assessment
				div(v-show="display=='assessment'")
					.card
						.introduction(v-html="assessment.introduction")
					.card
						statements(:questions="assessment.questions" :answers:"answers")
					.card
						.conclusion(v-html="assessment.conclusion")

block append javascripts
	script.
		const examName = "#{examName}";
		const courseCode = "#{courseName}";
		const initials = "#{initials}";
	script(src="/javascripts/components/statements.js")
	script(src="/javascripts/utils/sha1.js")
	script(src="/javascripts/grading.js")