{{#> layout}}


<defs>
    {{#with section2.circle.circle}}
      <clipPath id="raw-circle-roll">
        {{gauge R r brs (object start=angles.start end=angles.end) false}}
      </clipPath>
    {{/with}}
    {{#with section6.gauge.circle.circle}}
      <clipPath id="raw-circle6-roll">
        {{gauge R r brs (object start=angles.start end=angles.end) false}}
      </clipPath>
    {{/with}}
    <clipPath id="bar64x16">
        {{bar 64 16 (object tr=8 tl=0 br=8 bl=0) (toRad 0)}}
    </clipPath>
    <clipPath id="bar80x16">
        {{bar 80 16 (object tr=8 tl=0 br=8 bl=0) (toRad 0)}}
    </clipPath>
    <clipPath id="bar329x12">
        {{bar 329 12 (object tr=12 tl=0 br=0 bl=0) (toRad 0)}}
    </clipPath>
    <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>
  </defs>

<g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
    {{!-- RAW 1 --}}
    <g>
        {{!-- SECTION 5 --}}
        <g>
            {{bar 260 40 (object tr=0 tl=0 bl=12 br=12) (toRad 0) fill="#F8FAFC" transform="translate(0, 168)"}}
            {{bar 260 208 (object tr=12 tl=12 bl=12 br=12) (toRad 0) stroke="#CBD5E1" fill="none"}}
            <g transform="translate(215.5, 168)">
                {{bar 25 25 (object tr=8 br=8 bl=8 tl=8) (toRad 0) fill="none" stroke="#E2E8F0" transform="translate(-25, 7.5)"}}
                <text x="-12.5" y="20" text-anchor="middle" dy="5" font-size="14" font-weight="500" fill="#475569">5  </text>
                <text x="-33" y="20" dy=".30em" font-size="14" font-weight="400" fill="#52525B">دیدگاه‌ها و علایق مشترک</text>
            </g>

            <g transform="translate(115.5, 116.8)">
                {{#with section5}}
                <text x="0" y="-6" font-size="20" font-weight="500" fill="#BE185D" text-anchor="middle" dy="8">{{item.mark}}</text>
                <text x="0" y="6" font-size="10" font-weight="400" fill="#4B5563" text-anchor="middle" dy="8">%{{percentage.mark}}</text>
                {{#with circle.circle as | circleSpec |}}
                    <circle cx="0" cy="0" r="{{circleSpec.center.radius}}" stroke="#D1D5DB" fill="none"/>
                    {{gauge circleSpec.main.R circleSpec.main.r circleSpec.main.brs circleSpec.main.angles circleSpec.main.direction fill=circleSpec.main.base.fill stroke=circleSpec.main.base.stroke}}
                    {{gauge circleSpec.main.R circleSpec.main.r circleSpec.main.brs (object start=circleSpec.main.angles.start end=../item.angle) circleSpec.main.direction fill=circleSpec.main.body.fill stroke=circleSpec.main.body.stroke}}
                    {{setVar "p1" (polarToCartesian circleSpec.center.radius ../item.angle)}}
                    {{setVar "p2" (polarToCartesian circleSpec.main.R ../item.angle)}}
                    <line x1="{{p1.x}}" y1="{{p1.y}}" x2="{{p2.x}}" y2="{{p2.y}}" stroke="#6B7280"/>
                {{/with}}
                <g font-size="14" font-weight="400" fill="#A1A1AA">
                    {{#each item.stops as | stop index |}}
                    {{#with ../circle as | itemSpec |}}
                        {{setVar "p" (polarToCartesian (math itemSpec.circle.main.R '+' 10) stop.angle)}}
                        {{setVar "betMinus90And90" (boolean (boolean stop.angle '>' (toRad -90)) '&&' (boolean stop.angle '<' (toRad 90)))}}
                        <text x="{{p.x}}" y="{{p.y}}" text-anchor="{{ternary betMinus90And90 'end' 'start'}}" dy="0">{{stop.mark}}</text>
                    {{/with}}
                    {{/each}}
                </g>
                {{/with}}
            </g>
        </g>

        {{!-- SECTION 3 --}}
        <g transform="translate(284, 0)">
            {{bar 260 40 (object tr=0 tl=0 bl=12 br=12) (toRad 0) fill="#F8FAFC" transform="translate(0, 168)"}}
            {{bar 260 208 (object tr=12 tl=12 bl=12 br=12) (toRad 0) stroke="#CBD5E1" fill="none"}}
            <g transform="translate(212, 168)">
                {{bar 25 25 (object tr=8 br=8 bl=8 tl=8) (toRad 0) fill="none" stroke="#E2E8F0" transform="translate(-25, 7.5)"}}
                <text x="-12.5" y="20" text-anchor="middle" dy="5" font-size="14" font-weight="500" fill="#475569">3 </text>
                <text x="-33" y="20" dy=".30em" font-size="14" font-weight="400" fill="#52525B">ملاک‌های انتخاب همسر</text>
            </g>
            <g transform="translate(26.5, 116)">
                {{#each (array 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100)}}
                    {{bar 6 (math 4 '+' (math @key '*' 4)) (object tl=2 tr=2 bl=2 br=2) (toRad 180)
                    fill=(ternary (boolean @key '>=' @root.section3.total.mark) '#A1A1AA' '#65A30D')
                    opacity=(math this '/' 100)
                    transform=(concat "translate(" (concat (math @key '*' 9) ", 0)"))}}
                {{/each}}
                <text transform="translate({{section3.total.ml}}, {{math -14 '-' (math section3.total.mark '*' 4) }}) rotate(-30, 0, 0)"
                    text-anchor="{{ternary (boolean section3.total.mark '>=' 5 ) 'start' 'end'}}" font-size="14"  font-weight="400" fill="#4B5563">%{{section3.percentage.mark}}</text>

                <text x="{{section3.total.ml}}" y="10"  font-weight="500" dy="14" text-anchor="middle" font-size="22" fill="#4D7C0F">{{section3.total.mark}}</text>
                <text x="193" y="0"  font-weight="400" text-anchor="end" font-size="14px" fill="#4B5563">{{section3.total.label.max}}</text>
            </g>
        </g>

        {{!-- SECTION 2 --}}
        <g transform="translate(568, 0)">
            {{bar 260 40 (object tr=0 tl=0 bl=12 br=12) (toRad 0) fill="#F8FAFC" transform="translate(0, 168)"}}
            {{bar 260 208 (object tr=12 tl=12 bl=12 br=12) (toRad 0) stroke="#CBD5E1" fill="none"}}
            <g transform="translate(165.5, 168)">
                {{bar 25 25 (object tr=8 br=8 bl=8 tl=8) (toRad 0) fill="none" stroke="#E2E8F0" transform="translate(-25, 7.5)"}}
                <text x="-12.5" y="20" text-anchor="middle" dy="5" font-size="14" font-weight="500" fill="#475569">2</text>
                <text x="-33" y="20" dy=".30em" font-size="14" font-weight="400" fill="#52525B">آشنایی</text>
            </g>
            <g transform="translate(130, 85)">
                {{#with section2}}
                    {{#with circle.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=../circle.fill fill-opacity=../raw.opacity}}
                    {{/with}}
                    <text x="0" y="0" text-anchor="middle" font-size="28" font-weight="500" fill="{{circle.fill}}">{{mark}}</text>
                    <text x="0" y="22" text-anchor="middle" font-size="14" font-weight="400" fill="{{circle.fill}}">%{{percentage.mark}}</text>
                    {{setVar "rm" (math (math circle.circle.R '+' circle.circle.r) '/' 2)}}
                    {{setVar "p" (polarToCartesian rm start.angle)}}
                    <text x="{{math p.x '-' 8}}" y="{{p.y}}" font-size="14" font-weight="500" fill="#6B7280" text-anchor="middle" dy="4" transform="translate(-{{ternary @first ../circle.ticks.number.offset 0}}, -{{ternary @last ../circle.ticks.number.offset 0}})">{{start.number}}</text>

                    {{setVar "rm" (math (math circle.circle.R '+' circle.circle.r) '/' 2)}}
                    {{setVar "p" (polarToCartesian rm end.angle)}}
                    <text x="{{p.x}}" y="{{math p.y '-' 8}}" font-size="14" font-weight="500" fill="#6B7280" text-anchor="middle" transform="translate(-{{ternary @first ../circle.ticks.number.offset 0}}, -{{ternary @last ../circle.ticks.number.offset 0}})">{{end.number}}</text>
                {{/with}}
            </g>
        </g>
    </g>

    {{!-- RAW 2 --}}
    <g transform="translate(0, 232)">
        {{!-- Section 4 --}}
        <g transform="translate(284, 0)">
            {{bar 544 40 (object tr=0 tl=0 bl=12 br=12) (toRad 0) fill="#F8FAFC" transform="translate(0, 362)"}}
            {{bar 544 402 (object tr=12 tl=12 bl=12 br=12) (toRad 0) stroke="#CBD5E1" fill="none"}}
            <g transform="translate(342.5, 362)">
                {{bar 25 25 (object tr=8 br=8 bl=8 tl=8) (toRad 0) fill="none" stroke="#E2E8F0" transform="translate(-25, 7.5)"}}
                <text x="-12.5" y="20" text-anchor="middle" dy="5" font-size="14" font-weight="500" fill="#475569">4</text>
                <text x="-33" y="20" dy=".30em" font-size="14" font-weight="400" fill="#52525B">هماهنگی خانواده‌ها</text>
            </g>

            {{!-- Seperator --}}
            <g>
                <line x1="272" y1="24" x2="272" y2="84" stroke="#CBD5E1" stroke-linecap="round" stroke-dasharray="6 6"/>
                <line x1="12" y1="116" x2="532" y2="116" stroke="#CBD5E1" stroke-linecap="round" stroke-dasharray="6 6"/>
                <line x1="12" y1="240" x2="532" y2="240" stroke="#CBD5E1" stroke-linecap="round" stroke-dasharray="6 6"/>
            </g>

            {{!-- SubSection 1 --}}
            <g transform="translate(0, 25)">
                {{#with section4.first}}
                    <text x="27" y="29" dy="5" font-size="12" font-weight="400" fill="#4B5563" text-anchor="end">بخش اول</text>
                    <rect x="90" y="30" width="120" height="4" fill="#E5E7EB" />
                    {{bar (math 10 '*' total.mark) 12 (object tr=0 tl=2 bl=2 br=0) (toRad 0) fill="#15803D" transform="translate(90, 26)"}}
                    <line x1="{{math 90 '+' (math 10 '*' total.mark)}}" y1="24" x2="{{math 90 '+'(math 10 '*' total.mark)}}" y2="40" stroke="#15803D"/>
                    <text x="230" y="29" dy="5" font-size="12" font-weight="400" fill="#6B7280" text-anchor="end">12</text>
                    <text x="{{math 90 '+' (math 10 '*' total.mark)}}" y="2" dy="14" font-size="22" font-weight="500" fill="#15803D" text-anchor="middle">{{total.mark}}</text>
                    <text x="{{math 90 '+' (math 10 '*' total.mark)}}" y="48" dy="9.5" font-size="14" font-weight="400" fill="#4B5563" text-anchor="middle">%{{percentage.mark}}</text>
                {{/with}}
            </g>

            {{!-- SubSection 4 --}}
            <g transform="translate(303, 25)">
                {{#with section4.fourth}}
                    <text x="0" y="29" dy="5" font-size="12" font-weight="400" fill="#6B7280">10</text>
                    <rect x="31" y="30" width="120" height="4" fill="#E5E7EB" />
                    {{bar (math 12 '*' total.mark) 12 (object tr=0 tl=2 bl=2 br=0) (toRad 0) fill="#15803D" transform="translate(-151, 26) rotate(180, 151, 6)"}}
                    <line x1="{{math 31 '+' (math 120 '-' (math 12 '*' total.mark))}}" y1="24" x2="{{math 31 '+' (math 120 '-' (math 12 '*' total.mark))}}" y2="40" stroke="#15803D"/>
                    <text x="159" y="29" dy="5" font-size="12" font-weight="400" fill="#4B5563" text-anchor="end">بخش چهارم</text>
                    <text x="{{math 31 '+' (math 120 '-' (math 12 '*' total.mark))}}" y="2" dy="14" font-size="22" font-weight="500" fill="#15803D" text-anchor="middle">{{total.mark}}</text>
                    <text x="{{math 31 '+' (math 120 '-' (math 12 '*' total.mark))}}" y="48" dy="9.5" font-size="14" font-weight="400" fill="#4B5563" text-anchor="middle">%{{percentage.mark}}</text>
                {{/with}}
            </g>

            {{!-- SubSection 3 --}}
            <g transform="translate(27, 148)">
                {{#with section4.third}}
                <text x="0" y="29" dy="5" font-size="12" font-weight="400" fill="#4B5563" text-anchor="end">بخش سوم</text>
                <g transform="translate(100, 0)">
                    <g transform="translate(0, 6)">
                        <text x="91" y="10" font-size="14" dy="0.25em" font-weight="400" fill="#4B5563" text-anchor="start">همسانی خانواده</text>
                        <g transform="translate(98, 0)">
                            {{bar 64 16 (object tr=8 tl=0 br=8 bl=0) (toRad 0) clip-path="url(#bar64x16)" fill="#EDE9FE"}}
                            {{bar (math 2 '*' family.mark) 16 (object tr=8 tl=0 br=8 bl=0) (toRad 0) clip-path="url(#bar64x16)" fill="#8B5CF6"}}
                            <text x="70" y="10" dy="0.25em" text-anchor="start" direction="ltr">
                                <tspan font-size="16" font-weight="400" fill="#7C3AED">{{family.mark}}</tspan>
                                <tspan font-size="14" font-weight="400" dx="-3" fill="#4B5563">/ 32 </tspan>
                            </text>
                            <rect x="121" y="0" rx="4" fill="#F5F3FF" width="34" height="16" />
                            <text x="138" y="9" dy="0.25em" text-anchor="middle" font-weight="400" font-size="12" fill="#8B5CF6">%{{family.percentage}}</text>
                        </g>
                    </g>
                    <g transform="translate(0, 37)">
                        <text x="91" y="10" font-size="14" dy="0.25em" font-weight="400" fill="#4B5563" text-anchor="start">همسانی تربیتی</text>
                        <g transform="translate(98, 0)">
                            {{bar 80 16 (object tr=8 tl=0 br=8 bl=0) (toRad 0) clip-path="url(#bar80x16)" fill="#EDE9FE"}}
                            {{bar (math 2 '*' educational.mark) 16 (object tr=8 tl=0 br=8 bl=0) (toRad 0) clip-path="url(#bar80x16)" fill="#8B5CF6"}}
                            <text x="88" y="10" dy="0.25em" text-anchor="start" direction="ltr">
                                <tspan font-size="16" font-weight="400" fill="#7C3AED">{{educational.mark}}</tspan>
                                <tspan font-size="14" font-weight="400" dx="-3" fill="#4B5563">/ 40</tspan>
                            </text>
                            <rect x="140" y="0" rx="4" fill="#F5F3FF" width="34" height="16" />
                            <text x="157" y="9" dy="0.25em" text-anchor="middle" font-weight="400" font-size="12" fill="#8B5CF6">%{{educational.percentage}}</text>
                        </g>
                    </g>
                    <rect x="97" y="0" width="1" height="60" rx="0.25" fill="#FFFFFF" style="filter: drop-shadow(2px 0px 2px rgba(0,0,0, .8));"/>
                </g>
                <g transform="translate(409, 6)">
                    {{bar 48 48 (object tr=8 br=8 bl=8 tl=0) (toRad 0) fill="none" stroke="#EC4899" stroke-width="2"}}
                    <text x="24" y="10" font-size="20" dy=".65em" font-weight="500" fill="#EC4899" text-anchor="middle">{{total.mark}}</text>

                    <text x="24" y="29" font-size="12" dy=".75em" font-weight="400" fill="#6B7280" text-anchor="middle">%{{percentage.mark}}</text>

                    <text transform="translate(65, 23) rotate(-90, 0, 0)" font-size="12" font-weight="400" fill="#4B5563" text-anchor="middle">نمره کل</text>

                </g>
                {{/with}}
            </g>

            {{!-- Total --}}
            <g transform="translate(39, 273)">
                <text x="0" y="31.5" dy=".25em" font-size="14" font-weight="500" fill="#075985" text-anchor="end">نمره کل محور ۴</text>
                <text x="448" y="31.5" dy=".4em" font-size="14" font-weight="400" fill="#374151" text-anchor="end">94</text>
                <text x="{{math 103 '+' (math 3.5 '*' section4.total.total.mark)}}" y="50" dy=".75em" font-size="12" font-weight="400" fill="#4B5563" text-anchor="middle">%{{section4.total.total.mark}}</text>
                <text x="{{math 103 '+' (math 3.5 '*' section4.total.total.mark)}}" y="0" dy=".75em" font-size="20" font-weight="600" fill="#075985" text-anchor="middle">{{section4.total.percentage.mark}}</text>
                {{bar 4 24 (object tr=2 br=2 bl=2 tl=2) (toRad 0) fill="#E5E7EB" transform="translate(99, 20)"}}
                <rect x="103" y="34" width="329" height="4" fill="#F3F4F6" />
                {{bar (math 3.5 '*' section4.total.total.mark) 12 (object tr=12 tl=0 br=0 bl=0) (toRad 0) fill="url(#line-bar)" clip-path="url(#bar329x12)" transform="translate(103, 26)"}}
            </g>
        </g>

        {{!-- Section 6 --}}
        <g transform="translate(0, 0)">
            {{bar 260 40 (object tr=0 tl=0 bl=12 br=12) (toRad 0) fill="#F8FAFC" transform="translate(0, 362)"}}
            {{bar 260 402 (object tr=12 tl=12 bl=12 br=12) (toRad 0) stroke="#CBD5E1" fill="none"}}
            <g transform="translate(229.5, 362)">
                {{bar 25 25 (object tr=8 br=8 bl=8 tl=8) (toRad 0) fill="none" stroke="#E2E8F0" transform="translate(-25, 7.5)"}}
                <text x="-12.5" y="20" text-anchor="middle" dy="5" font-size="14" font-weight="500" fill="#475569">6</text>
                <text x="-33" y="20" dy=".30em" font-size="14" font-weight="400" fill="#52525B">احساس علاقه‌مندی و نگرانی‌ها</text>
            </g>
            {{!-- SubSection 1 --}}
            <g transform="translate(24.5, 26)">
                <line x1="0" x2="212" y1="183.5" y2="183.5" stroke="#9CA3AF" />
                <g transform="translate(5, 31)">
                    <text x="42.6" y="161" dy="1em" font-size="14" font-weight="400" fill="#A21CAF" text-anchor="middle">علاقه‌مندی‌ها</text>
                    <text x="42.6" y="0" dy=".75" font-size="12" font-weight="400" fill="#6B7280" text-anchor="middle">32</text>

                    {{bar 10 128 (object tr=2 tl=2 br=0 bl=0) (toRad 0) fill="#F3F4F6" transform="translate(37.6, 24)" }}
                    {{bar 10 (math 4 '*' section6.favorites.total.mark) (object tr=0 tl=0 br=2 bl=2) (toRad 0) fill="#C026D3" transform="translate(37.6, 152) rotate(180, 5, 0)" }}
                    <text x="30" y="{{math 24 '+' (math 128 '-' (math 4 '*' section6.favorites.total.mark))}}" dy="-.75" font-size="14" font-weight="400" fill="#4B5563" text-anchor="start">%{{section6.favorites.percentage.mark}}</text>
                    <text x="56" y="{{math 24 '+' (math 128 '-' (math 4 '*' section6.favorites.total.mark))}}" dy="-.75" font-size="18" font-weight="500" fill="#C026D3" text-anchor="end">{{section6.favorites.total.mark}}</text>
                </g>
                <g transform="translate(125, -7.2)">
                    <text x="42.6" y="199.2" dy="1em" font-size="14" font-weight="400" fill="#C2410C" text-anchor="middle">نگرانی‌ها</text>
                    <text x="42.6" y="{{ternary section6.worries.has_extend 0 7.2}}" dy=".75" font-size="12" font-weight="400" fill="#6B7280" text-anchor="middle">{{section6.worries.max}}</text>
                    {{bar 10 section6.worries.height (object tr=0 tl=0 br=2 bl=2) (toRad 0) fill="#F3F4F6" transform="translate(37.6, 190.2) rotate(180, 5, 0)" }}
                    {{bar 10 (math 1.2 '*' section6.worries.total.mark) (object tr=0 tl=0 br=2 bl=2) (toRad 0) fill="#EA580C" transform="translate(37.6, 190.2) rotate(180, 5, 0)" }}
                    <text x="30" y="{{math (ternary section6.worries.has_extend 27.2 31.2) '+' (math section6.worries.height '-' (math 1.2 '*' section6.worries.total.mark))}}" dy="-.75" font-size="14" font-weight="400" fill="#4B5563" text-anchor="start">%{{section6.worries.percentage.mark}}</text>
                    <text x="56" y="{{math (ternary section6.worries.has_extend 27.2 31.2) '+' (math section6.worries.height '-' (math 1.2 '*' section6.worries.total.mark))}}" dy="-.75" font-size="18" font-weight="500" fill="#EA580C" text-anchor="end">{{section6.worries.total.mark}}</text>
                </g>
            </g>
            <line x1="12.5" x2="236" y1="254" y2="254"  stroke="#CBD5E1" stroke-linecap="round" stroke-dasharray="6 6" />
            {{!-- Total --}}
            <g transform="translate(60.5, 268)">
                <text x="40" y="0" dy="1em" text-anchor="middle" font-size="12" font-weight="400" fill="#64748B">نمره کل محور 6</text>
                <g transform="translate(83, 40)">
                {{#with section6.gauge}}
                    {{#with circle.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-circle6-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-circle6-roll)" fill=../circle.fill fill-opacity=../raw.opacity}}
                    {{/with}}
                    <text x="0" y="0" text-anchor="middle" font-size="20" font-weight="500" fill="#475569">{{mark}}</text>
                    <text x="0" y="15" text-anchor="middle" font-size="12" font-weight="400" fill="#64748B">%{{percentage.mark}}</text>
                    
                    {{setVar "rm" (math (math circle.circle.R '+' circle.circle.r) '/' 2)}}
                    {{setVar "p" (polarToCartesian rm end.angle)}}
                    <text x="{{math p.x '-' 23}}" y="{{math p.y '+' 5}}" font-size="12" font-weight="400" fill="#64748B" text-anchor="middle" transform="translate(-{{ternary @first ../circle.ticks.number.offset 0}}, -{{ternary @last ../circle.ticks.number.offset 0}})">{{end.number}}</text>
                {{/with}}
                </g>
            </g>

        </g>

    </g>
</g>
{{/ layout}}