<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_summary_chart|raw }},
				'req_params': {
					'render_location': "insights-overview-statcard",
					'events': [ "{{ stat.id }}" ],
					'combine_events': true
				},
				'chart_options': {
					axisX: {
						showLabel: false,
					},
				}
			}
		);
		{% endfor %}
	} );
</script>