{{setVar "angles" (array -146.3 146.3 -33.7 33.7)}}
<g transform="translate(0, 320)">
    <text x="0" y="12.5" font-size="16" font-weight="600" fill="#3F3F46" text-anchor="middle" transform="rotate(-90)" xml:space="preserve">انعطاف‌پذیری:   {{item.marks.flexibility}}</text>
    <g transform="translate(0, -170)">
    <text x="0" y="35" font-size="14" font-weight="400" fill="#71717A" text-anchor="start" transform="rotate(-90)">آشفته</text>
    </g>
    <g transform="translate(0, 160)">
    <text x="0" y="35" font-size="14" font-weight="400" fill="#71717A" text-anchor="start" transform="rotate(-90)">خشک</text>
    </g>
    <line x1="50" y1="206" x2="50" y2="-192" stroke="#3F3F46" stroke-width="2" marker-end="url(#marker1)" />
</g>
<g transform="translate(427.5, 0)">
    <text x="0" y="12.5" font-size="16" font-weight="600" fill="#3F3F46" text-anchor="middle" xml:space="preserve">انسجام:   {{item.marks.cohesion}}</text>
    <text x="-215" y="35" font-size="14" font-weight="400" fill="#71717A" text-anchor="start">از هم گسسته</text>
    <text x="285" y="35" font-size="14" font-weight="400" fill="#71717A" text-anchor="start">در هم تنیده</text>
    <line x1="-295" y1="50" x2="305" y2="50" stroke="#3F3F46" stroke-width="2" marker-end="url(#marker2)" />
</g>
<g transform="translate(132, 126)">
    {{setVar "row1" (array "#FECACA" "#FEF9C3" "#FEF9C3" "#FEF9C3" "#FECACA")}}
    {{setVar "row2" (array "#FEF9C3" "#D1FAE5" "#D1FAE5" "#D1FAE5" "#FEF9C3")}}
    {{setVar "stops" (array 0 15 35 65 85 100)}}
    {{setVar "fills" (array row1 row2 row2 row2 row1)}}
    {{#forLoop 0 5 1}}
    {{#with i as | j |}}
        {{#forLoop 0 5 1}}
        <rect x="{{math j '*' 120}}" y="{{math i '*' 80}}" width="120" height="80" fill="{{lookup (lookup @root.fills j) i}}" />
        {{#if (boolean j '===' 4)}}
            <text x="-20" y="{{math (math i '*' 80) '+' 10}}" font-size="12" font-weight="400" text-anchor="start" fill="#71717A">{{lookup (reverse @root.stops) i}}</text>
            {{#if (boolean i '===' 4)}}
            <text x="-20" y="{{math (math i '+' 1) '*' 80}}" font-size="12" font-weight="400" text-anchor="start" fill="#71717A">{{lookup (reverse @root.stops) (math i '+' 1)}}</text>
            {{/if}} 
            {{#unless @first}}
            <line x1="0" y1="{{math i '*' 80}}" x2="600" y2="{{math i '*' 80}}" stroke="#FFFFFF" />
            {{/unless}}
        {{/if}}
        {{#if (boolean (boolean i '===' 2) '&&' (boolean j '===' 2))}}
            <text x="{{math (math j '*' 120) '+' 60}}" y="{{math (math i '*' 80) '+' 40}}" font-size="14" font-weight="400" text-anchor="middle" fill="#A1A1AA" fill-opacity="0.6" dy="5">دمکراتیک</text>
        {{/if}}
        {{/forLoop}}
        {{#if (boolean j '!==' 0)}}
        <line x1="{{math j '*' 120}}" y1="0" x2="{{math j '*' 120}}" y2="400" stroke="#FFFFFF" />
        {{/if}}
        <text x="{{math j '*' 120}}" y="-20" font-size="12" font-weight="400" text-anchor="start" fill="#71717A">{{lookup @root.stops j}}</text>
        {{#if (boolean j '===' 4)}}
        <text x="{{math (math j '+' 1) '*' 120}}" y="-20" font-size="12" font-weight="400" text-anchor="start" fill="#71717A">{{lookup @root.stops (math j '+' 1)}}</text>
        {{/if}}
    {{/with}}
    {{/forLoop}}
    <rect x="240" y="160" width="120" height="80" fill="none" stroke="#000000" stroke-opacity="0.15" stroke-dasharray="4" />

    <line x1="240" y1="160" x2="-30" y2="-20" stroke="#000000" stroke-opacity="0.15" stroke-dasharray="5" marker-end="url(#pointer1)" />
    <line x1="240" y1="240" x2="-30" y2="420" stroke="#000000" stroke-opacity="0.15" stroke-dasharray="4" marker-end="url(#pointer2)" />
    <line x1="360" y1="160" x2="630" y2="-20" stroke="#000000" stroke-opacity="0.15" stroke-dasharray="4" marker-end="url(#pointer3)" />
    <line x1="360" y1="240" x2="630" y2="420" stroke="#000000" stroke-opacity="0.15" stroke-dasharray="4" marker-end="url(#pointer4)"/>

    <g transform="translate(-50, -33.35)">
    <text x="0" y="0" font-size="14" font-weight="400" text-anchor="start" fill="#A1A1AA" transform="rotate({{math (lookup angles 0) '+' 180}})" dy="3.5">بی‌خیال</text>
    </g>
    <g transform="translate(-50, 433.35)">
    <text x="0" y="0" font-size="14" font-weight="400" text-anchor="start" fill="#A1A1AA" transform="rotate({{math (lookup angles 1) '+' 180}})" dy="3.5">طردکننده</text>
    </g>
    <g transform="translate(650, -33.35)">
    <text x="0" y="0" font-size="14" font-weight="400" text-anchor="end" fill="#A1A1AA" transform="rotate({{lookup angles 2}})" dy="3.5">سهل‌گیر</text>
    </g>
    <g transform="translate(650, 433.35)">
    <text x="0" y="0" font-size="14" font-weight="400" text-anchor="end" fill="#A1A1AA" transform="rotate({{lookup angles 3}})" dy="3.5">مستبد</text>
    </g>

    <g transform="translate(0, 400)">
    <g transform="translate({{item.coords.x}}, -{{item.coords.y}})">
        <circle cx="0" cy="0" r="2.5" fill="black" />
        <circle cx="0" cy="0" r="7.5" fill="black" fill-opacity="0.3" />
    </g>
    </g>
</g>
<g transform="translate(578.5, 586)">
    <g transform="translate(0, 0)">
    <rect x="0" y="0" width="24" height="16" fill="#FECACA" />
    <text x="-10" y="8" font-size="14" font-weight="400" fill="#71717A" text-anchor="start" dy="3">نامتعادل</text>
    </g>
    <g transform="translate(-124, 0)">
    <rect x="0" y="0" width="24" height="16" fill="#FEF9C3" />
    <text x="-10" y="8" font-size="14" font-weight="400" fill="#71717A" text-anchor="start" dy="3">نیمه متعادل</text>
    </g>
    <g transform="translate(-268, 0)">
    <rect x="0" y="0" width="24" height="16" fill="#D1FAE5" />
    <text x="-10" y="8" font-size="14" font-weight="400" fill="#71717A" text-anchor="start" dy="3">متعادل</text>
    </g>
</g>