{#-----------------constants---------------------------#}
{% set row_h = 96 %}
{% set header_h = 108+24 %}

{#------calculate values from template elements--------#}
{% set ns = namespace(left=1, right=1) %}
{% set ns.left =uniquePathsAt(elements, "left/*$") | length %}
{% set ns.right = uniquePathsAt(elements, "right/*$") | length %}
{% set rows = [ns.left, ns.right] | max %}
{% set height  = header_h + rows*row_h + 96 %}

<svg xmlns="http://www.w3.org/2000/svg" width="552" height="{{height}}">
    <g id="main_body">
        <g id="tx-cb-title">
            <path id="rect_title" fill="#ff00001a" d="M0 0 L552 0 L552 24 L0 24 L0 0"/>
            <text id="text_title" fill="#484848" transform="translate(276, 16)" font-size="20" font-family="Roboto" font-weight="700"/>
        </g>
        <g id="test-lists-v1--family-1" transform="translate(0, 72)">
            <g id="lines">
                <g id="g-0">
                    <g id="cu">
                        <g id="cu_Union">
                            <path id="Union" transform="translate(246, 24)" fill="#f0f0f0" d="M0 24 L18 0 L18 8.0001 L42 8.0001 L42 0.0002 L60 24.0002 L42 48.0002 L42 40.0001 L18 40.0001 L18 48 L0 24 Z"/>
                            <path id="Union_1" transform="translate(246, 24)" fill="none" stroke="#666666" stroke-width="2" stroke-linejoin="round" stroke-linecap="none" stroke-miterlimit="4" d="M 0 24 L 18 0 L 18 8.0001 L 42 8.0001 L 42 0.0002 L 60 24.0002 L 42 48.0002 L 42 40.0001 L 18 40.0001 L 18 48 L 0 24 Z"/>
                        </g>
                        <path id="vs" transform="translate(267, 43)" fill="none" stroke="#484848" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="1.5" d="M 0 0 L 4.4 10.0659 M 4.6 9.7188 L 9 0.2603 M 18.8 1.6487 C 18.4667 1.4173 18.1333 1.1859 17.8 0.9545 C 17.2 0.4339 16.2333 0.2314 14.9 0.3471 C 13.5667 0.4628 12.8667 1.0413 12.8 2.0826 C 12.6667 3.1239 13.6333 4.1073 15.7 5.0329 C 17.8333 5.9007 18.8667 6.9131 18.8 8.0701 C 18.8 9.2271 18.0333 9.9213 16.5 10.1527 C 14.9 10.3262 13.8333 10.008 13.3 9.1981 C 12.9667 8.7932 12.6667 8.3882 12.4 7.9833"/>
                    </g>
                    <g id="cu_1">
                        <path id="line" transform="translate(23.99994277987571, 107.99902343750637)" fill="none" stroke="#bcbcbc" stroke-width="2" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" d="M 504.0005 0 L 0 0.0008"/>
                    </g>
                    <g id="cu_2">
                        <path id="line_1" transform="matrix(1, 0, 0, 1, 276, 108)" fill="none" stroke="#bcbcbc" stroke-width="2" stroke-linejoin="miter" stroke-linecap="none" stroke-miterlimit="4" d="M 0.2844 {{rows*row_h}} L 0 0"/>
                        <path id="line_2" transform="matrix(1, 0, 0, 1, 276, 70)" fill="none" stroke="#bcbcbc" stroke-width="2" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" d="M 0.1044 38 L 0 0"/>
                        <path id="line_3" transform="matrix(1, 0, 0, 1, 276, 0)" fill="none" stroke="#bcbcbc" stroke-width="2" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" d="M 0.1252 26 L 0 0"/>
                    </g>
                </g>
            </g>
            <g id="tx-lc-left-header" data-entity-classes="DescTitle">
                <path id="rect_1" transform="translate(84, 12)" fill="#ff00001a" d="M0 0 L144 0 L144 72 L0 72 L0 0 Z"/>
                <text id="Label_1" fill="#484848" transform="translate(108, 36)" font-size="30" font-family="Roboto" font-weight="700" alignment-baseline="hanging" data-align="horizontal:LEFT;vertical:CENTER"/>
            </g>
            <g id="tx-lc-right-header" data-entity-classes="DescTitle">
                <path id="rect" transform="translate(324, 12)" fill="#ff00001a" d="M0 0 L144 0 L144 72 L0 72 L0 0 Z"/>
                <text id="Label" fill="#484848" transform="translate(348, 36)" font-size="30" font-family="Roboto" font-weight="700" alignment-baseline="hanging" data-align="horizontal:LEFT;vertical:CENTER"/>
            </g>
{% for i in range(ns.left) %}
{% set i1= i + 1 %}
            <path id="tx-lc-left-{{i1}}" data-entity-classes="Description" transform="translate(84, {{header_h+i*row_h}})" fill="#ff00001a" d="M0 0 L144 0 L144 72 L0 72 L0 0 Z"/>
            <rect id="bt-cc-add-left-{{i1}}" fill="#1ac6ff33" transform="translate(144, {{header_h+i*row_h-24}})" width="24" height="24" rx="0" ry="0"/>
            <rect id="bt-cc-remove-left-{{i1}}" fill="#1ac6ff33" transform="translate(60, {{header_h+i*row_h+30-6}})" width="24" height="24" rx="0" ry="0"/>
{% endfor %}          
            <rect id="bt-cc-add-left-{{ns.left+1}}" fill="#1ac6ff33" transform="translate(144, {{header_h+ns.left*row_h-24}})" width="24" height="24" rx="0" ry="0"/>
{% for i in range(ns.right) %}
{% set i1= i + 1 %}
            <path id="tx-lc-right-{{i1}}" data-entity-classes="Description" transform="translate(324, {{header_h+i*row_h}})" fill="#ff00001a" d="M0 0 L144 0 L144 72 L0 72 L0 0 Z"/>
            <rect id="bt-cc-add-right-{{i1}}" fill="#1ac6ff33" transform="translate(384, {{header_h+i*row_h-24}})" width="24" height="24" rx="0" ry="0"/>
            <rect id="bt-cc-remove-right-{{i1}}" fill="#1ac6ff33" transform="translate(300, {{header_h+i*row_h+30-6}})" width="24" height="24" rx="0" ry="0"/>
{% endfor %}          
            <rect id="bt-cc-add-right-{{ns.right+1}}" fill="#1ac6ff33" transform="translate(384, {{header_h+ns.right*row_h-24}})" width="24" height="24" rx="0" ry="0"/>
        </g>
    </g>
</svg>