{if !isset($slideUpdate)}<div class="p_slide slide_type_2_8" data-slide="{$_MODEL.board_id}" data-results="quiz">{/if}
	<div class="p_slide_box_t"></div>
	<div class="p_slide_box_m">
		<div class="p_slide_box_m_m_inner">
			<div class="slide_preview_inner_ct">
				<div class="slide_preview_inner_ct_c">
					<div class="slide_preview_title clear font_200"><span data-quiz="name" class="hide">{$_MODEL.name}</span>&nbsp;</div>
					<div class="space space_40 clear"></div>
					<div class="quiz_layers">
						<div class="quiz_layer quiz_layer_waiting_for_players active">
							<div class="quiz_layer_ct">
								<div class="quiz_layer_ct_c">
									<div class="quiz_layer_waiting_for_players_title font_180 font_weight_700">Oczekiwanie na graczy...</div>
									<div class="space space_10 clear"></div>
									<div class="quiz_layer_waiting_for_players_online font_150">Dołączyło <span class="quiz_layer_waiting_for_players_online_value">0</span> osób</div>
									<div class="space space_20 clear"></div>
									<div class="start_quiz_button_w">
										<div class="start_quiz_button">
											<div>Rozpocznij Quiz{if $countSlideQuiz > 1} <span><span data-quiz-index=""></span> z {$countSlideQuiz}</span>{/if}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="quiz_layer quiz_layer_countdown">
							<div class="quiz_layer_ct">
								<div class="quiz_layer_ct_c">
									<div class="quiz_layer_countdown_box"></div>
								</div>
							</div>
						</div>
						<div class="quiz_layer quiz_layer_result_chart">
							<div class="quiz_layer_ct">
								<div class="quiz_layer_ct_c">
									<div class="chart_box_w">
										<div class="chart_box chart_type_4">
											<div class="chart_box_l" data-slide-quiz="chart">
												<div class="chart">
													<div class="chart_ct">
														<div class="chart_ct_row row_bars">
															{foreach from=$_MODEL.options item=option}
																<div class="chart_ct_cell">
																	<div class="chart_bar answer_not_correct{*if $option.correct == "1"}answer_correct{else}answer_not_correct{/if*}"{if $option.correct == "1"} data-presentation="correct"{/if} style="height: {$option.result.percent}%;">
																		<div class="chart_bar_value">{$option.result.value}</div>
																		<div class="chart_bar_icon">
																			{*if $option.correct == "1"}
																				<i class="fa fa-check" aria-hidden="true"></i>
																			{else}
																				<i class="fa fa-times" aria-hidden="true"></i>
																			{/if*}
																		</div>
																	</div>
																</div>
															{/foreach}
														</div>
														<div class="chart_ct_row row_line">
															{foreach from=$_MODEL.options item=option}
																<div class="chart_ct_cell"></div>
															{/foreach}
														</div>
														<div class="chart_ct_row row_desc">
															{foreach from=$_MODEL.options item=option}
																<div class="chart_ct_cell">
																	<div class="chart_bar_desc">{$option.text}</div>
																</div>
															{/foreach}
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="space space_20 clear"></div>
									<div class="switch_results_button_w hide">
										<div class="switch_results_button">
											<div>Pokaż zwycięzców</div>
										</div>
									</div>
									<div class="quiz_timer_ct">
										<div class="quiz_timer_ct_c">
											<div class="quiz_timer"></div>
											<div class="stop_quiz_button_i hide">
												<a href="#modal_close_quiz" data-toggle="modal" data-backdrop="static" data-keyboard="false" class="stop_quiz_button">
													<div class="stop_quiz_button">
														<div>Zakończ przed czasem</div>
													</div>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="quiz_layer quiz_layer_result_users">
							<div class="quiz_layer_ct">
								<div class="quiz_layer_ct_c">
									<div class="space space_20 clear"></div>
									<div class="quiz_result_users_w">
										<div class="quiz_result_users" data-slide-quiz="rank">
											{foreach from=$_MODEL.results.list item=item key=key}
												{if $key>0}<div class="quiz_result_user_separator"><div></div></div>{/if}
												<div class="quiz_result_user">
													<div class="quiz_result_user_c quiz_result_user_points">{$item.points} p.</div>
													<div class="quiz_result_user_c quiz_result_user_bar">
														<div class="quiz_result_user_bar_progress" style="width: {$item.percent}%;">
															<div class="quiz_result_user_c quiz_result_user_name">
																<div class="quiz_result_user_c quiz_result_user_name_ct">
																	<div class="quiz_result_user_c quiz_result_user_name_ct_c">{$item.name}</div>
																</div>
															</div>  
														</div>
													</div>
												</div>
											{/foreach}
										</div>
									</div>
									<div class="space space_20 clear"></div>
									<div class="switch_results_button_w">
										<div class="switch_results_button">
											<div>Pokaż wyniki</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="p_slide_box_m_b">
			<div class="icons_w">
				<div class="icons_w_l"></div>
				<div class="icons_w_r">
					<div class="icons">
						<div class="icon">
							<div class="icon_img"><svg><use xlink:href="{url mode="root"}theme/dobry-start/images/icons/svg/sprite.svg#shape-user"></use></svg></div>
							<div class="icon_value" data-slide-quiz="users">{$_MODEL.users}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="p_slide_box_b"></div>
	<script type="text/javascript">
		{assign var="slideUnique" value=md5($_MODEL.board_id)}
		var slideQuiz = null;
		var quizResults = false;

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

			$(".start_quiz_button", slideQuiz).on("click", function () {
				sendWebSocket({ command: "quizStart", slideId: "{$_MODEL.board_id}" });

				slideLock();

				$(".quiz_layer_waiting_for_players", slideQuiz).removeClass("active");
				$(".quiz_layer_countdown", slideQuiz).addClass("active");

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

						$("*[data-quiz='name']", slideQuiz).removeClass("hide");

						countdown2.start();

						$(".switch_results_button", $(".quiz_layer_result_chart", slideQuiz)).on("click", function () {
							$(".quiz_layer_result_chart", slideQuiz).removeClass("active");
							$(".quiz_layer_result_users", slideQuiz).addClass("active");
						});

						$(".switch_results_button", $(".quiz_layer_result_users", slideQuiz)).on("click", function () {
							$(".quiz_layer_result_users", slideQuiz).removeClass("active");
							$(".quiz_layer_result_chart", slideQuiz).addClass("active");
						});
					}
				});

				var countdown2 = $(".quiz_timer", slideQuiz).countdown360({
					strokeWidth: 3,
					fillStyle: '#FFFFFF',
					strokeStyle: '#128FF2',
					radius: 30,
					seconds: {$_MODEL.config.time},
					label: ['sekund', 'sekund'],
					fontColor: '#222',
					autostart: false,
					smooth: true,
					onComplete: function () {
						sendWebSocket({ command: "quizResults", slideId: "{$_MODEL.board_id}" });

						$(".switch_results_button_w", slideQuiz).removeClass("hide");
						$(".quiz_timer_ct", slideQuiz).addClass("hide");

						slideUnLock();

						$(".chart .chart_ct_cell", slideQuiz).each(function () {
							if($(".chart_bar", this).data("presentation") == "correct") {
								$(".chart_bar", this).removeClass("answer_not_correct").addClass("answer_correct");
								$(".chart_bar_icon", this).html('<i class="fa fa-check" aria-hidden="true"></i>');
							} else {
								$(".chart_bar_icon", this).html('<i class="fa fa-times" aria-hidden="true"></i>');
							}
						});
					}
				});

				countdown.start();
			});
		});

		function refreshQuizUsers_{$slideUnique}() {
			$(".quiz_layer_waiting_for_players_online_value", slideQuiz).text(slideUsersCount("{$_MODEL.board_id}"));
		}
	</script>
{if !isset($slideUpdate)}</div>{/if}