{#-----------------constants---------------------------#}
{% set minRadius = 48 %}
{% set titleHeight = 48 %}
{% set textHeight = 24 %}
{% set gaugeThickness = 24 %}
{% set gap = 12 %}
{% set labelWidth = 264 %}

{#------calculate values from template elements--------#}
{% set values = elementsToValues(elements, 'tx-..-([1-9]\d*)-value') %}
{% set n = values | length %}
{% if n == 0 %}
{% set values = [ 0 ] %}
{% set n = 1 %}
{% endif %}
{% set height = titleHeight + 2*((gaugeThickness + gap) * n + 96 + minRadius) %}
{% set width  = 2*((gaugeThickness + gap) * n + 168 + minRadius) %}

{#-------------svg starts here-------------------------#}
<svg xmlns="http://www.w3.org/2000/svg" width="{{width}}" height="{{height}}">
	<g id="gauge-layered">
		<g id="lines">
			<g id="g-0">
				{%for i in range(n)%}
				<g id="cu_bar_back_{{i+1}}" transform="translate({{168+i*(gaugeThickness+gap)}}, {{titleHeight + 96 + i*(gaugeThickness+gap)}})">
					{% set arcAngle = (3*pi/2) * clamp(values[i], 0, 100)/100 %}
					{% set startAngle = - pi/2 %}
					{% set endAngle = pi %}
					{% set iR = (minRadius + (n-i) * (gaugeThickness + gap))|round(3) %}
					{% set oR = (iR + gaugeThickness)|round(3) %}
					{% set x0 = (oR + oR * cos(startAngle))|round(3) %}
					{% set y0 = (oR + oR * sin(startAngle))|round(3) %}
					{% set x1 = (oR + oR * cos(endAngle))|round(3) %}
					{% set y1 = (oR + oR * sin(endAngle))|round(3) %}
					{% set x2 = (oR + iR * cos(endAngle))|round(3) %}
					{% set y2 = (oR + iR * sin(endAngle))|round(3) %}
					{% set x3 = (oR + iR * cos(startAngle))|round(3) %}
					{% set y3 = (oR + iR * sin(startAngle))|round(3) %}
					{% set largeArc = 1 %}
					<path id="gauge-unfilled-{{i+1}}" d="M {{x0}} {{y0}} A {{oR}} {{oR}} 0 {{largeArc}} 1 {{x1}} {{y1}} A {{gaugeThickness/2}} {{gaugeThickness/2}} {{endAngle}} 1 1 {{x2}} {{y2}} A {{iR}} {{iR}} 0 {{largeArc}} 0 {{x3}} {{y3}} A {{gaugeThickness/2}} {{gaugeThickness/2}} {{startAngle}} 1 1 {{x0}} {{y0}} Z" fill="#f6f6f6" stroke="#BCBCBCBC" stroke-width="2" />
				</g>
				{% endfor %}
			</g>
			{%for i in range(n)%}
			<g id="g-{{i+1}}" transform="translate({{168+i*(gaugeThickness+gap)}}, {{titleHeight + 96 + i*(gaugeThickness+gap)}})">
				{# gauge specific variables. wrt topLeft of the gauge, so center is at oR,oR #}
				{% set arcAngle = (3*pi/2) * clamp(values[i], 0, 100)/100 %}
				{% set startAngle = -pi/2 %}
				{% set endAngle = startAngle + arcAngle %}
				{% set iR = (minRadius + (n-i) * (gaugeThickness + gap))|round(3) %}
				{% set oR = (iR + gaugeThickness)|round(3) %}
				{% set x0 = (oR + oR * cos(startAngle))|round(3) %}
				{% set y0 = (oR + oR * sin(startAngle))|round(3) %}
				{% set x1 = (oR + oR * cos(endAngle))|round(3) %}
				{% set y1 = (oR + oR * sin(endAngle))|round(3) %}
				{% set x2 = (oR + iR * cos(endAngle))|round(3) %}
				{% set y2 = (oR + iR * sin(endAngle))|round(3) %}
				{% set x3 = (oR + iR * cos(startAngle))|round(3) %}
				{% set y3 = (oR + iR * sin(startAngle))|round(3) %}
				{% set largeArc = 1 if (endAngle-startAngle) >= pi else 0 %}
				<path id="gauge-filled-{{i+1}}" d="M {{x0}} {{y0}} A {{oR}} {{oR}} 0 {{largeArc}} 1 {{x1}} {{y1}} A {{gaugeThickness/2}} {{gaugeThickness/2}} {{endAngle}} 1 1 {{x2}} {{y2}} A {{iR}} {{iR}} 0 {{largeArc}} 0 {{x3}} {{y3}} A {{gaugeThickness/2}} {{gaugeThickness/2}} {{startAngle}} 1 1 {{x0}} {{y0}} Z" fill="{{fillColor(i)}}" stroke="{{strokeColor(i)}}" stroke-width="2" data-entity-classes="FilledPart" />
			</g>
			{%endfor%}
		</g>
		{# label for item i#}
		{%for i in range(n)%}
		<g id="tx-rc-{{i+1}}-value" transform="translate({{168 + n*(gaugeThickness+gap) + minRadius}}, {{titleHeight + 96 + i*(gaugeThickness+gap)}})">
			<path id="rect" fill="#ff000055" d="M -60 0 H 0 V {{textHeight}} H -60 Z" />
		</g>
		<g id="tx-rc-{{i+1}}-label" transform="translate({{168 + n*(gaugeThickness+gap) + minRadius - gap - 60 }}, {{titleHeight + 96 + i*(gaugeThickness+gap)}})">
			<path id="rect" fill="#ff000055" d="M -240 0 H 0 V {{textHeight}} H -240 Z" />
		</g>
		{%endfor%}
		
		{# title #}
		<g id="tx-cb-title" transform="translate({{width/2}}, 0)">
			<path id="rect_title" fill="#ff000055" d="M -300 0 h 600 v {{titleHeight}} h -600 Z" />
			<text id="Label" fill="#484848" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="36" font-weight="bold" letter-spacing="0em">
				<tspan y="24">
					Title
				</tspan>
			</text>
		</g>
		{# labels 0% to 100% #}
		{%set rMax = (n+1)*gaugeThickness + n*gap + minRadius %}
		{% for a in range(0, 101, 10) %}
		{% set angle = (3*pi/2) * a/100 - pi/2 %}
		{% set r = minRadius + n*(gaugeThickness + gap) + 60 %}
		{% set x = 168 + rMax + r*cos(angle) %}
		{% set y = titleHeight + 96 + rMax + r*sin(angle) %}
		<g id="tx-cc-{{1000+a}}-percent" transform="translate({{x}}, {{y}})">
			<path id="rect" fill="#ff000055" d="M -24 -12 h 48 v 24 h -48 Z" />
			<text id="Label" fill="#484848" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="12" font-weight="thin" letter-spacing="0em">
				<tspan>
					Label
				</tspan>
			</text>
		</g>
		{% endfor%}
		
		{# buttons #}
		{%for i in range(n+1) %}
		{% set center_y_add = titleHeight - (titleHeight-gap)/2 + 96 + i*(gaugeThickness+gap) %}
		{% set center_y_remove = titleHeight  + 96 + i*(gaugeThickness+gap) %}
		<rect id="bt-cc-add-{{i+1}}" x="228" y="{{center_y_add}}" width="24" height="24" fill="#1ac6ff33" />
		{% if n > 1 and n > i  %}
		<rect id="bt-cc-remove-{{i+1}}" x="252" y="{{center_y_remove}}" width="24" height="24" fill="#1ac6ff33" />
		{% endif %}
		{% endfor %}
	</g>
</svg>