<div class="row" id="SectionStats">
	{% for stat in vars.stats %}
		<div class="col-xl-2 col-4 insights_section">
			<div class="stat card text-center" id="statcard-{{ stat.id }}"
				 {% if stat.tooltip is defined %}title="{{ stat.tooltip }}"{% endif %}
			>
				<div class="card-header">
					<p class="mb-0">{{ stat.title }}</p>
					<span>({{ stat.title_sub }})</span>
				</div>
				<div class="card-body">
					<div class="stat-chart"
						 {% if stat.tooltip_chart is defined %}title="{{ stat.tooltip_chart }}"{% endif %}></div>
					<h6 style="font-size: small" {% if stat.tooltip_p is defined %}title="{{ stat.tooltip_p }}"{% endif %}>{{ stat.val }}</h6>
				</div>
			</div>
		</div>
	{% endfor %}
</div>

<script type="text/javascript">
	jQuery( document ).ready( function () {
		{% for stat in vars.stats %}
			jQuery( '#statcard-{{ stat.id }} .card-body .stat-chart' ).icwpWpsfAjaxChart(
				{
					'ajax_render':{{ ajax.render_chart_post|raw }},
					'req_params': {
						'render_location': "insights-overview-statcard",
						'chart_params': {
							'stat_id': "{{ stat.id }}",
						}
					}
				}
			);
		{% endfor %}
	} );
</script>