{{#> layout}}
<defs>
    <clipPath id="clip-shape">
        <path
            d="M267.371 78.5C284.9 44.5 316.452 0 342.496 0C368.539 0 400.092 44.5 417.621 78.5C435.15 112.5 465.842 144.16 492.746 157.5C519.65 170.84 555.351 174 567.871 174H645V187.5H690V282H345L0 281.5V187.5H45V174H117.12C129.641 174 165.341 170.84 192.245 157.5C219.15 144.16 249.841 112.5 267.371 78.5Z" />
    </clipPath>
    <linearGradient id="levelgrd" x1="108" y1="0" x2="-7.4" y2="45.2" gradientUnits="userSpaceOnUse">
        <stop stop-color="{{selected.color.[1]}}" />
        <stop offset="1" stop-color="{{selected.color.[0]}}" />
    </linearGradient>
    <linearGradient id="trueItem" x1="26" y1="0" x2="0" y2="26" gradientUnits="userSpaceOnUse">
        <stop stop-color="#F8FAFC"/>
        <stop offset="1" stop-color="#F1F5F9"/>
    </linearGradient>
    <linearGradient id="falseItem" x1="26" y1="0" x2="0" y2="26" gradientUnits="userSpaceOnUse">
    <stop stop-color="#FFF1F2" stop-opacity="0.5"/>
    <stop offset="1" stop-color="#FFE4E6"/>
    </linearGradient>
</defs>
<g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
    <rect x="150.25" y="0.25" width="0.5" height="595.5" rx="0.25" fill="none" stroke="#E2E8F0" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="10 10"/>
    <g transform="translate(3,0)">
        <g transform="translate(201,33)">
            <svg width="600" height="189" viewBox="0 0 600 189" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M222.371 79.5C239.9 45.5 271.452 1 297.496 1C323.539 1 355.092 45.5 372.621 79.5C390.15 113.5 420.842 145.16 447.746 158.5C474.65 171.84 510.351 175 522.871 175H600V188.5H300.5H0V175H36.5601H72.1202C84.6411 175 120.341 171.84 147.245 158.5C174.15 145.16 204.841 113.5 222.371 79.5Z"
                    fill="url(#paint0_linear_20_118)" />
                <g clip-path="url(#clip0_20_118)">
                    <rect width="1" height="14" transform="translate(73 188) rotate(-180)" fill="#CBD5E1" />
                </g>
                <g clip-path="url(#clip1_20_118)">
                    <rect width="1" height="30" transform="translate(148 188) rotate(-180)" fill="#CBD5E1" />
                </g>
                <g clip-path="url(#clip2_20_118)">
                    <rect width="1" height="108" transform="translate(223 188) rotate(-180)" fill="#CBD5E1" />
                </g>
                <g clip-path="url(#clip3_20_118)">
                    <rect width="1" height="188" transform="translate(298 188) rotate(-180)" fill="#CBD5E1" />
                </g>
                <g clip-path="url(#clip4_20_118)">
                    <rect width="1" height="108" transform="translate(373 188) rotate(-180)" fill="#CBD5E1" />
                </g>
                <g clip-path="url(#clip5_20_118)">
                    <rect width="1" height="30" transform="translate(448 188) rotate(-180)" fill="#CBD5E1" />
                </g>
                <g clip-path="url(#clip6_20_118)">
                    <rect width="1" height="14" transform="translate(523 188) rotate(-180)" fill="#CBD5E1" />
                </g>
                <rect y="188" width="600" height="1" rx="0.5" fill="#64748B" />
                <path
                    d="M1 175H72.1202C84.6411 175 120.341 171.84 147.245 158.5C174.15 145.16 204.841 113.5 222.371 79.5C239.9 45.5 271.452 1 297.496 1C323.539 1 355.092 45.5 372.621 79.5C390.15 113.5 420.842 145.16 447.746 158.5C474.65 171.84 510.351 175 522.871 175H599"
                    stroke="#64748B" stroke-width="2" stroke-linecap="round" />
                <defs>
                    <linearGradient id="paint0_linear_20_118" x1="0" y1="90.75" x2="600" y2="90.75"
                        gradientUnits="userSpaceOnUse">
                        <stop stop-color="#FFE4E6" />
                        <stop offset="0.45" stop-color="#FFF1F2" stop-opacity="0.5" />
                        <stop offset="0.5" stop-color="#F8FAFC" />
                        <stop offset="0.55" stop-color="#ECFDF5" stop-opacity="0.5" />
                        <stop offset="1" stop-color="#D1FAE5" />
                    </linearGradient>
                    <clipPath id="clip0_20_118">
                        <rect width="5" height="14" fill="white" transform="translate(75 188) rotate(-180)" />
                    </clipPath>
                    <clipPath id="clip1_20_118">
                        <rect width="5" height="30" fill="white" transform="translate(150 188) rotate(-180)" />
                    </clipPath>
                    <clipPath id="clip2_20_118">
                        <rect width="5.00001" height="108" fill="white" transform="translate(225 188) rotate(-180)" />
                    </clipPath>
                    <clipPath id="clip3_20_118">
                        <rect width="5.00002" height="188" fill="white" transform="translate(300 188) rotate(-180)" />
                    </clipPath>
                    <clipPath id="clip4_20_118">
                        <rect width="5.00001" height="108" fill="white" transform="translate(375 188) rotate(-180)" />
                    </clipPath>
                    <clipPath id="clip5_20_118">
                        <rect width="5" height="30" fill="white" transform="translate(450 188) rotate(-180)" />
                    </clipPath>
                    <clipPath id="clip6_20_118">
                        <rect width="5" height="14" fill="white" transform="translate(525 188) rotate(-180)" />
                    </clipPath>
                </defs>
            </svg>
        </g>
        <text x="201" y="188" dy=".75em" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8"
            direction="ltr">-4σ</text>
        <g transform="translate(273.5, 174)">
            <text dy=".75em" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8"
                direction="ltr">-3σ</text>
            <text dy="1.9em" text-anchor="middle" font-size="12" font-weight="400" fill="#64748B"
                direction="ltr">55</text>
        </g>
        <g transform="translate(348.5, 158)">
            <text dy=".75em" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8"
                direction="ltr">-2σ</text>
            <text dy="1.9em" text-anchor="middle" font-size="12" font-weight="400" fill="#64748B"
                direction="ltr">70</text>
        </g>
        <g transform="translate(416, 80)">
            <text dy=".75em" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8"
                direction="ltr">-1σ</text>
            <text dy="1.9em" text-anchor="middle" font-size="12" font-weight="400" fill="#64748B"
                direction="ltr">85</text>
        </g>
        <g transform="translate(498.5, 0)">
            <text dy=".75em" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8"
                direction="ltr">0</text>
            <text dy="1.9em" text-anchor="middle" font-size="12" font-weight="400" fill="#64748B"
                direction="ltr">100</text>
        </g>
        <g transform="translate(582.5, 80)">
            <text dy=".75em" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8"
                direction="ltr">+1σ</text>
            <text dy="1.9em" text-anchor="middle" font-size="12" font-weight="400" fill="#64748B"
                direction="ltr">115</text>
        </g>
        <g transform="translate(648.5, 158)">
            <text dy=".75em" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8"
                direction="ltr">+2σ</text>
            <text dy="1.9em" text-anchor="middle" font-size="12" font-weight="400" fill="#64748B"
                direction="ltr">130</text>
        </g>
        <g transform="translate(723.5, 174)">
            <text dy=".75em" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8"
                direction="ltr">+3σ</text>
            <text dy="1.9em" text-anchor="middle" font-size="12" font-weight="400" fill="#64748B"
                direction="ltr">145</text>
        </g>
        <text x="800.5" y="188" dy=".75em" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8"
            direction="ltr">+4σ</text>
        <g transform="translate(156, 35)" clip-path="url(#clip-shape)">
            <g transform="translate({{math -185 '+' (math iq '*' 5)}}, 0)">
                <path d="M25.5 205H28.5V0H25.5V205Z" fill="{{indic.color.[0]}}"/>
                <path d="M0 219C0 213.477 4.47715 209 10 209H44C49.5228 209 54 213.477 54 219V234C54 239.523 49.5228 244 44 244H10C4.47715 244 0 239.523 0 234V219Z" fill="{{indic.color.[0]}}"/>
                <path d="M27 203.343L32.6569 209H21.3431L27 203.343Z" fill="{{indic.color.[0]}}"/>
                <text x="27" y="233" text-anchor="middle" font-size="20" font-weight="700" fill="#FFFFFF">{{iqText}}</text>
                <text x="-7" y="227" text-anchor="start" font-size="14" font-weight="500" fill="#334155">{{raw}}</text>
                <text x="-7" y="237" text-anchor="start" font-size="12" font-weight="400" fill="#64748B">نمره خام</text>
                <text x="62" y="227" text-anchor="end" font-size="14" font-weight="500" fill="#334155">{{percentile}}</text>
                <text x="62" y="237" text-anchor="end" font-size="12" font-weight="400" fill="#64748B">رتبه درصدی</text>
                <text x="27" y="245" text-anchor="middle" dy="1em" font-size="14" font-weight="400" fill="#334155">هوشبهر</text>
                <text x="27" y="245" text-anchor="middle" dy="2.75em" font-size="12" font-weight="400" fill="#64748B">(IQ)</text>
            </g>
        </g>

        <g transform="translate(0, 32)">
            {{#each levels as | level key | }}
            <g transform="translate(0, {{math @index '*' 78}})">
                <rect width="108" height="64" rx="8" stroke="#F1F5F9" stroke-width="{{ternary level.selected '0' '1'}}" fill="{{ternary level.selected 'url(#levelgrd)' '#F8FAFC'}}" />
                <text x="54" y="24.5" dy=".2em" text-anchor="middle" font-size="13" font-weight="400"
                    fill="{{ternary level.selected '#FFFFFF' '#475569'}}">{{title}}</text>
                <text x="54" y="42.5" dy=".4em" text-anchor="middle" font-size="12" font-weight="400"
                    fill="{{ternary level.selected '#FFFFFF' '#64748B'}}">
                    {{#if (boolean max '>=' 0)}}
                        {{min}}&#160;{{ternary max ' تا ' ''}}&#160;{{max}}
                    {{else}}
                        {{min}}
                    {{/if}}
                    </text>
            </g>
            {{/each}}
        </g>
        <g transform="translate(256, 338)">
            {{#each questions as | question qi|}}
            <g transform="translate(0, {{math qi '*' 54}})">
                <rect width="432" height="42" rx="8" stroke="#E2E8F0" fill="none" />
                <g transform="translate(16, 8)">
                    {{#each question.items as | item ii|}}
                        <g transform="translate({{math 374 '-' (math ii '*' 34)}}, 0)">  
                            <rect width="26" height="26" rx="6" fill="url(#{{ternary item.isTrue 'trueItem' 'falseItem'}})" opacity="0.5" />
                            <text x="13" y="13" dy=".3em" text-anchor="middle" font-size="13" font-weight="400" fill="{{ternary item.isTrue '#475569' '#F43F5E'}}">{{item.index}}</text>
                        </g>
                    {{/each}}
                </g>
                <text x="451" y="21" dy=".3em" text-anchor="middle" font-size="16" font-weight="600" fill="#94A3B8">{{key}}</text>
                <text x="466.5" y="21" dy=".3em" text-anchor="middle" font-size="16" font-weight="300" fill="#94A3B8">-</text>
                <text x="475" y="21" dy=".3em" text-anchor="end" font-size="18" font-weight="600" fill="question">{{question.length}}</text>
            </g>
            {{/each}}
        </g>
    </g>
</g>
{{/layout}}