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

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

{% set labelWidth = 132.0 %}
{% set labelHeight = 60.0 %}
{% set horizontalGap = 24.0 %}

{% set iconSize = 36.0 %}
{% set padding = 6.0 %}
{% set verticalGap = 48.0 %}

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

{% set width = 128 + n*(labelWidth + horizontalGap) %}
{% set height = iconSize + labelHeight + verticalGap %}


<svg xmlns="http://www.w3.org/2000/svg" width="{{width}}" height="{{height}}">
    <g id="list-horizontal-v1--family">
    {% set y = 48 %}
    {% for i in range(n) %}
        {% set x = 128 + i*(labelWidth + horizontalGap) %}
        {% 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-ct-{{i+1}}" transform="translate({{x - labelWidth/2}}, {{48 - 24 + verticalGap + iconSize/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 - 12 - labelWidth/2 - horizontalGap/2}}" y="{{verticalGap + iconSize/2}}" width="24" height="24" fill="#1ac6ff33" />
        {% if n > 1 %}
            <rect id="bt-cc-remove-{{i+1}}" x="{{x - 12}}" y="{{verticalGap + iconSize/2}}" width="24" height="24" fill="#1ac6ff33" />
        {% endif %}
    {% endfor %}
    {% set x = 128 + n*(labelWidth + horizontalGap) %}
    <rect id="bt-cc-add-{{n+1}}" x="{{x - 12 - labelWidth/2 - horizontalGap/2}}" y="{{verticalGap + iconSize/2}}" width="24" height="24" fill="#1ac6ff33" />
    </g>
</svg>