{{#> layout}}
    <defs>
        <linearGradient id="red-gradient">
            <stop offset="0%" stop-color="#FFE4E6" stop-opacity=".08"/>
            <stop offset="100%" stop-color="#F43F5E" stop-opacity=".08"/>
        </linearGradient>
        <linearGradient id="green-gradient">
            <stop offset="0%" stop-color="#22C55E" stop-opacity=".08"/>
            <stop offset="100%" stop-color="#DCFCE7" stop-opacity=".08"/>
        </linearGradient>
        <linearGradient id="help-gradient">
            <stop stop-color="#22C55E"/>
            <stop offset="0.45" stop-color="white"/>
            <stop offset="1" stop-color="#EF4444"/>
        </linearGradient>
    </defs>
    <g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
        <g transform="translate(113, 0)">
            <text x="0" y="7" text-anchor="end" dy=".3em" fill="#16A34A" font-size="11" font-weight="500" opacity="0.5">کارکرد سالم</text>
            <text x="446" y="7" text-anchor="start" dy=".3em" fill="#DC2626" font-size="11" font-weight="500" opacity="0.5">کارکرد ناسالم</text>
            <rect y="12" width="446" height="2" fill="url(#help-gradient)" fill-opacity="0.1"/>
        </g>
        <g transform="translate(0, 38)">
            {{#each scores}}
                <g transform="translate(0, {{math 94 '*' @index}})">
                    <text x="100" y="35.5" text-anchor="start" dy=".3em" fill="#4B5563" font-size="14" font-weight="500">{{label.fr}}</text>
                    <text text-anchor="middle" x="129" dy=".3em" y="60" fill="#9CA3AF" font-size="12" font-weight="400">1</text>
                    <text text-anchor="middle" x="549" dy=".3em" y="60" fill="#9CA3AF" font-size="12" font-weight="400">4</text>
                    {{bar greenLiene 24 (object tr=0 tl=4 br=0 bl=4) (toRad 0) fill="url(#green-gradient)" transform="translate(116, 24)"}}
                    <g transform="translate({{greenLiene}}, 0)">
                        {{bar redLine 24 (object tr=4 tl=0 br=4 bl=0) (toRad 0) fill="url(#red-gradient)" transform="translate(116, 24)"}}
                    </g>
                    <g transform="translate(128, 20)">
                        <text text-anchor="middle" dy=".3em" y="-13" x="{{math (math avgSelected '*' 14) '+' 2}}" fill="{{ternary (boolean label.avg '>=' label.CoP) '#DC2626' '#16A34A'}}" font-size="16" font-weight="700">{{avgText}}</text>
                        {{#each elements}}
                        <g transform="translate({{math @index '*' 14}}, 0)">
                            {{#if (boolean type '==' 'selected')}}
                                {{bar 4 28 (object tr=2 tl=2 br=0 bl=0) (toRad 0) fill=color transform="translate(-1, 0)"}}
                            {{else if (boolean (boolean type '==' 'z') '||' (boolean isCoP '==' true))}}
                                <rect width="2" height="16" rx="1" y="8" fill="{{color}}" />
                            {{else}}
                                <rect width="2" height="12" rx="1" y="10" fill="{{color}}" />
                            {{/if}}
                            {{#if (boolean isCoP '==' true)}}
                                <text text-anchor="middle" dy=".3em" y="40" x="1" fill="#78716C" font-size="12" font-weight="400">{{../label.CoPText}}</text>
                            {{/if}}
                        </g>
                        {{/each}}
                    </g>
                    <text text-anchor="start" direction="ltr">
                        <tspan x="577" y="36.5" dy=".3em" fill="#6B7280" font-size="16" font-weight="600">{{mark}}</tspan>
                        <tspan y="36.5" dy=".3em" fill="#6B7280" font-size="12" font-weight="300">/</tspan>
                        <tspan y="36.5" dy=".3em" fill="#6B7280" font-size="13" font-weight="400">{{label.max}}</tspan>
                    </text>
                </g>
            {{/each}}
        </g>
    </g>
{{/layout}}