{{#> layout}}
  <defs>
    <filter id="row" x="0" y="0" width="300.002" height="7" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
    <feOffset dy="-1"/>
    <feGaussianBlur stdDeviation="1.5"/>
    <feComposite in2="hardAlpha" operator="out"/>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4762_129675"/>
    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4762_129675" result="shape"/>
    </filter>
    <clipPath id="bg-h">
      {{bar 28 300 (object tr=4 tl=4 br=0 bl=0) (toRad 0) fill='#F8FAFC'}}
    </clipPath>
    <clipPath id="gu">
      {{gauge 70 (math 70 '*' 0.7) (object tl=6 tr=6 bl=6 br=6) (object start=groups.[0].circle.circle.angles.start end=groups.[0].circle.circle.angles.end) direction fill='#F1F5F9'}}
    </clipPath>
    {{#each colors as |color index|}}
      <linearGradient id="h-{{index}}" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0" stop-color="{{color.[0]}}"/>
        <stop offset="1" stop-color="{{color.[1]}}" />
      </linearGradient>
      <linearGradient id="c-{{index}}" x1="140" y1="0" x2="0" y2="140" gradientUnits="userSpaceOnUse">
        <stop stop-color="{{color.[2]}}"/>
        <stop offset="0.5" stop-color="{{color.[0]}}"/>
        <stop offset="1" stop-color="{{color.[0]}}"/>
      </linearGradient>
    {{/each}}
  </defs>
  <g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
    <text x="0" y="31" font-size="12" font-weight="400" text-anchor="end" dy=".85em" fill="#94A3B8">نمره خام</text>
    <path d="M 45.5 39 l 7 0 m 0 0 l -3 -3 m 3 3 l -3 3" stroke="#94A3B8" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
    {{#with groups.[0]}}
      <g transform="translate(0, 0)">
        <g transform="translate(29, 31)">
          <g transform="translate(77, 27)">
            {{#each items as |factor fi|}}
              <g transform="translate({{math 76 '*' fi}}, 0)">
                <text x="14" y="-19" text-anchor="middle" dy=".3em" fill="#64748B" direction="ltr">
                  <tspan fill="#4F46E5" font-size="16" font-weight="700">
                    {{mark}}
                  </tspan>
                  <tspan font-size="12" font-weight="300">/</tspan>
                  <tspan font-size="13" font-weight="400">{{label.max}}</tspan>
                </text>
                <text x="14" y="321" font-size="14" font-weight="400" text-anchor="middle" dy=".3em" fill="#334155">{{label.fr}}</text>
                {{bar 28 300 (object tr=4 tl=4 br=0 bl=0) (toRad 0) fill='#F8FAFC'}}
              </g>
            {{/each}}
          </g>
          <g transform="translate(0, 27)">
            <line x1="40" y1="1" x2="294" y2="1" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <text x="0" font-size="12" font-weight="400" text-anchor="end" dy=".85em" fill="#94A3B8">۱۰۰ ٪</text>
            <line x1="40" y1="76" x2="294" y2="76" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="40" y1="151" x2="294" y2="151" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <text x="0" y="150" font-size="12" font-weight="400" text-anchor="end" dy=".3em" fill="#94A3B8">۵۰ ٪</text>
            <line x1="40" y1="226" x2="294" y2="226" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
          </g>
          <g transform="translate(77, 27)">
            {{#each items as |factor fi|}}
              <g transform="translate({{math 76 '*' fi}}, {{math 300 '-' (math factor.percentage '*' 300)}})">
                {{bar 28 (math factor.percentage '*' 300) (object tr=4 tl=4 br=0 bl=0) (toRad 0) fill=../colors.[3] clip-path="url(#bg-h)"}}
                <text y="14" x="{{ternary (boolean factor.percentageText '<=' 24) '8' '-8'}}" font-size="16" font-weight="600" text-anchor="{{ternary (boolean factor.percentageText '<=' 24) 'end' 'start'}}" dy=".3em" fill="{{ternary (boolean factor.percentageText '<=' 24) ../colors.[0] '#FFFFFF'}}" transform="translate(0,0) rotate(-90 0 0)" >{{percentageText}} ٪</text>
              </g>
            {{/each}}
          </g>
        </g>
        <g opacity="0.5" filter="url(#row)" transform="translate(26,354)">
          <line x1="3.5" y1="4.5" x2="296.502" y2="4.5" stroke="white" stroke-linecap="round"/>
        </g>
        <g transform="translate(125.5, 444)">
          <g transform="translate(70, 70)">
            {{gauge 70 (math 70 '*' 0.7) (object tl=6 tr=6 bl=6 br=6) (object start=circle.circle.angles.start end=circle.circle.angles.end) direction fill='#F1F5F9'}}
            {{gauge 70 (math 70 '*' 0.7) (object tl=6 tr=0 bl=6 br=0) (object start=circle.circle.angles.start end=circle.zeta) direction fill=colors.[4] clip-path='url(#gu)'}}
            <text x="0" y="-21" font-size="24" font-weight="600" text-anchor="middle" dy=".85em" fill="{{colors.[0]}}">{{total.percentageText}} ٪</text>
            <text x="0" y="11" font-size="15" font-weight="500" text-anchor="middle" dy=".85em" fill="#64748B">{{total.mark}} از {{total.label.max}}</text>
            <text x="-11" y="-59.5" font-size="14" font-weight="500" text-anchor="middle" dy=".3em" fill="#64748B">0</text>
            <text x="-59.5" y="-12.5" font-size="14" font-weight="500" text-anchor="middle" dy=".3em" fill="#64748B">100 ٪</text>
          </g>
          <text x="70" y="167.5" font-size="16" font-weight="500" text-anchor="middle" dy=".3em" fill="#475569">{{total.label.fr}}</text>
        </g>
      </g>
    {{/with}}

    <text x="776" y="31" font-size="12" font-weight="400" text-anchor="start" dy=".85em" fill="#94A3B8">نمره خام</text>
    <path d="M 730.5 39 l -7 0 m 0 0 l 3 3 m -3 -3 l 3 -3" stroke="#94A3B8" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
    {{#with groups.[1]}}
      <g transform="translate(388, 0)">
        <g transform="translate(29, 31)">
          <g transform="translate(73, 27)">
            {{#each items as |factor fi|}}
              <g transform="translate({{math 76 '*' fi}}, 0)">
                <text x="14" y="-19" text-anchor="middle" dy=".3em" fill="#64748B" direction="ltr">
                  <tspan fill="#4F46E5" font-size="16" font-weight="700">
                    {{mark}}
                  </tspan>
                  <tspan font-size="12" font-weight="300">/</tspan>
                  <tspan font-size="13" font-weight="400">{{label.max}}</tspan>
                </text>
                <text x="14" y="321" font-size="14" font-weight="400" text-anchor="middle" dy=".3em" fill="#334155">{{label.fr}}</text>
                {{bar 28 300 (object tr=4 tl=4 br=0 bl=0) (toRad 0) fill='#F8FAFC'}}
              </g>
            {{/each}}
          </g>
          <g transform="translate(-4, 27)">
            <line x1="40" y1="1" x2="294" y2="1" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <text x="333" font-size="12" font-weight="400" text-anchor="start" dy=".85em" fill="#94A3B8">۱۰۰ ٪</text>
            <line x1="40" y1="76" x2="294" y2="76" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="40" y1="151" x2="294" y2="151" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <text x="333" y="150" font-size="12" font-weight="400" text-anchor="start" dy=".3em" fill="#94A3B8">۵۰ ٪</text>
            <line x1="40" y1="226" x2="294" y2="226" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
          </g>
          <g transform="translate(73, 27)">
            {{#each items as |factor fi|}}
              <g transform="translate({{math 76 '*' fi}}, {{math 300 '-' (math factor.percentage '*' 300)}})">
                {{bar 28 (math factor.percentage '*' 300) (object tr=4 tl=4 br=0 bl=0) (toRad 0) fill=../colors.[3] clip-path="url(#bg-h)"}}
                <text y="14" x="{{ternary (boolean factor.percentageText '<=' 24) '8' '-8'}}" font-size="16" font-weight="600" text-anchor="{{ternary (boolean factor.percentageText '<=' 24) 'end' 'start'}}" dy=".3em" fill="{{ternary (boolean factor.percentageText '<=' 24) ../colors.[0] '#FFFFFF'}}" transform="translate(0,0) rotate(-90 0 0)" >{{percentageText}} ٪</text>
              </g>
            {{/each}}
          </g>
        </g>
        <g opacity="0.5" filter="url(#row)" transform="translate(62,354)">
          <line x1="3.5" y1="4.5" x2="296.502" y2="4.5" stroke="white" stroke-linecap="round"/>
        </g>
        <g transform="translate(125.5, 444)">
          <g transform="translate(70, 70)">
            {{gauge 70 (math 70 '*' 0.7) (object tl=6 tr=6 bl=6 br=6) (object start=circle.circle.angles.start end=circle.circle.angles.end) direction fill='#F1F5F9'}}
            {{gauge 70 (math 70 '*' 0.7) (object tl=6 tr=0 bl=6 br=0) (object start=circle.circle.angles.start end=circle.zeta) direction fill=colors.[4] clip-path='url(#gu)'}}
            <text x="0" y="-21" font-size="24" font-weight="600" text-anchor="middle" dy=".85em" fill="{{colors.[0]}}">{{total.percentageText}} ٪</text>
            <text x="0" y="11" font-size="15" font-weight="500" text-anchor="middle" dy=".85em" fill="#64748B">{{total.mark}} از {{total.label.max}}</text>
            <text x="-11" y="-59.5" font-size="14" font-weight="500" text-anchor="middle" dy=".3em" fill="#64748B">0</text>
            <text x="-59.5" y="-12.5" font-size="14" font-weight="500" text-anchor="middle" dy=".3em" fill="#64748B">100 ٪</text>
          </g>
          <text x="70" y="167.5" font-size="16" font-weight="500" text-anchor="middle" dy=".3em" fill="#475569">{{total.label.fr}}</text>
        </g>
      </g>
    {{/with}}
    
    <rect x="387" width="1" height="654" rx="0.5" fill="#E2E8F0"/>
  </g>
{{/layout}}