{{#> layout}}
<defs>
    <linearGradient id="line-bar" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#4CBFF5;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#0369A1;stop-opacity:1" />
    </linearGradient>

    <linearGradient id="line-raw" x1="0%" y1="100%" x2="0%" y2="0%">
          <stop offset="0%" style="stop-color:#A1A1AA;stop-opacity:1"/>
          <stop offset="100%" style="stop-color:#52525B;stop-opacity:1"/>
        </linearGradient>
</defs>
<g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
    {{bar 4 480 (object tr=2 tl=2 bl=2 br=2) (toRad 0) fill="#E4E4E7" transform="translate(139.5, 19)"}}

    {{#with factors}}
        {{#each this}}
            <g transform="translate(0, {{math 53 '+' (math @key '*' 53)}})">
                <rect width="{{math label.max '*' 5}}" height="4px" fill="#F4F4F5" transform="translate(143.5, -4)"/>
                {{#if (boolean mark '>=' 2)}}
                    {{bar (math 5 '*' mark) 12 (object tr=12 tl=0 bl=0 br=0) (toRad 0) fill="url(#line-bar)" transform="translate(143.5, -12)"}}
                    <text x="{{math 143.5 '+' (math 5 '*' mark)}}" y="-18px" text-anchor="middle" font-weight="500" font-size="20px" fill="#075985">{{mark}}</text>
                {{else}}
                    {{bar (math 1 '+' (math 2 '*' mark)) 12 (object tr=(math 3 '*' mark) tl=0 bl=0 br=0) (toRad 0) fill="url(#line-bar)" transform="translate(143.5, -12)"}}
                    <text x="{{math 146 '+' 2}}" y="-18px" text-anchor="middle" font-weight="500" font-size="20px" fill="#075985">{{mark}}</text>
                {{/if}}
                <text x="{{math 159.5 '+' (math label.max '*' 5)}}" text-anchor="end" font-weight="400" font-size="14px" fill="#3F3F46">{{label.max}}</text>
                <text x="127.5" text-anchor="start" font-weight="400" font-size="18px" fill="#075985">{{label.fr}}</text>
            </g>
        {{/each}}
    {{/with}}
        <g transform="translate(636.5, 0)">
            <text x="5" y="15px" text-anchor="middle" font-weight="400" font-size="20px" fill="#71717A">{{raw.label.max}}</text>
            <text x="22" y="{{math 525 '-' (math 2 '*' raw.mark)}}px" text-anchor="end" font-weight="500" font-size="28px" fill="#3F3F46">{{raw.mark}}</text>
            <rect width="6px" height="480px" fill="#F4F4F5" transform="translate(0, 38)"/>
            {{bar 10 (math 2 '*' raw.mark) (object tr=10 tl=0 bl=0 br=0) (toRad 0) fill="url(#line-raw)" transform=(concat "translate(0, " (concat
            (math 518 '-' (math 2 '*' raw.mark))
            ")"))}}
            <rect width="14px" height="2px" fill="#E4E4E7" transform="translate(-2, 516)"/>
            <text text-anchor="start" font-weight="400" font-size="18px" fill="#3F3F46" transform="rotate(270, -10, 0) translate(-475, 0)">نمره کل</text>
        </g>
</g>
{{/ layout}}