{% set titleWidth = 600 %}
{% set titleHeight = 48 %}
{% set labelHeight = 24 %}

{% set gap = 12 %}

{% set barHeight = 36 %}
{% set barWidth  = 480 %}
{% set valueWidth = 60 %}
{% set r = barHeight/2 %}
{% set topGap = 24 %}
{% set leftGap = 60 %}
{% set groupGap = 48 %}


{#------calculate values from template elements--------#}
{% set values = elementsToValues(elements, 'tx-..-([1-9]\d*)-value') %}
{% set n = values|length %}
{% set height = titleHeight + topGap + n*(labelHeight+gap+barHeight+groupGap)%}
{% set width  = titleWidth %}

{#-------------svg starts here-------------------------#}

<svg xmlns="http://www.w3.org/2000/svg" width="{{width}}" height="{{height}}">
    <g id="gauge-horizontal">
      {%for i in range(n+1) %}
        <rect id="bt-cc-add-{{i+1}}" x="{{leftGap-r-24}}" y="{{titleHeight + i*(groupGap+barHeight+gap+labelHeight)}}" width="24" height="24" fill="#1ac6ff33" />
        {% if n > 1 and n > i %}
          <rect id="bt-cc-remove-{{i+1}}" x="{{leftGap-r-24}}" y="{{titleHeight + topGap + 8 + labelHeight + gap + i*(groupGap+barHeight+gap+labelHeight)}}" width="24" height="24" fill="#1ac6ff33" />
        {% endif %}
      {% endfor %}
        <g id="lines">
          <g id="g-0">
          	{%for i in range(n)%}
            <g id="cu_bar_back_{{i+1}}" transform="translate({{leftGap}}, {{titleHeight + topGap + i*(groupGap+barHeight+gap+labelHeight) + labelHeight + gap}})">
              {% set width = barWidth %}
              <rect x="{{1-r}}" y="1" width="{{barHeight + width}}" height="{{barHeight}}" rx="{{barHeight/2}}" fill="{{fillColorGray}}" stroke="{{strokeColorGray}}" stroke-width="2" stroke-linejoin="round"/>
            </g>
          	{% endfor %}
          </g>
          
          {%for i in range(n)%}
          <g id="g-{{i+1}}">
            <g id="cu_bar_{{i+1}}" transform="translate({{leftGap}}, {{titleHeight + topGap + i*(groupGap+barHeight+gap+labelHeight) + labelHeight + gap}})">
              {% set value = clamp(values[i], 0, 100)/100 %}
              {% set width = value*barWidth %}
              <rect x="{{1-r}}" y="1" width="{{barHeight + width}}" height="{{barHeight}}" rx="{{barHeight/2}}" fill="{{fillColor(i)}}" stroke="{{strokeColor(i)}}" stroke-width="2" stroke-linejoin="round"/>
            </g>
            <g id="cu_bubble_{{i+1}}">
              {% set width = ((barWidth*clamp(values[i], 0, 100))/100) %}
              <g transform="translate({{leftGap + width + r - valueWidth/2}}, {{titleHeight + topGap + (i)*(groupGap+barHeight+gap+labelHeight)+barHeight + gap + labelHeight + 8}})">
                <path d="M1 17C1 10.3726 6.37258 5 13 5H26L31 1L36 5H49C55.6274 5 61 10.3726 61 17V17C61 23.6274 55.6274 29 49 29H13C6.37258 29 1 23.6274 1 17V17Z" fill="{{fillColor(i)}}" stroke="{{strokeColor(i)}}" stroke-width="2" stroke-linejoin="round" data-entity-classes="filled"/>
              </g>
            </g>
          </g>
          {% endfor %}
        </g>

        {% for i in range(n) %}
            {# label for item i #}
	        {% set width = ((barWidth*clamp(values[i], 0, 100))/100) %}
            <g id="tx-lc-{{i+1}}-label" transform="translate({{leftGap - r}}, {{titleHeight + topGap + i*(groupGap+barHeight+gap+labelHeight)}})">
                <path id="rect" fill="#ff00001a" d="M 0 0 h {{barWidth + 2*r}} v {{labelHeight}} h -{{barWidth}} Z"></path>
            </g>
            <g id="tx-cc-{{i+1}}-value" transform="translate({{leftGap + width + r}}, {{titleHeight + topGap + (i)*(groupGap+barHeight+gap+labelHeight)+barHeight + gap + labelHeight + 16}})">
                <path id="rect" fill="#ff00001a" d="M -{{valueWidth/2}} 0 h {{valueWidth}} v 18 h -{{valueWidth}} Z"></path>
                <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></tspan></text>
            </g>
        {% endfor %}

        {# title #}
        <g id="tx-cb-title" transform="translate({{width/2}}, 0)">
            <path id="rect_title"  fill="#ff00001a"
                d="M -300 0 h 600 v {{titleHeight}} h -600 Z"></path>
            <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>Title</tspan></text>
        </g>
    </g>
</svg>