{{#> layout}}
    <defs>
    {{#with spec.item.circle}}
      <clipPath id="raw-circle-roll">
        {{gauge R r brs (object start=angles.start end=angles.end) false}}
      </clipPath>
    {{/with}}
  </defs>
  <g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
      {{#each items as | item index |}}
        <g transform="translate({{math index '*' 180}}, 0)">
            <g transform="translate({{@root.spec.item.circle.R}}, {{@root.spec.item.circle.R}})">
                {{#with @root.spec.item.circle}}
                    {{gauge R r (object tl=0 tr=0 bl=0 br=0) (object start=angles.start end=angles.end) direction clip-path="url(#raw-circle-roll)" fill="#F4F4F5" stroke="#E4E4E7"}}
                    {{gauge R r (object tl=0 tr=0 bl=0 br=0) (object start=angles.start end=../zeta) direction clip-path="url(#raw-circle-roll)" fill=../label.fill}}
                {{/with}}
                <text x="0" y="0" text-anchor="middle" font-size="28" font-weight="500" fill="{{item.label.fill}}" dy="8">{{item.mark}}</text>
                {{#each item.ticks as | tick |}}
                    {{setVar "rm" (math (math @root.spec.item.circle.R '+' @root.spec.item.circle.r) '/' 2)}}
                    {{setVar "p" (polarToCartesian rm tick.angle)}}
                    <text x="{{p.x}}" y="{{p.y}}" font-size="14" font-weight="500" fill="#6B7280" text-anchor="middle" dy="2.8" transform="translate(-{{ternary @first @root.spec.item.ticks.number.offset 0}}, -{{ternary @last @root.spec.item.ticks.number.offset 0}})">{{tick.number}}</text>
                {{/each}}
            </g>
            <text x="70" y="156" text-anchor="middle" font-size="18" font-weight="500" fill="{{item.label.fill}}" dy="18">
                {{item.label.fr}}
            </text>
            <text x="70" y="184" text-anchor="middle" font-size="18" font-weight="500" fill="{{item.label.fill}}" dy="18">
                ({{item.label.code}})
            </text>
        </g>
      {{/each}}
      <g transform="translate(0, 249)">
        {{#each selecedTable as | row rid |}}
            <g transform="translate(0, {{math @index '*' 40}})">
                {{setVar 'mark' (ternary (boolean @root.selecedTableRow '==' row.age) '#6B7280' '#F3F4F6')}}
                {{setVar 'markFont' (ternary (boolean @root.selecedTableRow '==' row.age) '#FFFFFF' '#6B7280')}}
                {{#each row.factors as | factor f |}}
                    {{setVar 'stroke' (ternary (boolean @root.selecedTableRow '==' row.age) '#E5E7EB' '#F9FAFB')}}
                    {{setVar 'fontColor' (ternary (boolean @root.selecedTableRow '==' row.age) '#FFFFFF' '#64748B')}}
                    {{setVar 'label' (lookup @root.score f)}}
                    {{setVar 'border' (ternary (boolean @root.selecedTableRow '==' row.age) label.label.fill '#E2E8F0')}}
                    {{setVar 'avgColor' (ternary (boolean @root.selecedTableRow '==' row.age) label.label.fill '#64748B')}}
                    {{setVar 'rect' (ternary (boolean @root.selecedTableRow '==' row.age) label.label.fill '#F1F5F9')}}
                    <g transform="translate({{math (math 128 '+' 53) '*' @index}}, 0)">
                        <path d="M 64 0 l -60 0 a 4 4 90 0 0 -4 4 l 0 24 a 4 4 90 0 0 4 4 l 60 0 l 0 -1 l -60 0 a 3 3 90 0 1 -3 -3 l 0 -24 a 3 3 0 0 1 3 -3 l 60 0 Z" fill="{{border}}"/>
                        {{bar 64 32 (object tl=0 tr=4 bl=0 br=4) (toRad 0) fill=rect transform="translate(64, 0)"}}
                        <text font-size="14" weight="500" fill="{{avgColor}}" x="32" y="16" dy="3.5" text-anchor="middle">{{factor.sd}}</text>
                        <text font-size="14" weight="500" fill="{{fontColor}}" x="98" y="16" dy="3.5" text-anchor="middle">{{factor.avg}}</text>
                        <line y1="16" y2="16" x1="128" x2="181" stroke="{{stroke}}" stroke-width="2"/>
                    </g>
                {{/each}}
                <g transform="translate(709, 0)">
                    <path d="M 11 0 l 56 0 a 4 4 90 0 1 4 4 l 0 24 a 4 4 90 0 1 -4 4 l -56 0 a 4 4 90 0 1 -4 -4 l 0 -4 l -7 -7 c 0 0 -1 -1 0 -2 l 7 -7 l 0 -4 a 4 4 90 0 1 4 -4 Z" fill="{{mark}}"/>
                    <text font-size="15" weight="500" fill="{{markFont}}" x="39" y="16" dy="3.75" text-anchor="middle" direction="ltr">{{replace row.age '-' ' - '}}</text>
                </g>
            </g>
        {{/each}}
        <g transform="translate(0,  {{ternary (boolean col9 '==' true) '400' '360'}})">
            <g transform="translate(244.5, 0)">
                <path d="M 96 0 l -92 0 a 4 4 90 0 0 -4 4 l 0 24 a 4 4 90 0 0 4 4 l 92 0 l 0 -1 l -92 0 a 3 3 90 0 1 -3 -3 l 0 -24 a 3 3 0 0 1 3 -3 l 92 0 Z" fill="#E2E8F0" />
                {{bar 96 32 (object tl=0 tr=4 bl=0 br=4) (toRad 0) fill="#F1F5F9" transform="translate(96, 0)"}}
                <text font-size="14" weight="500" fill="#64748B" x="48" y="16" dy="3.5" text-anchor="middle">انحراف معیار</text>
                <text font-size="14" weight="500" fill="#64748B" x="144" y="16" dy="3.5" text-anchor="middle">میانگین</text>
            </g>
            <g transform="translate(709, 0)">
            <path d="M 11 0 l 56 0 a 4 4 90 0 1 4 4 l 0 24 a 4 4 90 0 1 -4 4 l -56 0 a 4 4 90 0 1 -4 -4 l 0 -4 l -7 -7 c 0 0 -1 -1 0 -2 l 7 -7 l 0 -4 a 4 4 90 0 1 4 -4 Z" fill="#F3F4F6"/>
            <text font-size="15" weight="500" fill="#6B7280" x="39" y="16" dy="3.75" text-anchor="middle">سن</text>
            </g>
        </g>
      </g>
  </g>
{{/layout}}