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

{% set startAngle = -pi/2 %}
{% set endAngle = 3*pi/2 %}
{% set oR = (data['data-outerRadius'] or "120") | float %}
{% set iR = ((data['data-innerRadiusPercent'] or "0") | float) * oR / 100.0 %}
{% set iconSize = 36 %}
{% set leftPad = 200 %}

{#------calculate values from template elements--------#}
{% set values = elementsToValues(elements, 'tx-..-([1-9]\d*)$') %}
{% set n = values|length %}
{% set total = values|sum %}
{% if 0 >= total %}
{% set total = 1 %}
{% endif %}
{% set height = titleHeight + 2*gap + 2*oR + 36 %}
{% set max_n_horizontal = [4,n]|min %}
{% set width  = 2*oR + 2*leftPad %}



{#-------------svg starts here-------------------------#}
<svg xmlns="http://www.w3.org/2000/svg" width="{{width}}" height="{{height}}">
	<g id="piechart-v1--family">
		<g id="lines">
          {% set ns = namespace(runningSum=0) %}
			{%for i in range(n)%}
			<g id="g-{{i+1}}" transform="translate({{leftPad}}, {{titleHeight+2*gap}})">
				{% set pieStart = startAngle+ (endAngle-startAngle) * ns.runningSum/total %}
				{% set pieEnd = pieStart + (endAngle-startAngle)*values[i]/total %}
              	{% set ns.runningSum = ns.runningSum + values[i] %}
				{% set x0 = (oR + oR * cos(pieStart))|round(3) %}
				{% set y0 = (oR + oR * sin(pieStart))|round(3) %}
				{% set x1 = (oR + oR * cos(pieEnd))|round(3) %}
				{% set y1 = (oR + oR * sin(pieEnd))|round(3) %}
				{% set x2 = (oR + iR * cos(pieEnd))|round(3) %}
				{% set y2 = (oR + iR * sin(pieEnd))|round(3) %}
				{% set x3 = (oR + iR * cos(pieStart))|round(3) %}
				{% set y3 = (oR + iR * sin(pieStart))|round(3) %}
				{% set largeArc = 1 if (pieEnd-pieStart) >= 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>

		
		{# title #}
		<g id="tx-cb-title" transform="translate({{leftPad + oR}}, 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>

		<g id="elements" transform="translate({{leftPad + oR}},{{oR+titleHeight+2*gap}})">
      	{% set ns.runningSum=0 %}
		{%for i in range(n) %}
      		{% set pieStart = startAngle + (endAngle-startAngle) * ns.runningSum/total %}
			{% set pieEnd = pieStart + (endAngle-startAngle)*values[i]/total %}
       		{% set ns.runningSum = ns.runningSum + values[i] %}
      		{% set pieMid = (pieStart+pieEnd)/2 %}
      		{% set pieStartX = oR*cos(pieStart)|round(3) %}
      		{% set pieStartY = oR*sin(pieStart)|round(3) %}
      		{% set removeX = oR*cos(pieMid)|round(3) %}
      		{% set removeY = oR*sin(pieMid)|round(3) %}      
      		{% set pieEndX = oR*cos(pieEnd)|round(3) %}
      		{% set pieEndY = oR*sin(pieEnd)|round(3) %}
	        {% set labelX = (oR + 6)*cos(pieMid)|round(3) %}
      		{% set labelY = (oR + 6)*sin(pieMid)|round(3) %}      
          <rect id="bt-cc-add-{{i+2}}" x="{{pieEndX-12}}" y="{{pieEndY-12}}" width="24" height="24" fill="#1ac6ff33" />

		{% if n > 1 and n > i  %}
		<rect id="bt-cc-remove-{{i+1}}" x="{{removeX-12}}" y="{{removeY-12}}" width="24" height="24" fill="#1ac6ff33" />
		{% endif %}
          
          {# label #}
          {% set alignment = pieChart.radiansToAlignment(pieMid) %}
          {% if alignment[0] == 'l' %}
          	{% set deltaX = labelWidth/2 %}
          {% elif alignment[0] == 'r' %}
            {% set deltaX = -labelWidth/2 %}
          {% else %}
          {% set deltaX = 0 %}
          {% endif %}
          {% if alignment[1] == 't' %}
          	{% set deltaY = textHeight/2 %}
          {% elif alignment[1] == 'b' %}
            {% set deltaY = -textHeight/2 %}
          {% else %}
          {% set deltaY = 0 %}
          {% endif %}
          <g id="tx-{{alignment}}-{{i+1}}" transform="translate({{labelX+deltaX}}, {{labelY+deltaY}})">
			<path id="rect" fill="#ff000055" d="M -{{labelWidth/2}} -12 h {{labelWidth}} v 24 h -{{labelWidth}} Z" />
		  </g>
          
          {# icons #}
          {% set iconR = pieChart.iconDistanceToCenter(oR, iR, start=pieStart, end=pieEnd) %}
          {% set iconX = iconR*cos(pieMid) %}
          {% set iconY = iconR*sin(pieMid) %}
          <g id="ic-cc-{{i+1}}" transform="translate({{iconX}},{{iconY}})">
          	<path id="rect" d="M -{{iconSize/2}} -{{iconSize/2}} h {{iconSize}} v {{iconSize}} h -{{iconSize}} Z" fill="#33DE7B" fill-opacity="0.1"/>
          </g>
		{% endfor %}
      </g>
	</g>
</svg>