--- /dev/null
+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")