extends withQuestions

block append stylesheets
	link(rel="stylesheet" href="/stylesheets/assessment.css")
	noscript
		meta(http-equiv="Refresh" content="0; URL=/enablejs")

block rightMenu
	a#rightButton.btn-floating.btn-large.grey(href=assessment.name + "/monitor")
		i.material-icons video_label

block content
	.container#assessment
		.row
			#warning.modal
				.modal-content {{ warnMsg }}
				.modal-footer
					.center-align
						a.modal-action.modal-close.waves-effect.waves-light.btn-flat(href="#!") Ok
		.row
			.col.s12.m10.offset-m1.l8.offset-l2.xl6.offset-xl3
				h4= assessment.name
				#stage0(v-show="stage==0")
					.card
						.input-field.inline.on-left
							label(for="number") Number
							input#number(type="text" v-model="student.number" @keyup.enter="getStudent()")
						button.waves-effect.waves-light.btn(@click="getStudent()") Send
				#stage1(v-show="stage==1")
					.card
						if assessment.mode != "open"
							.input-field.inline.on-left
								label(for="forename") Forename
								input#forename(type="text" v-model="student.forename" disabled)
							.input-field.inline
								label(for="name") Name
								input#name(type="text" v-model="student.name" disabled)
						p.center-align
							if assessment.mode != "open"
								button.waves-effect.waves-light.btn.on-left(@click="cancelStudent") Cancel
							button.waves-effect.waves-light.btn(@click="startAssessment") Start!
				#stage1_2_4(v-show="stage==1 || stage==2 || stage == 4")
					.card
						.introduction(v-html="assessment.introduction")
				#stage2_4(v-show="stage==2 || stage==4")
					if assessment.time > 0
						.card
							.timer.center(v-if="stage==2") {{ countdown }}
					.card
						button.waves-effect.waves-light.btn(style="display:block;margin:0 auto" @click="sendAnswer") Send
						statements(:questions="assessment.questions" :showAnswers="showAnswers" :index="index" :inputs="inputs" @gameover="endAssessment")
				#stage3(v-show="stage==3")
					.card
						.finish Exam completed ☺ ...don't close the window!
				#stage3_4(v-show="stage==3 || stage==4")
					.card
						.conclusion(v-html="assessment.conclusion")

block append javascripts
	script.
		let assessment = !{JSON.stringify(assessment)};
		const monitoring = false;
	script(src="/javascripts/components/statements.js")
	script(src="/javascripts/assessment.js")