{{#> layout}}

<defs>
  <linearGradient id="shadow">
    <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 font-size="20">
    <g transform="translate({{spec.items.base.rect.width}}, 0)">
      {{#each itemsTicks as |tick index|}}
        <line x1="{{tick.leftPos}}" y1="0" x2="{{tick.leftPos}}" y2="{{math ../spec.items.totalHeight '+' (math 2 '*' ../spec.items.ticks.heightOffset)}}" stroke="#E5E7EB" stroke-dasharray="3.5" stroke-linecap="round" stroke-width="2"/>
        <text x="{{math tick.leftPos '-' ../spec.items.ticks.numberOffset.x}}" y="{{../spec.items.ticks.numberOffset.y}}" fill="#9CA3AF" text-anchor="middle" font-size="16" font-weight="500" dy="5">{{tick.number}}</text>
      {{/each}}
    </g>
    <g transform="translate({{spec.items.base.rect.width}}, {{spec.items.ticks.heightOffset}})">
      {{#each items as |item index|}}
        <g transform="translate(0, {{math (math index '*' ../spec.items.distanceY) '+' 1}})">
          {{bar item.width ../spec.items.base.rect.height ../spec.items.body.rect.brs 0 fill=item.body.color fill-opacity=item.body.opacity}}
          <g transform="translate(-{{math (math ../spec.items.base.rect.height '/' 2) '+' 6}}, {{math ../spec.items.base.rect.height '/' 2}})">
            <text x="{{item.width}}" y="0" fill="white" text-anchor="middle" font-size="20" font-weight="600" dy="6">{{item.mark}}</text>
          </g>
        </g>
      {{/each}}
    </g>
    <g transform="translate(0, {{spec.items.ticks.heightOffset}})">
      <rect x="0" y="0" width="{{math spec.items.base.rect.width '+' 1}}" height="{{spec.items.totalHeight}}" fill="#FFFFFF" rx="1"/>
      <rect x="{{math spec.items.base.rect.width '+' 1}}" y="0" width="5" height="{{spec.items.totalHeight}}" fill="url('#shadow')" fill-opacity="0.2"/>
    </g>
    <g transform="translate(0, {{spec.items.ticks.heightOffset}})">
      {{#each items as |item index|}}
        <g transform="translate(0, {{math index '*' ../spec.items.distanceY}})">
          {{bar ../spec.items.base.rect.width ../spec.items.base.rect.height ../spec.items.base.rect.brs 0 fill=item.baseColor}}
          <g transform="translate({{math ../spec.items.base.rect.height '/' 2}}, {{math ../spec.items.base.rect.height '/' 2}})">
            <circle cx="0" cy="0" r="{{../spec.items.base.label.circle.radius}}" fill="white"/>
            <text x="0" y="0" fill="{{item.baseColor}}" text-anchor="middle" font-size="20" font-weight="400" dy="6.5">{{item.label.abbr}}</text>
            <text x="{{../spec.items.base.label.offsetX}}" y="0" fill="white" font-size="20" font-weight="500" text-anchor="end" dy="5.5">{{item.label.fr}}</text>
          </g>
        </g>
      {{/each}}
    </g> 
    </g> 
    <g transform="translate({{math (math spec.items.base.rect.width '+' spec.items.body.rect.maxWidth) '+' spec.raw.offsetX}}, {{math spec.items.totalHeight '+' (math 2 '*' spec.items.ticks.heightOffset)}}) scale(1, -1)">
      <g transform="translate({{math spec.raw.rect.width '+' spec.raw.ticks.line.offsetX}}, 0)">
        {{#each rawTicks as |tick index|}}
          <line x1="0" y1="{{tick.bottomPos}}" x2="{{../spec.raw.ticks.line.width}}" y2="{{tick.bottomPos}}" stroke="#E5E7EB" stroke-dasharray="3" stroke-linecap="round" stroke-width="2"/>
          <g transform="translate({{math ../spec.raw.ticks.line.width '+' ../spec.raw.ticks.number.offsetX}}, {{tick.bottomPos}})">
            <text x="0" y="0" fill="#9CA3AF" text-anchor="middle" font-size="14" font-weight="500" dy="4" transform="scale(1, -1)">{{tick.number}}</text>
          </g>
        {{/each}}
      </g>
      <rect x="0" y="0" width="{{spec.raw.rect.width}}" height="{{spec.raw.rect.height}}" rx="{{spec.raw.rect.borderRadius}}" fill="#E5E7EB"/>
      <rect x="0" y="0" width="{{spec.raw.rect.width}}" height="{{raw.height}}" rx="{{spec.raw.rect.borderRadius}}" fill="#374151"/>
    <g transform="translate({{spec.raw.rect.borderRadius}}, {{spec.raw.rect.borderRadius}})">
      <g transform="translate(0, {{math raw.height '-' (math 2 '*' spec.raw.rect.borderRadius)}})">
        <text x="0" y="0" fill="white" text-anchor="middle" font-size="20" font-weight="700" dy="6.5" transform="scale(1, -1) translate(0, 12)">{{raw.mark}}</text>
      </g>
      <g>
        <text x="0" y="0" fill="white" text-anchor="end" font-size="18" font-weight="500" dy="4" transform="scale(1, -1) rotate(-90)">{{raw.label.fr}}</text>
      </g>
    </g>
  </g>
</g>

{{/layout}}