{{#> layout}}

<defs>
  {{#with spec.items.rect as | rect |}}
  <clipPath id="items-rect">
    {{bar (math rect.width '/' 2) rect.height (object tl=0 tr=rect.br bl=0 br=rect.br) (toRad 0)}}
  </clipPath>
  {{/with}}
  {{#with spec.raw.rect as | rect |}}
  <clipPath id="raw-rect">
    {{bar (math rect.width '/' 2) rect.height (object tl=0 tr=rect.br bl=0 br=rect.br) (toRad 0)}}
  </clipPath>
  {{/with}}
</defs>

<g transform="translate({{math spec.profile.dimensions.width '/' 2}}, {{math spec.profile.padding.y '+' 30}})">
  {{#each items as | item itemIndex |}}
    {{#with @root.spec.items}}
    <g transform="translate(0, {{math itemIndex '*' rect.distanceY}})">
      <rect x="0" y="0" width="{{math rect.width '/' 2}}" height="{{rect.height}}" fill="#F4F4F5" clip-path="url(#items-rect)"/>
      <rect x="0" y="0" width="{{math rect.width '/' 2}}" height="{{rect.height}}" fill="#F4F4F5" transform="scale(-1, 1)" clip-path="url(#items-rect)"/>
      {{setVar "isPositive" (boolean item.mark '>' 0)}}
      <rect x="0" y="0" width="{{item.width}}" height="{{rect.height}}" fill="{{ternary isPositive '#B91C1C' '#007BA4'}}" transform="scale({{ternary isPositive 1 -1}}, 1)" clip-path="url(#items-rect)"/>
      <g transform="translate({{ternary isPositive item.width (math -1 '*' item.width)}}, 0)">
        <line x1="0" y1="-2" x2="0" y2="-8" stroke="{{ternary isPositive '#B91C1C' '#007BA4'}}" stroke-dasharray="2" stroke-linecap="round" stroke-width="1"/>
        <text x="0" y="-20" text-anchor="middle" font-size="16" font-weight="600" fill="{{ternary isPositive '#B91C1C' '#007BA4'}}" dy="5">{{abs item.mark}}{{ternary isPositive '+' '-'}}</text>
      </g>
      <g transform="translate(0, {{math rect.height '/' 2}})">
        <line x1="0" y1="{{math (math rect.height '/' 2) '+' 1}}" x2="0" y2="-{{math (math rect.height '/' 2) '+' 1}}" stroke="#A1A1AA" stroke-dasharray="2.5" stroke-linecap="round" stroke-width="1"/>
        <text x="{{math (math rect.width '/' 2) '+' maxValuesOffsetX}}" y="0" text-anchor="end" font-size="14" font-weight="400" fill="#A1A1AA" dy="4">{{item.maxValue}}+</text>
        <text x="{{math -1 '*' (math (math rect.width '/' 2) '+' maxValuesOffsetX)}}" y="0" text-anchor="start" font-size="14" font-weight="400" fill="#A1A1AA" dy="4">{{item.maxValue}}-</text>
      </g>
      <text x="0" y="{{math rect.height '+' labels.offsetY}}" text-anchor="middle" font-size="14" font-weight="500" fill="#52525B" dy="4">{{item.label.fr}} ({{item.label.abbr}})</text>
    </g>
    {{/with}}
  {{/each}}
  <g transform="translate(0, {{math (math (math (math items.length '-' 1) '*' spec.items.rect.distanceY) '+' spec.items.rect.height) '+' spec.raw.rect.offsetY}})">
    {{#with @root.spec.raw}}
      <rect x="0" y="0" width="{{math rect.width '/' 2}}" height="{{rect.height}}" fill="#F4F4F5" clip-path="url(#raw-rect)"/>
      <rect x="0" y="0" width="{{math rect.width '/' 2}}" height="{{rect.height}}" fill="#F4F4F5" transform="scale(-1, 1)" clip-path="url(#raw-rect)"/>
      {{setVar "isPositive" (boolean ../raw.mark '>' 0)}}
      <rect x="0" y="0" width="{{../raw.width}}" height="{{rect.height}}" fill="{{ternary isPositive '#B91C1C' '#007BA4'}}" transform="scale({{ternary isPositive 1 -1}}, 1)" clip-path="url(#raw-rect)"/>
      <g transform="translate({{ternary isPositive ../raw.width (math -1 '*' ../raw.width)}}, 0)">
        <line x1="0" y1="-2" x2="0" y2="-8" stroke="{{ternary isPositive '#B91C1C' '#007BA4'}}" stroke-dasharray="2" stroke-linecap="round" stroke-width="1"/>
        <text x="0" y="-20" text-anchor="middle" font-size="16" font-weight="600" fill="{{ternary isPositive '#B91C1C' '#007BA4'}}" dy="5">{{abs ../raw.mark}}{{ternary isPositive '+' '-'}}</text>
      </g>
      <g transform="translate(0, {{math rect.height '/' 2}})">
        <line x1="0" y1="{{math (math rect.height '/' 2) '+' 1}}" x2="0" y2="-{{math (math rect.height '/' 2) '+' 1}}" stroke="#A1A1AA" stroke-dasharray="2.5" stroke-linecap="round" stroke-width="1"/>
        <text x="{{math (math rect.width '/' 2) '+' maxValuesOffsetX}}" y="0" text-anchor="end" font-size="14" font-weight="400" fill="#A1A1AA" dy="4">{{../raw.maxValue}}+</text>
        <text x="{{math -1 '*' (math (math rect.width '/' 2) '+' maxValuesOffsetX)}}" y="0" text-anchor="start" font-size="14" font-weight="400" fill="#A1A1AA" dy="4">{{../raw.maxValue}}-</text>
      </g>
      <text x="0" y="{{math rect.height '+' labels.offsetY}}" text-anchor="middle" font-size="14" font-weight="500" fill="#52525B" dy="4">{{../raw.label.fr}} ({{../raw.label.abbr}})</text>
    {{/with}}
    <g transform="translate(0, {{math spec.raw.rect.height '+' spec.separator.line.offsetY}})">
      <line x1="{{math (math -1 '*' spec.separator.line.width) '/' 2}}" y1="0" x2="{{math spec.separator.line.width '/' 2}}" y2="0" stroke="#A1A1AA"/>
      <text x="{{math spec.separator.line.width '/' 2}}" y="{{spec.separator.desc.offsetY}}" fill="#71717A" text-anchor="start" font-size="14" font-weight="400" dy="4">{{spec.desc}}</text>
    </g>
  </g>
</g>

{{/layout}}