{{#> layout}}

  <defs>
    <clipPath id="raw-rect">
      <rect x="0" y="0" width="{{spec.raw.rect.width}}" height="{{spec.raw.rect.height}}" rx="{{spec.raw.rect.br}}"/>
    </clipPath>
    <path id="badge" d="M 0 147 C 3.55 146.98, 6.64 145.25, 9 141.5 L 34 102 L 115.5 102 C 137 102, 150 83, 150 68 L 150 -68 C 150 -82, 137 -102, 115.5 -102 L -115.5 -102 C -137 -102, -150 -82, -150 -68 L -150 68 C -150 83, -137 102, -115.5 102 L -34 102 L -9 141.5 C -6.64 145.25, -3.55 146.98, 0 147"/>
  </defs>

  <g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
    <g transform="translate({{math spec.items.baseline.width '/' 2}}, {{spec.items.topPos}})">
      <g transform="translate(-{{math spec.items.rect.body.width '/' 2}}, 0)">
        {{#each items as | item index |}}
          {{#with @root.spec.items as | itemsSpec |}}
            <g transform="translate({{math (math index '-' 2) '*' itemsSpec.distanceX}}, 0)">
              <g transform="translate(-5, 0)">
                {{bar item.height.base itemsSpec.rect.base.width (object tl=0 tr=itemsSpec.rect.base.br br=itemsSpec.rect.base.br bl=0) (toRad -90) fill=itemsSpec.rect.base.color}}
                <text x="-5" y="-{{math item.height.base '-' 4}}" font-size="12" font-weight="400" text-anchor="start" fill="#D4D4D8" dy="3">{{item.maxValue}}</text>
              </g>
              {{bar item.height.body itemsSpec.rect.body.width (object tl=0 tr=itemsSpec.rect.body.br br=itemsSpec.rect.body.br bl=0) (toRad -90) fill=item.fill}}
              <g transform="translate({{math itemsSpec.rect.body.width '/' 2}}, 0)" fill="{{item.fill}}">
                <text x="0" y="-{{math item.height.body '+' 13}}" font-size="16" font-weight="500" text-anchor="middle" dy="4">{{item.mark}}</text>
                <g transform="translate(0, 20)">
                  {{#each (wrapOnNewline item.label.fr) as | line index |}}
                    <text x="0" y="{{math index '*' 18}}" font-size="14" font-weight="400" text-anchor="middle" dy="5">{{line}}</text>
                  {{/each}}
                </g>
              </g>
            </g>
          {{/with}}
        {{/each}}
      </g>
      <line x1="-{{math spec.items.baseline.width '/' 2}}" y1="0" x2="{{math spec.items.baseline.width '/' 2}}" y2="0" stroke="#A1A1AA" stroke-width="2"/>
    </g>

    <g transform="translate({{spec.raw.leftPos}}, {{math spec.items.topPos '+' spec.raw.offsetY}})">
      <text x="0" y="-20" font-size="14" font-weight="400" text-anchor="end" fill="#52525B" dy="4">{{raw.label.fr}}</text>
      <rect x="0" y="0" width="{{spec.raw.rect.width}}" height="{{spec.raw.rect.height}}" fill="#F4F4F5" clip-path="url(#raw-rect)"/>
      <rect x="0" y="0" width="{{raw.width}}" height="{{spec.raw.rect.height}}" fill="{{raw.interpret.fill}}" clip-path="url(#raw-rect)"/>
      <g transform="translate({{raw.width}}, -{{spec.raw.label.shape.offsetY}})">
        <svg width="{{spec.raw.label.shape.width}}" height="{{spec.raw.label.shape.height}}" x="0" y="0" viewBox="0 0 300 249" overflow="visible">
          <use href="#badge" fill="{{raw.interpret.fill}}"/>
        </svg>
        <text x="0" y="0" font-size="18" font-weight="600" text-anchor="middle" fill="white" dy="5">{{raw.mark}}</text>
      </g>

      <g>
        {{#each raw.stops as | stop index |}}
          {{#with @root.spec.raw as | rawSpec |}}
            <g transform="translate({{stop.width}}, 0)">
              <line x1="0" y1="0" x2="0" y2="{{rawSpec.label.stops.line.length}}" stroke="#A1A1AA" stroke-dasharray="3" stroke-linecap="round" stroke-width="1"/>
              <text x="0" y="{{math rawSpec.label.stops.line.length '+' rawSpec.label.stops.number.offsetY}}" font-size="12" font-weight="400" text-anchor="middle" fill="#A1A1AA" dy="3">{{stop.mark}}</text>
            </g>
            {{#unless @first}}
              {{setVar "prevStopWidth" (lookup (lookup @root.raw.stops (math index '-' 1)) 'width')}}
              {{setVar "Wm" (math (math prevStopWidth '+' stop.width) '/' 2)}}
              {{setVar "interpret" (lookup (lookup @root.spec.raw.interprets (math index '-' 1)) 'fr')}}
              {{setVar "isChosen" (boolean interpret '===' @root.raw.interpret.fr)}}
              <text x="{{Wm}}" y="{{math rawSpec.label.stops.line.length '+' rawSpec.label.stops.number.offsetY}}" font-size="{{ternary isChosen 16 14}}" font-weight="{{ternary isChosen 600 400}}" text-anchor="middle" fill="{{ternary isChosen @root.raw.interpret.fill '#A1A1AA'}}" dy="3">{{interpret}}</text>
            {{/unless}}
          {{/with}}
        {{/each}}
      </g>
    </g>
  </g>

{{/layout}}