{{#> layout}}

<defs>
  <linearGradient id="horizontal-shadow">
    <stop offset="0%"  stop-color="black" />
    <stop offset="100%" stop-color="transparent" />
  </linearGradient>
  <linearGradient id="vertical-shadow" gradientTransform="rotate(90)">
    <stop offset="0%"  stop-color="black" />
    <stop offset="100%" stop-color="transparent" />
  </linearGradient>
</defs>

<g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
  <g transform="translate({{spec.items.offsetX}}, 0)">
    {{setVar "tickTotalHeight" (math (math 2 '*' spec.items.ticks.heightOffset) '+' spec.items.totalHeight)}}
    {{#each itemsTicks as | tick index |}}
      <g transform="translate({{tick.leftPos}}, 0)">
        <line x1="0" y1="0" x2="0" y2="{{../tickTotalHeight}}" stroke="#E4E4E7" stroke-dasharray="3.5" stroke-linecap="round" stroke-width="2"/>
        <text x="-{{@root.spec.items.ticks.numberOffset.x}}" y="{{@root.spec.items.ticks.numberOffset.y}}" fill="#A1A1AA" text-anchor="start" font-size="16" font-weight="500" dy="5">{{tick.number}}</text>
      </g>
    {{/each}}
    
    <g transform="translate(0, {{spec.items.ticks.heightOffset}})">
      {{#each items as | item index |}}
        {{#with @root.spec.items as | itemsSpec |}}
          <g transform="translate(0, {{math index '*' itemsSpec.distanceY}})">
            <path d="M 0 0 h {{math item.width '-' itemsSpec.rect.borderRadius}} a {{itemsSpec.rect.borderRadius}} {{itemsSpec.rect.borderRadius}} 180 0 1 0 {{itemsSpec.rect.height}} h -{{math item.width '-' itemsSpec.rect.borderRadius}} z" fill="{{item.fill}}" fill-opacity="{{item.opacity}}"/>
            <g transform="translate(0, {{math itemsSpec.rect.height '/' 2}})">
              <text x="-{{itemsSpec.label.offsetX}}" y="0" fill="#52525B" text-anchor="start" font-size="18" font-weight="500" dy="3">{{item.label.fr}}</text>
              <text x="{{math (math item.width '-' itemsSpec.rect.borderRadius) '-' 8}}" y="0" fill="white" text-anchor="middle" font-size="20" font-weight="600" dy="6">{{item.mark}}</text>
            </g>
          </g>
        {{/with}}
      {{/each}}

      <g transform="translate(-1, -1)">
        <rect x="0" y="0" width="1" height="{{math spec.items.totalHeight '+' 2}}" fill="#FFFFFF" rx="1"/>
        <rect x="1" y="0" width="5" height="{{math spec.items.totalHeight '+' 2}}" fill="url('#horizontal-shadow')" fill-opacity="0.2"/>
      </g>
    </g>
  </g>
</g>

{{/layout}}