{#-----------------constants---------------------------#}
{% set barThickness = 96 %}
{% set barToValue = 6 %}
{% set arrowHead = 6 %}
{% set graphPadding = 48 %}
{% set topPadding = 48.0 %}
{% set bottomPadding = 24.0 %}

{#------calculate values from template elements--------#}
{% set values = elementsToValues(elements, 'tx-..-([1-9]\d*)-value') %}
{% set n = values | length %}
{% if n == 0 %}
{% set values = [ 0 ] %}
{% set n = 1 %}
{% endif %}
{% set maxValue = values | max %}
{% set minValue = values | min %}
{% if maxValue == minValue %}
{% set maxValue = minValue + 1 %}
{% endif %}
{% set height = 240 %}
{% set width  = barThickness * n %}

<svg xmlns="http://www.w3.org/2000/svg" width="{{width+2*graphPadding}}" height="{{height+2*graphPadding}}">
<g id="linechart-back-family">
  <path id="tx-ct-title" transform="translate({{width/2 + graphPadding}}, {{height + 72 + graphPadding}})" fill="#ff00001a" d="M-200 0 h 400 v 48 h -400 Z"></path>
  <path id="tx-cb-y-axis" transform="translate({{graphPadding}}, {{graphPadding}})" fill="#ff00001a" d="M-120 -12 h240 v -48 h-240 Z"></path>
  <path id="tx-lc-x-axis" transform="translate({{width+graphPadding}}, {{height+graphPadding}})" fill="#ff00001a" d="M12 -24 h120 v 48 h-120 Z"></path>


  {# labels #}
  {%for i in range(n) %}
    {% set textWidth = barThickness - 2 %}
    {% set x = barThickness/2 + textWidth/2 + barThickness * i %}
    <g id="tx-cc-{{i+1}}-label" transform="translate({{x-textWidth+graphPadding}}, {{height + barToValue + graphPadding}})">
      <path fill="#ff00001a" d="M 0 0 h {{textWidth}} v 48 h {{0-textWidth}} Z" />
      <text id="Label" fill="#484848" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="15" font-weight="thin" letter-spacing="0em"/>
    </g>
  {% endfor %}

  {# buttons #}
  {%for i in range(n+1) %}
    {% set x = barThickness * i %}
    <rect id="bt-cc-add-{{i+1}}" x="{{x + graphPadding - 12}}" y="{{height - 12 + graphPadding}}" width="24" height="24" fill="#1ac6ff33" />
    {% if n > 1 and n > i %}
	    <rect id="bt-cc-remove-{{i+1}}" x="{{x + barThickness/2 - 12 + graphPadding}}" y="{{height - 12 + graphPadding}}" width="24" height="24" fill="#1ac6ff33" />
    {% endif %}
  {% endfor %}

  <g id="lines" transform="translate({{graphPadding}}, {{graphPadding}})">
    {# back #}
    <g id="cu-back">
      {% set half_n = (n+1) // 2 %}
      {%for i in range(half_n) %}
        {% set x = barThickness * i * 2 %}
        <rect id="bar_{{i+1}}" x="{{x}}" y="0" width="{{barThickness}}" height="{{height}}" fill="#cccccc" stroke="none" />
      {% endfor %} 
    </g> 	

    {# axes #}
    <g id="ar-with-terminator_x">
      <path id="hAxis" marker-end="url(#arrow)" d="M0 {{height}} L0 {{0-arrowHead}}" fill="none" stroke="#484848" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" />
    </g>
    <g id="ar-with-terminator_y">
      <path id="vAxis" marker-end="url(#arrow)" d="M0 {{height}} L{{width+arrowHead}} {{height}}" fill="none" stroke="#484848" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" />
    </g>

    <g id="values">
      {# line #}
      {% set ns = namespace(path='') %}
      {%for i in range(n) %}
        {% set x = barThickness/2  + barThickness * i %}
        {% set y = (height - topPadding - bottomPadding) * (maxValue - values[i]) / (maxValue - minValue) + topPadding | round(3) %}
        {% set action = 'M' if i == 0 else 'L' %}
        {% set ns.path = ns.path ~ action ~ x | round(3) ~ " " ~ y | round(3) %}
      {% endfor %}  	
      <path id="line" d="{{ns.path}}" fill="none" stroke="#4F92FF" stroke-width="4" />

      {# dots #}
      {%for i in range(n) %}
          {% set x = barThickness/2  + barThickness * i %}
          {% set y = (height - topPadding - bottomPadding) * (maxValue - values[i]) / (maxValue - minValue) + topPadding | round(3) %}
          <circle id="ci_{{i+1}}" cx="{{x}}" cy="{{y}}" r="3" fill="#4F92FF" stroke="#4F92FF" />
      {% endfor %}
    </g>
  </g>

  {# values #}
  {%for i in range(n) %}
    {% set x = barThickness/2  + barThickness * i %}
    {% set y = (height - topPadding - bottomPadding) * (maxValue - values[i]) / (maxValue - minValue) + topPadding - 12 | round(3) %}
    <g id="tx-cb-{{i+1}}-value" transform="translate({{x+graphPadding}}, {{y+graphPadding}})" data-entity-classes="NotInside">
      <path stroke="{{strokeColor(i)}}" d="M -24 0 h 48 v -24 h -48 Z" />
    </g>
  {% endfor %}
</g>
</svg>