extends withQuestions

block append stylesheets
	link(rel="stylesheet" href="/stylesheets/statements.css")
	link(rel="stylesheet" href="/stylesheets/grade.css")

block rightMenu
	a#rightButton.btn-floating.btn-large.grey(href="grade")
		i.material-icons mode_edit

			#gradeSettings.modal
				.modal-content
					form(@submit.prevent="computeGrades")
						.input-field
							input#points(type="number" v-model.number="settings.totalPoints" required)
							label(for="points") Total points
						p
							input#partial(type="checkbox" v-model="settings.halfPoint")
							label(for="partial") Half point for partial answers? (≥ 50%)
						p
							input#malus(type="checkbox" v-model="settings.zeroSum")
							label(for="malus") Lose points on wrong answers? ("Zero-sum" game)
				.modal-footer
					.center-align
						a.modal-action.modal-close.waves-effect.waves-light.btn(href="#!" @click="computeGrades()")
							span Compute
							i.material-icons.right send
			#detailedGrades.modal
				.modal-content
					table
						thead
							tr
								th Number
								th(v-for="evaluation in evaluationArray") {{ evaluation.name }}
						tbody
							tr.grade(v-for="student in studentList(group)")
								td {{ student.number }}
								td(v-for="(evaluation,i) in evaluationArray" @click="togglePresence(student.number,i)")
									| {{ grade(i,student.number) }}
				.modal-footer
					.center-align
						a.modal-action.modal-close.waves-effect.waves-light.btn-flat(href="#!") Close

block content
	.container#grading
		.row
			.col.s12.m10.offset-m1
				h4 #{courseCode} grading
				// TODO: Allow grading per student, per question or sub-question
				.card
					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 Name
								th(v-for="(q,i) in evaluation.questions") Q.{{ (i+1) }}
						tbody
							tr.evaluation(v-for="s in studentList(group)")
								td {{ s.name }}
								td(v-for="(q,i) in evaluation.questions" :style="{background-color: getColor(number,i)}" @click="seeDetails(number,i)")  
				h4.title(@click="toggleDisplay('evaluation')") evaluation
				div(v-show="display=='evaluation'")
					.card
						.introduction(v-html="evaluation.introduction")
					.card
						statements(:questions="evaluation.questions" :answers:"answers")

				if teacher
					h4.title(@click="toggleDisplay('grades')") Grades
					.card(v-show="display=='grades'")
						.center-align
							button.on-left.waves-effect.waves-light.btn(@click="gradeSettings()") Settings
							a#download.hide(href="#" ref="download")
							button.waves-effect.waves-light.btn(@click="download") Download
						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.result(:id="groupId(group)" v-for="group in [0].concat(groupList())" @click="showDetails(group)")
							thead
								tr
									th Number
									th Name
									th Final
							tbody
								tr.grade(v-for="student in studentList(group)")
									td {{ student.number }}
									td {{ student.name }}
									td grade...
									//td {{ grades[student.number].final }}
								tr.stats
									td(colspan="4") Stats: range= stdev= mean=

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