{#-----------------constants---------------------------#}
{% set titleHeight = 48 %}
{% set textHeight = 24 %}
{% set gap = 12 %}

{% set startAngle = -5*pi/4 %}
{% set endAngle = pi/4 %}
{% set iR = 54 %}
{% set oR = 84 %}
{% set gaugeGap = 56 %}

{#------calculate values from template elements--------#}
{% set values = elementsToValues(elements, 'tx-..-([1-9]\d*)-value') %}
{% set n = values|length %}
{% set height = titleHeight + gap + (2*oR+2*gap+2*textHeight)*(1+n//4) %}
{% set max_n_horizontal = [4,n]|min %}
{% set width  = (2*oR)*(max_n_horizontal) + gaugeGap*(max_n_horizontal-1) %}

{#-------------svg starts here-------------------------#}
<svg xmlns="http://www.w3.org/2000/svg" width="{{width}}" height="{{height}}">
	<g id="gauge-with-needle">
		<g id="lines">
			<g id="g-0">
			{%for i in range(n)%}
			<g id="cu_bar_back_{{i+1}}" transform="translate({{(i%4)*(2*oR+gaugeGap)}}, {{titleHeight + gap + (i//4)*(2*oR+2*gap+2*textHeight)}})">
				{# gauge specific variables. wrt topLeft of the gauge, so center is at oR,oR #}
				{% set arcAngle = (endAngle-startAngle) * clamp(values[i], 0, 100)/100 %}
				{% set startAngle = startAngle + arcAngle %}
              	{% set startAngleDegree = 180*startAngle/pi %}
				{% 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}} L {{x2}} {{y2}} A {{iR}} {{iR}} 0 {{largeArc}} 0 {{x3}} {{y3}} L {{x0}} {{y0}} Z" fill="{{fillColor(i)}}" stroke="{{strokeColor(i)}}" stroke-width="2" data-entity-classes="FilledPart" />
                <path id="needle" transform="translate({{oR}}, {{oR}}) rotate({{startAngleDegree}})" d="m 0 9.5 c -5.2467 0 -9.5 -4.2533 -9.5 -9.5 c 0 -5.2467 4.2533 -9.5 9.5 -9.5 c 0.317 0 0.6304 0.0155 0.9394 0.0459 l 38.0763 7.4917 c 2.1518 0.4234 2.1518 3.5014 0 3.9248 l -38.0763 7.4917 c -0.309 0.0304 -0.6224 0.0459 -0.9394 0.0459 z m 0.0034 -13.5332 c 2.2274 0 4.0332 1.8057 4.0332 4.0332 c 0 2.2275 -1.8058 4.0332 -4.0332 4.0332 c -2.2275 0 -4.0332 -1.8057 -4.0332 -4.0332 c 0 -2.2275 1.8057 -4.0332 4.0332 -4.0332 z"/>
			</g>
				{% endfor %}
			</g>
			{%for i in range(n)%}
			<g id="g-{{i+1}}" transform="translate({{(i%4)*(2*oR+gaugeGap)}}, {{titleHeight + gap + (i//4)*(2*oR+2*gap+2*textHeight)}})">
				{# gauge specific variables. wrt topLeft of the gauge, so center is at oR,oR #}
				{% set arcAngle = (endAngle-startAngle) * clamp(values[i], 0, 100)/100 %}
				{% set endAngle = startAngle + arcAngle %}
				{% 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}} L {{x2}} {{y2}} A {{iR}} {{iR}} 0 {{largeArc}} 0 {{x3}} {{y3}} L {{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-cc-{{i+1}}-value" transform="translate({{(i%4)*(2*oR+gaugeGap)+oR}}, {{titleHeight+gap+(i//4)*(2*oR+2*gap+2*textHeight)+oR+iR}})">
			<path id="rect" fill="#ff000055" d="M -40 -12 h 80 v 24 h -80 Z" />
		</g>
		<g id="tx-ct-{{i+1}}-label" transform="translate({{(i%4)*(2*oR+gaugeGap)+oR}}, {{titleHeight+gap+(i//4)*(2*oR+2*gap+2*textHeight)+2*oR+gap}})">
          	{% set labelWidth = (gaugeGap+2*oR-gap) %}
			<path id="rect" fill="#ff000055" d="M -{{labelWidth/2}} 0 h {{labelWidth}} v {{2*textHeight}} h -{{labelWidth}} 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>

		
		{# buttons #}
		{%for i in range(n+1) %}
		<rect id="bt-cc-add-{{i+1}}" x="{{(i%4)*(2*oR+gaugeGap)-gaugeGap/2-12}}" y="{{titleHeight+gap+(i//4)*(2*oR+2*gap+2*textHeight)}}" width="24" height="24" fill="#1ac6ff33" />
		{% if n > 1 and n > i  %}
		<rect id="bt-cc-remove-{{i+1}}" x="{{(i%4)*(2*oR+gaugeGap)+oR}}" y="{{titleHeight+gap+(i//4)*(2*oR+2*gap+2*textHeight)}}" width="24" height="24" fill="#1ac6ff33" />
		{% endif %}
		{% endfor %}
	</g>
</svg>