<div data-slide="{$_MODEL.board_id}" data-type="100Points">
	<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|nl2br}</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 zmianę slajdu przez prezentera...</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">
						{foreach from=$_MODEL.options item=option}
							<div class="df">
								<div class="space space_15"></div>
								<div class="df_question"><div>{$option.text}</div></div>
								<div class="space space_10"></div>
								<div class="df_ct">
									<div class="input-group">
										<input type="text" name="reply[{$option.option_id}]" value="0" data-key="{$option.option_id}" class="form-control fn_data_max_length">
										<span class="input-group-addon input-group-addon-btn" data-optionaction="minus" data-optionid="{$option.option_id}"><svg><use xlink:href="{url mode="root"}theme/dobry-start/images/icons/svg/sprite.svg#shape-minus"/></svg></span>
										<span class="input-group-addon input-group-addon-btn" data-optionaction="plus" data-optionid="{$option.option_id}"><svg><use xlink:href="{url mode="root"}theme/dobry-start/images/icons/svg/sprite.svg#shape-plus"/></svg></span>
									</div>
								</div>
								<div class="space space_10"></div>
								<div class="df_points_left">Pozostało: <span data-slide="quantity-left">100</span> punktów</div>
								<div class="space space_15"></div> 
							</div>
						{/foreach}
					</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>
<script type="text/javascript">
	var slidePoints = null;
	
	$(document).ready(function () {
		slidePoints = $("*[data-slide-id='{$_MODEL.board_id}']");

		$("input[name^='reply[']", slidePoints).on("change", function () {
			var optionId = $(this).data("key");
			
			var limitPoints = slide100PointsLimit(optionId);

			var value = valueToInt($(this).val());
			
			if(value > limitPoints) {
				value = limitPoints;
			}

			limitPoints = limitPoints - value;

			$(this).val(value);
			$("*[data-slide='quantity-left']", slidePoints).text(limitPoints);
		});

		$("*[data-optionaction]", slidePoints).on("click", function () {
			var optionAction = $(this).data("optionaction"), optionId = $(this).data("optionid");
			
			var limitPoints = slide100PointsLimit(optionId);
			
			var value = valueToInt($("input[name='reply[" + optionId + "]']", slidePoints).val());
			
			if(optionAction == "plus") {
				value = value + 1;
			} else {
				value = value - 1;
				if(value < 0) {
					value = 0;
				}
			}

			if(value > limitPoints) {
				value = limitPoints;
			}

			limitPoints = limitPoints - value;

			$("input[name='reply[" + optionId + "]']", slidePoints).val(value);
			$("*[data-slide='quantity-left']", slidePoints).text(limitPoints);
		});
	});

	function slide100PointsLimit(optionId) {
		var limitPoints = 100;
		
		$("input[name^='reply[']", slidePoints).each(function () {
			if($(this).attr("name") != "reply[" + optionId + "]") {
				limitPoints = limitPoints - valueToInt($(this).val());	
			}
		});
		
		return limitPoints;
	}

	function slide100PointsValid() {
		var limitPoints = 100;

		$("input[name^='reply[']", slidePoints).each(function () {
			limitPoints = limitPoints - valueToInt($(this).val());
		});

		return limitPoints == 0;
	}
</script>