<div class="slide_preview_inner_ct slide_type_2_1">
	<div class="slide_preview_inner_ct_c">
		{if !empty($_MODEL.name)}
			<div class="slide_preview_title clear font_200">{$_MODEL.name}</div>
		{/if}
		{if !empty($_MODEL.config.description)}
			<div class="slide_preview_desc clear font_120">{$_MODEL.config.description|nl2br}</div>
		{/if}
		<div class="space space_40 clear"></div>
		<div class="chart_box_w">
			{if $_MODEL.config.show_type == 2 || $_MODEL.config.show_type == 3}
				<div class="chart_box {if $_MODEL.config.show_type == 2}chart_type_2{else if $_MODEL.config.show_type}chart_type_3{/if}">
					<div class="chart_box_l">
						<div class="chart"></div>
						<script>
							$(document).ready(function () {
								var chart_scale = function(options) {
									return function(chart) {
										chart.on('created', function(ctx) {
											var viewBoxX = 400 * $('body').attr('data-preview-scale');
											var viewBoxY = 400 * $('body').attr('data-preview-scale');

											$('.chart_box_w .chart svg').attr('viewBox','0 0 '+viewBoxX+' '+viewBoxY);
										});
									}
								};
								
								var chart_data = {
									series: [
										{assign var="idx" value=1}
										{foreach from=$_MODEL.options item=option}
											{if $idx>1}, {/if}{$option.result.value}
											{assign var="idx" value=$idx+1}
										{/foreach}
									]
								};

								var chart_options = {
									plugins: [ chart_scale() ],
									donut: {if $_MODEL.config.show_type == 2}true{else}false{/if},
									donutWidth: 60,
									donutSolid: true,
									startAngle: 270,
									//showLabel: false,
									labelInterpolationFnc: function(value) {
										return '';
										var sum = function(a, b) { return a + b };
										if(value == 0 || value == 999999999999999999999999) {
											return {if $_MODEL.config.show_percent == "1"}0 + '%'{else}0{/if};
										}
										
										return {if $_MODEL.config.show_percent == "1"}Math.round(value / chart_data.series.reduce(sum) * 100) + '%'{else}value{/if};
									}
								};

								var chart = new Chartist.Pie('.chart_box_w .chart', chart_data, chart_options);
								$('.chart_box_w .chart').attr('data-items',chart_data.series[0].length);
									
								$(window).on('resize', function () {
									chart.update();
								});
								
								$(window).on('load', function () {
									setTimeout(function () {
										chart.update();
									}, 100);
								});
							});
						</script>
					</div>
					<div class="chart_box_s"></div>
					<div class="chart_box_r">
						<div class="chart_info">
							{assign var=colors value=array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j")}
							<ul>
								{assign var="idx" value=0}
								{foreach from=$_MODEL.options item=option}
									{assign var=color value=$colors[$idx]}
									<li>
										<div class="chart_info_color"><div class="color_{$color}"><div><div>{if $_MODEL.config.show_percent == "1"}{$option.result.percent}{else}{if $option.result.value==999999999999999999999999}0{else}{$option.result.value}{/if}{/if}</div></div></div></div>
										<div class="chart_info_color_desc">{$option.text}</div>
									</li>
									{assign var="idx" value=$idx+1}
								{/foreach}
							</ul>
						</div>
					</div>
				</div>
			{else}
				<div class="chart_box">
					<div class="chart_box_l">
						<div class="chart chart_type_1"></div>
						<script>
							$(document).ready(function () {
								var ctEqualBarWidth = function(options) {
									return function(chart) {
										chart.on('created', function(ctx) {
											const bars = ctx.svg.querySelectorAll('.ct-bar');

											bars.attr({
												style: 'stroke-width: ${literal}{ctx.axisX.stepLength}{/literal}px !important;'
											});
										});
									}
								};
								
								var chart_value = function(options) {
									return function(chart) {
										chart.on('draw', function (data) {
											var barHorizontalCenter, barVerticalCenter, label, value;
											if (data.type === "bar") {
												barHorizontalCenter = data.x1 + (data.element.width() * .5) + 20;
												barVerticalCenter = data.y1 + (data.element.height() * -1) - 10;
												value = data.element.attr('ct:value');
												
												if (value !== '0') {
													label = new Chartist.Svg('text');
													label.text(value);
													label.addClass("ct-barlabel");
													label.attr({
														x: barHorizontalCenter,
														y: barVerticalCenter,
														'text-anchor': 'middle'
													});
												
													return data.group.append(label);
												}
											}
										});
									}
								};
								
								var chart_scale = function(options) {
									return function(chart) {
										chart.on('created', function(ctx) {
											var viewBoxX = 900 * $('body').attr('data-preview-scale');
											var viewBoxY = 300 * $('body').attr('data-preview-scale');
										
											$('.chart_box_w .chart svg').attr('viewBox','0 0 '+viewBoxX+' '+viewBoxY);
										});
									}
								};
								
								var chart_attr = function(options) {
									return function(chart) {
										chart.on('created', function(ctx) {
											$('.chart_box_w .chart svg').attr('viewBox','0 0 '+viewBoxX+' '+viewBoxY);
										});
									}
								};
								
								var chart_data = {
									labels: [
										{assign var="idx" value=1}
										{foreach from=$_MODEL.options item=option}
											{if $idx>1}, {/if}'{$option.text}'
											{assign var="idx" value=$idx+1}
										{/foreach}
									],
									series: [[
										{assign var="idx" value=1}
										{foreach from=$_MODEL.options item=option}
											{if $idx>1}, {/if}{if $_MODEL.config.show_percent == "1"}{$option.result.percent}{else}{$option.result.value}{/if}
											{assign var="idx" value=$idx+1}
										{/foreach}
									]]
								};
								
								var chart_options = {
									plugins: [
										chart_scale(),
										
										Chartist.plugins.ctBarLabels({
											position: {
												y: function (data) {
													return  data.y2-10 
												}
											},
											labelOffset: {
												y: 30
											},
											labelInterpolationFnc: function (text) {
												return text{if $_MODEL.config.show_percent == "1"} + '%'{/if};
											}
										})
									]
								};

								var chart = new Chartist.Bar('.chart_box_w .chart', chart_data, chart_options);
								$('.chart_box_w .chart').attr('data-items',chart_data.series[0].length);
								
								$(window).on('resize', function () {
									chart.update();
								});

								$(window).on('load', function () {
									setTimeout(function () {
										chart.update();
									}, 100);
								});
							});
						</script>
					</div>
				</div>
			{/if}
		</div>
		{if !empty($_MODEL.config.image)}
			<div class="space space_20 clear"></div>
			<div class="hidden_image">
				<div class="hidden_image_ct">
					<div class="hidden_image_ct_c"><img src="{url mode="root"}public/upload/slides/{$_MODEL.config.image}" alt=""></div>
				</div>
			</div>
			<div class="hidden_image_button_w">
				<div class="hidden_image_button">
					<div class="image_show">Pokaż obrazek</div>
					<div class="image_hide">Ukryj obrazek</div>
				</div>
			</div>
		{/if}
	</div>
</div>
<div class="bottom_icons">
	<div class="icons_w">
		<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">{$_MODEL.users}</div>
				</div>
			</div>
		</div>
	</div>
</div>