<div data-slide="{$_MODEL.board_id}" data-type="quiz">
	<div class="waiting">
		<section class="section_question">
			<div class="ct">
				<div class="ct_l"></div>
				<div class="ct_c">
					<div class="question font_150 text-center">Oczekiwanie na rozpoczęcie quizu.</div>
					<div class="space space_30 clear"></div>
					<div class="loading_w">
						<div class="loading_ct">
							<div class="loading_ct_c"><svg><use xlink:href="{url mode="root"}theme/dobry-start/images/icons/svg/sprite.svg#shape-loading"></use></svg></div>
						</div>
					</div>
				</div>
				<div class="ct_r"></div>
			</div>
		</section>
	</div>
	<div class="countdown hide">
		<section class="section_question">
			<div class="ct">
				<div class="ct_l"></div>
				<div class="ct_c">
					<div class="question font_150 text-center">Odliczanie do rozpoczęcia quizu.</div>
					<div class="space space_30 clear"></div>
					<div class="clear text-center quiz_layer_countdown_box"></div>
				</div>
				<div class="ct_r"></div>
			</div>
		</section>
	</div>
	<div class="quiz hide">
		<section class="section_question">
			<div class="ct">
				<div class="ct_l"></div>
				<div class="ct_c">
					<div class="question font_150">{$_MODEL.name}</div>
					{if !empty($_MODEL.config.description)}
						<div class="space space_10 clear"></div>
						<div class="description font_110">{$_MODEL.config.description}</div>
					{/if}
				</div>
				<div class="ct_r"></div>
			</div>
		</section>
		{if !empty($_MODEL.config.image)}
			<section class="section_image">
				<div class="space space_30 clear"></div>
				<div class="ct">
					<div class="ct_l"></div>
					<div class="ct_c">
						<div class="image_w">
							<a class="zoom_popup" href="{url mode="root"}public/upload/slides/{$_MODEL.config.image}"><img src="{url mode="root"}public/upload/slides/{$_MODEL.config.image}" alt=""></a>
						</div>
					</div>
					<div class="ct_r"></div>
				</div>
			</section>
		{/if}
		<section class="section_answers">
			{if $_MODEL.userReply}
				<div class="space space_30 clear"></div>
				<section class="section_question">
					<div class="ct">
						<div class="ct_l"></div>
						<div class="ct_c">
							<div class="question font_150 text-center">Odpowiedź została wysłana.</div>
							<div class="space space_10 clear"></div>
							<div class="description font_110 text-center">Oczekiwanie na wyniki...</div>
						</div>
						<div class="ct_r"></div>
					</div>
				</section>
			{/if}
			<div class="space space_30 clear"></div>
			<div class="ct">
				<div class="ct_l"></div>
				<div class="ct_c">
					{if !$_MODEL.userReply}
						<div class="df_w">
							<div class="df">
								<div class="space space_15"></div>
								<div class="df_title"><span>Wybierz odpowiedź</span></div> 
								<div class="space space_5"></div>
								<div class="df_subtitle"><span>Możesz wybrać tylko jedną odpowiedź</span></div> 
								<div class="space space_10"></div>
								<div class="df_ct">
									<div class="answers">
										{foreach from=$_MODEL.options item=option key=index}
											<div class="answer">
												<div class="answer_radio">
													<div class="checkbox checkbox-info checkbox-circle">
														<input type="radio" id="answer_{$index}" name="reply" value="{$option.option_id}">
														<label for="answer_{$index}"><span>{$option.text}</span></label>
													</div>
												</div>
											</div>
										{/foreach}
									</div>
								</div>
							</div>
						</div>
						<div class="space space_25"></div>
					{/if}
					{if $presentationTempo == "2"}
						<a href="javascript:nextSlide('{$_MODEL.nextSlide}');" class="btn btn-primary full-width btn-next">
							<span>Dalej</span>
							<div class="icon"><svg><use xlink:href="{url mode="root"}theme/dobry-start/images/icons/svg/sprite.svg#shape-chevron-right"></use></svg></div>
						</a>
					{elseif !$_MODEL.userReply}
						<a href="javascript:saveSlide();" class="btn btn-primary btn-outline full-width btn-next"><span>Wyślij</span></a>
					{/if}
				</div>
				<div class="ct_r"></div>
			</div>
		</section>
	</div>
	<div class="results hide">
		<section class="section_question text-center">
			<div class="ct">
				<div class="ct_l"></div>
				<div class="ct_c" data-presentation="quizResults">
					
				</div>
				<div class="ct_r"></div>
			</div>
		</section>
	</div>
	<script type="text/javascript">
		var slideQuiz = null;
		var quizStep = "waiting";

		$(document).ready(function () {
			slideQuiz = $("*[data-slide-id='{$_MODEL.board_id}']");

			sendWebSocket({ command: "quizInit", slideId: "{$_MODEL.board_id}", userId: "{$userId}" });

			{if $presentationTempo == "2"}
				quizStart();
			{/if}
		});

		function quizStart() {
			quizStep = "start";
			
			$(".waiting", slideQuiz).addClass("hide");
			$(".countdown", slideQuiz).removeClass("hide");

			var countdown = $(".quiz_layer_countdown_box").countdown360({
				strokeWidth: 5,
				fillStyle: '#FFFFFF',
				strokeStyle: '#128FF2',
				radius: 60,
				seconds: 10,
				label: ['sekund', 'sekund'],
				fontColor: '#222',
				autostart: false,
				smooth: true,
				onComplete: function () {
					quizStep = "question";

					$(".countdown", slideQuiz).addClass("hide");
					$(".quiz", slideQuiz).removeClass("hide");

					resetTime();
				}
			});

			countdown.start();
		}

		function quizResults() {
			if(quizStep != "question" && quizStep != "reply") {
				return false;
			}

			$.get("{url mode="root"}p/{$presentationId}/quiz-wyniki/{$_MODEL.board_id}", function (response) {
				$("*[data-presentation='quizResults']").html(response);

				$(".quiz", slideQuiz).addClass("hide");
				$(".results", slideQuiz).removeClass("hide");
			});
		}
	</script>
</div>