{{#> 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 (math spec.items.ticks.heightOffset '+' spec.items.totalHeights.[0]) '+' spec.items.offsetY2) '+' spec.items.totalHeights.[1])}}
    {{#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>
  <g transform="translate(0, {{spec.items.ticks.heightOffset}})">
    <g transform="translate({{spec.items.offsetX}}, 0)">
      {{#each items.[0] 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, {{itemsSpec.rect.borderRadius}})">
             <text x="-{{itemsSpec.label.offsetX}}" y="0" fill="#52525B" text-anchor="start" font-size="14" font-weight="400" dy="3">{{item.label.fr}}</text>
             <text x="{{math (math item.width '-' itemsSpec.rect.borderRadius) '-' 10}}" y="0" fill="white" text-anchor="middle" font-size="18" 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 (math spec.items.totalHeights.[0] '+' spec.items.totalHeights.[1]) '+' 2}}" fill="#FFFFFF" rx="1"/>
        <rect x="1" y="0" width="5" height="{{math (math spec.items.totalHeights.[0] '+' spec.items.totalHeights.[1]) '+' 2}}" fill="url('#horizontal-shadow')" fill-opacity="0.2"/>
      </g>
    </g>

    {{setVar "rawLeftPos" (math (math spec.items.offsetX '+' (math spec.items.maxValue '*' spec.items.widthCoeff)) '+' spec.raw.offsetX)}}
    <g transform="translate({{rawLeftPos}}, {{spec.items.totalHeights.[0]}})">
      <path d="M 0 0 v -{{math (math spec.raw.heightCoeff '*' spec.raw.maxValue) '-' spec.raw.rect.borderRadius}} a {{spec.raw.rect.borderRadius}} {{spec.raw.rect.borderRadius}} 180 0 1 {{spec.raw.rect.width}} 0 v {{math (math spec.raw.heightCoeff '*' spec.raw.maxValue) '-' spec.raw.rect.borderRadius}} z" fill="#F4F4F5"/>
      <path d="M 0 0 v -{{math raw.height '-' spec.raw.rect.borderRadius}} a {{spec.raw.rect.borderRadius}} {{spec.raw.rect.borderRadius}} 180 0 1 {{spec.raw.rect.width}} 0 v {{math raw.height '-' spec.raw.rect.borderRadius}} z" fill="#52525B"/>
      <text x="{{spec.raw.rect.borderRadius}}" y="-{{math raw.height '-' spec.raw.rect.borderRadius}}" text-anchor="middle" font-size="20" font-weight="700" fill="white" dy="6" transform="translate(0, 10)">{{raw.mark}}</text>
      <text x="0" y="-22" text-anchor="end" font--size="18" font-weight="500" fill="#71717A" dy="5" transform="rotate(-90)">نمره کل</text>
      <g transform="scale(1, -1)">
        <rect x="-1" y="0" width="{{math spec.raw.rect.width '+' 2}}" height="1" fill="#FFFFFF" rx="1"/>
        <rect x="-1" y="0" width="{{math spec.raw.rect.width '+' 2}}" height="5" fill="url('#vertical-shadow')" fill-opacity="0.2"/>
      </g>

      <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="{{@root.spec.raw.ticks.line.width}}" y2="-{{tick.bottomPos}}" stroke="#E4E4E7" stroke-dasharray="3" stroke-linecap="round" stroke-width="2"/>
          <g transform="translate({{math @root.spec.raw.ticks.line.width '+' @root.spec.raw.ticks.number.offsetX}}, -{{tick.bottomPos}})">
            <text x="0" y="0" fill="#A1A1AA" text-anchor="end" font-size="14" font-weight="500" dy="4">{{tick.number}}</text>
          </g>
        {{/each}}
      </g>
    </g>
  </g>
  <g transform="translate(0, {{math (math spec.items.ticks.heightOffset '+' spec.items.totalHeights.[0]) '+' spec.items.offsetY2}})">
    <g transform="translate({{spec.items.offsetX}}, 0)">
      {{#each items.[1] 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, {{itemsSpec.rect.borderRadius}})">
             <text x="-{{itemsSpec.label.offsetX}}" y="0" fill="#52525B" text-anchor="start" font-size="16" font-weight="500" dy="3">{{item.label.fr}} <tspan fill="#71717A" font-size="14" font-weight="400">({{item.overallMark.mark}} از {{item.overallMark.maxValue}})</tspan></text>
             <text x="{{math (math item.width '-' itemsSpec.rect.borderRadius) '-' 10}}" y="0" fill="white" text-anchor="middle" font-size="18" font-weight="600" dy="6">{{item.mark}}</text>
           </g>
         </g>
        {{/with}}
      {{/each}}
    </g>
  </g>
</g>

{{/layout}}