extends withQuestions

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

block content
	.container#monitor
		.row
			.col.s12.m10.offset-m1.l8.offset-l2.xl6.offset-xl3
				h4= examName
				#stage0(v-show="stage==0")
					.card
						.input-field.inline.on-left
							label(for="password") Password
							input#password(type="password" v-model="password" @keyup.enter="startMonitoring()")
						button.waves-effect.waves-light.btn(@click="startMonitoring()") Send
				#stage1(v-show="stage==1")
					button.waves-effect.waves-light.btn(@click="endMonitoring()") Send feedback
					h4.title(@click="toggleDisplay('answers')") Anwers
					// TODO: aussi afficher stats, permettre tri par colonnes
					.card(v-show="display=='answers'")
						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="{backgroundColor: getColor(s.number,i)}" @click="seeDetails(s.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 = "#{courseCode}";
		const initials = "#{initials}";
		const monitoring = true;
	script(src="/javascripts/utils/libsRefresh.js")
	script(src="/javascripts/components/statements.js")
	script(src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js")
	script(src="/javascripts/utils/sha1.js")
	script(src="/javascripts/monitor.js")