{% extends '@nucleus/partials/particle.html.twig' %}

{% set attr_extra = '' %}
{% if particle.extra %}
	{% for attributes in particle.extra %}
		{% for key, value in attributes %}
			{% set attr_extra = attr_extra ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}
		{% endfor %}
	{% endfor %}
{% endif %}

{% set containerid = random() %}
{% set class_number = 0 %}

{% set particleheading %}
	<div class="g-particle-intro">
		{% if particle.mainheading %}
			<h3 class="g-title g-main-title">{{ particle.mainheading|raw }}</h3>
			<div class="g-title-separator {% if particle.introtext == false %}no-intro-text{% endif %}"></div>
		{% endif %}	
		{% if particle.introtext %}<p class="g-introtext">{{ particle.introtext|raw }}</p>{% endif %}
	</div>
{% endset %}

{% block particle %}
	<div class="g-circle-progress{% if particle.css.class %} {{ particle.css.class|e }}{% endif %}" {% if particle.extra %}{{ attr_extra|raw }}{% endif %}>
		{% if particle.mainheading or particle.introtext %}
			{{ particleheading }}
		{% endif %}
		<div class="g-grid g-circle-progress-{{ containerid }}">
			{% for item in particle.items %}
				{% set attr_extra_item = '' %}
				{% for extra in item.extra %}
					{% set attr_extra_item = attr_extra_item ~ ' ' ~ extra|keys|first|e ~ '="' ~ extra|values|first|e('html_attr') ~ '"' %}
				{% endfor %}

				{% set class_number = class_number + 1 %}

				<div class="g-block g-circle-progress-item{% if item.class %} {{ item.class|e }}{% endif %}" {% if item.extra %}{{ attr_extra_item|raw }}{% endif %}>
					<div class="g-content">
						<div class="circle-container" style="height: {{ item.size|default('100')|e }}px;">
							<div class="item-{{ class_number }} circle">
								<div class="g-circle-progress-percentage"></div>
							</div>
						</div>

						{% if item.title %}
							<h4 class="g-circle-progress-title">
								{{- item.title|raw -}}
							</h4>
						{% endif %}

						{% if item.description %}
							<div class="g-circle-progress-desc">
								{{- item.description|raw -}}
							</div>
						{% endif %}
					</div>
				</div>
			{% endfor %}
		</div>
	</div>
{% endblock %}

{% block javascript_footer %}
	{% do gantry.load('jquery') %}
	{{ parent() }}
	<script type="text/javascript" src="{{ url('gantry-theme://js/circle-progress.min.js') }}"></script>
	<script type="text/javascript" src="{{ url('gantry-theme://js/jquery.waypoints.min.js') }}"></script>
	<script type="text/javascript">
		(function($){
			$(document).ready(function(){

				{% for item in particle.items %}

					{% set class_number = class_number + 1 %}

					{% if particle.animation|default("onload") == "onload" %}
						$('.g-circle-progress-{{ containerid }} .item-{{ class_number }}.circle').circleProgress({
							value: {{ item.value|default('0.8')|e }},
							size: {{ item.size|default('100')|e }},
							startAngle: -Math.PI / 2,
							lineCap: 'round',
							thickness: '{{ item.thickness|default('auto')|e }}',
							emptyFill: '{{ item.emptyfill|default('rgba(0, 0, 0, 0.1)')|e }}',
							fill: {
								gradient: ["{{ item.color1|default('#3aeabb')|e }}", "{{ item.color2|default('#fdd250')|e }}"], gradientAngle: -Math.PI / 2
							}
						}).on('circle-animation-progress', function(event, progress, stepValue) {
							$(this).children('.g-circle-progress-percentage').html(((100 * stepValue).toFixed(0)) + '<span>%</span>');
						});
					{% else %}
						var circles = $('.g-circle-progress-{{ containerid }} .circle');

						circles.waypoint({
							handler: function() {
								var circle = $('.g-circle-progress-{{ containerid }} .item-{{ class_number }}.circle');
								if (!circle.data('inited')) {
									circle.circleProgress({
										value: {{ item.value|default('0.8')|e }},
										size: {{ item.size|default('100')|e }},
										startAngle: -Math.PI / 2,
										lineCap: 'round',
										thickness: '{{ item.thickness|default('auto')|e }}',
										emptyFill: '{{ item.emptyfill|default('rgba(0, 0, 0, 0.1)')|e }}',
										fill: {
											gradient: ["{{ item.color1|default('#3aeabb')|e }}", "{{ item.color2|default('#fdd250')|e }}"], gradientAngle: -Math.PI / 2
										}
									}).on('circle-animation-progress', function(event, progress, stepValue) {
										$(this).children('.g-circle-progress-percentage').html(((100 * stepValue).toFixed(0)) + '<span>%</span>');
									});
									circle.data('inited', true);
								}
							},
							offset: 'bottom-in-view'
						});
					{% endif %}
				{% endfor %}
			});
		})(jQuery);
	</script>
{% endblock %}