{#-----------------constants---------------------------#}
{% set topGap = 24 %}
{% set rightGap = 24 %}
{% set barGap = 18 %}
{% set barThickness = 48 %}
{% set barToValue = 6 %}
{% set axisPadding = 56 %}
{% set arrowHead = 6 %}
{% set graphPadding = 48 %}

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

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


  	{# bars #}
	{%for i in range(n) %}
  		{% set y = topGap + barGap + (barGap + barThickness) * i %}
  		{% set barWidth = (width-rightGap) * values[i] / maxValue | round(3) %}
  		<g id="g-{{i+1}}" transform="translate({{graphPadding}}, {{graphPadding}})">
          <rect id="bar_{{i+1}}" x="0" y="{{y}}" width="{{barWidth}}" height="{{barThickness}}" fill="{{fillColor(i)}}" stroke="{{strokeColor(i)}}" />
		</g>
  	{% endfor %}

 
  	{# values #}
  	{%for i in range(n) %}
  		{% set barWidth = (width-rightGap) * values[i] / maxValue | round(3) %}
  		{% if barWidth > 48 + 2*barToValue  %}
  			{% set align = 'rc' %}
  			{% set x = (width-rightGap) * values[i] / maxValue - barToValue - 48 | round(3) %}
  		{% else %}
  			{% set align = 'lc' %}
	  		{% set x = (width-rightGap) * values[i] / maxValue + barToValue | round(3) %}
  		{% endif %}
  		{% set y = topGap + barGap + barThickness/2 + (barGap + barThickness) * i %}
        <g id="tx-{{align}}-{{i+1}}-value" transform="translate({{x+graphPadding}}, {{y+graphPadding}})">
          <path stroke="{{strokeColor(i)}}" d="M 0 -12 h 48 v 24 h -48 Z" />
        </g>
  	{% endfor %}

   	{# labels #}
  	{%for i in range(n) %}
  		{% set y = topGap + barGap + barThickness/2 + (barGap + barThickness) * i %}
        <g id="tx-rc-{{i+1}}-label" transform="translate({{0-barToValue+graphPadding}}, {{y+graphPadding}})">
          <path fill="#ff00001a" d="M 0 -12 h -120 v 24 h 120 Z" />
        </g>
  	{% endfor %}

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

  	{# axes #}
  	<g id="lines" transform="translate({{graphPadding}}, {{graphPadding}})">
      <g id="ar-with-terminator_x">
        <path id="hAxis" marker-end="url(#arrow)" d="M 0 {{height}} L 0 {{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="M 0 {{height}} L {{width+arrowHead}} {{height}}" fill="none" stroke="#484848" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" />
      </g>
	</g>
  </g>
</svg>