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

{% set circles = data['data-circles'] %}

{% set labelWidth = 132.0 %}
{% set labelHeight = 60.0 %}
{% set verticalGap = 12.0 %}

{% set iconSize = 36.0 %}
{% set padding = 12.0 %}

{# circles #}
{% if circles == true %}
	{% set verticalGap = 24.0 %}
	{% set circleSize = 60.0 %}
{% endif %}

{% set width = 144 %}
{% set height = 48 + n*(labelHeight + verticalGap - labelHeight/2) + labelHeight %}


<svg xmlns="http://www.w3.org/2000/svg" width="{{width}}" height="{{height}}">
    <g id="list-vertical-v1--family">
        {% set x = 48 %}
        {% for i in range(n) %}
            {% set y = 48 + i*(labelHeight + verticalGap) %}
            {% if circles == true %}
                <g id="g-{{i+1}}">
                    <rect id="cr-{{i+1}}" fill="{{fillColor(i)}}" stroke="{{strokeColor(i)}}" x="{{x - circleSize/2}}" y="{{y - circleSize/2}}" width="{{circleSize}}" height="{{circleSize}}" />
                </g>
            {% endif %}
            <g id="ic-cc-{{i+1}}" transform="translate({{x - iconSize/2}}, {{y - iconSize/2}})">
                <path id="rect" fill="#ff00001a" d="M 0 0 h {{iconSize}} v {{iconSize}} h -{{iconSize}} Z"></path>
            </g>
            <g id="tx-lc-{{i+1}}" transform="translate({{x+padding+iconSize}}, {{y - labelHeight/2}})">
                <path id="rect" fill="#ff00001a" d="M 0 0 h {{labelWidth}} v {{labelHeight}} h -{{labelWidth}} Z"></path>
            </g>
            <rect id="bt-cc-add-{{i+1}}" x="{{x+iconSize-12}}" y="{{y - 12 - labelHeight/2 - verticalGap/2}}" width="24" height="24" fill="#1ac6ff33" />
            {% if n > 1 %}
                <rect id="bt-cc-remove-{{i+1}}" x="{{x+iconSize-12}}" y="{{y - 12}}" width="24" height="24" fill="#1ac6ff33" />
            {% endif %}
        {% endfor %}
        {% set y = 48 + n*(labelHeight + verticalGap) %}
        <rect id="bt-cc-add-{{n+1}}" x="{{48+iconSize-12}}" y="{{48 - 12 + labelHeight/2 + verticalGap/2 + (n-1)*(labelHeight + verticalGap)}}" width="24" height="24" fill="#1ac6ff33" />
    </g>
</svg>