{{#> layout}}

  <defs>
    {{! Ring fills — userSpaceOnUse, coords local to each ring's centre group.
        Light at the base (0,125) → deep toward the top of the fill. }}
    <linearGradient id="ring1grad" x1="0" y1="125" x2="-91.81" y2="-84.83" gradientUnits="userSpaceOnUse">
      <stop stop-color="#F472B6"/>
      <stop offset="1" stop-color="#BE185D"/>
    </linearGradient>
    <linearGradient id="ring2grad" x1="0" y1="125" x2="91.81" y2="-84.83" gradientUnits="userSpaceOnUse">
      <stop stop-color="#34D399"/>
      <stop offset="1" stop-color="#047857"/>
    </linearGradient>

    {{! Bar fill — stretched per bar (objectBoundingBox): light-green start → deep-green end. }}
    <linearGradient id="barfill">
      <stop stop-color="#A7F3D0"/>
      <stop offset="1" stop-color="#047857"/>
    </linearGradient>

    {{! Drop-shadow for the 0 % baseline separator (same as the FRHPT/BSCT vsp filter). }}
    <filter id="rsiBaseline" x="475" y="72" width="7" height="126" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feOffset dx="1"/>
      <feGaussianBlur stdDeviation="1.5"/>
      <feComposite in2="hardAlpha" operator="out"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1" result="shape"/>
    </filter>
  </defs>

  <g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">

    {{! ===================== LEFT: two mirrored donut-ring gauges ===================== }}
    {{! Left ring — negative image (pink), fills clockwise up the LEFT (direction false). }}
    <g transform="translate(125, 125)">
      {{gauge 125 87.5 (object tl=6 tr=6 bl=6 br=6) (object start=(toRad 90) end=(toRad 270)) false fill="#F1F5F9"}}
      {{#if neg.p}}{{gauge 125 87.5 (object tl=6 tr=6 bl=6 br=6) (object start=(toRad 90) end=neg.zeta) false fill="url(#ring1grad)"}}{{/if}}
    </g>
    {{! Right ring — positive image (green), fills counter-cw up the RIGHT (direction true). }}
    <g transform="translate(205, 125)">
      {{gauge 125 87.5 (object tl=6 tr=6 bl=6 br=6) (object start=(toRad 90) end=(toRad -90)) true fill="#F1F5F9"}}
      {{#if pos.p}}{{gauge 125 87.5 (object tl=6 tr=6 bl=6 br=6) (object start=(toRad 90) end=pos.zeta) true fill="url(#ring2grad)"}}{{/if}}
    </g>

    {{! Shared axis labels (gap centre x=165): 100 % at the top, 0 at the bottom base. }}
    <text x="165" y="22" text-anchor="middle" font-size="14" font-weight="500" fill="#64748B" direction="ltr">٪ 100</text>
    <text x="165" y="233" text-anchor="middle" font-size="14" font-weight="500" fill="#64748B">0</text>

    {{! Ring centres: big percentage + raw fraction }}
    <text x="98" y="124" text-anchor="middle" font-size="28" font-weight="600" fill="#BE185D" direction="ltr">٪ {{neg.percentage}}</text>
    <text x="98" y="151" text-anchor="middle" font-size="16" font-weight="500" fill="#475569">{{neg.mark}} از {{neg.max}}</text>
    <text x="232" y="124" text-anchor="middle" font-size="28" font-weight="600" fill="#047857" direction="ltr">٪ {{pos.percentage}}</text>
    <text x="232" y="151" text-anchor="middle" font-size="16" font-weight="500" fill="#475569">{{pos.mark}} از {{pos.max}}</text>

    {{! Ring titles (below). Left grows leftward from x=122 (anchor start);
        right grows rightward from x=208 (anchor end). }}
    <text x="120" y="285" text-anchor="start" font-size="18" xml:space="preserve"><tspan font-weight="500" fill="#64748B">تصور </tspan><tspan font-weight="600" fill="#BE185D">منفی</tspan></text>
    <text x="120" y="311" text-anchor="start" font-size="18" font-weight="500" fill="#94A3B8">از خدا</text>
    <text x="210" y="285" text-anchor="end" font-size="18" xml:space="preserve"><tspan font-weight="500" fill="#64748B">تصور </tspan><tspan font-weight="600" fill="#047857">مثبت</tspan></text>
    <text x="210" y="311" text-anchor="end" font-size="18" font-weight="500" fill="#94A3B8">از خدا</text>

    {{! ===================== RIGHT: two horizontal bars ===================== }}
    {{! Bar axis: 0 % at x=477.5, 100 % at x=677.5 (width 200). Dashed gridlines at 25/50/75/100 %. }}
    <text x="477" y="60" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8">0</text>
    <text x="677" y="60" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8" direction="ltr">٪ 100</text>

    <line x1="527.5" y1="75.5" x2="527.5" y2="194.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
    <line x1="577.5" y1="75.5" x2="577.5" y2="194.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
    <line x1="627.5" y1="75.5" x2="627.5" y2="194.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
    <line x1="677.5" y1="75.5" x2="677.5" y2="194.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>

    {{#each bars as |item index|}}
      <g transform="translate(478, {{math 99 '+' (math 48 '*' index)}})">
        {{! track }}
        {{bar 200 24 (object tl=0 bl=0 tr=6 br=6) (toRad 0) fill="black" fill-opacity="0.04"}}
        {{! fill }}
        {{#if item.p}}{{bar (math 200 '*' item.p) 24 (object tl=0 bl=0 tr=6 br=6) (toRad 0) fill="url(#barfill)"}}{{/if}}
        {{! category name (right-aligned, 10px left of the bar start) }}
        <text x="-10" y="12" dy=".32em" text-anchor="start" font-size="14" font-weight="400" fill="#475569">{{item.label.title}}</text>
        {{! percentage — inside the fill (≥25 %) or just outside it (≤24 %) }}
        {{#if (boolean item.percentage '<=' 24)}}
          <text x="{{math (math 200 '*' item.p) '+' 6}}" y="12" dy=".32em" text-anchor="start" font-size="14" font-weight="500" fill="#047857" direction="ltr">٪ {{item.percentage}}</text>
        {{else}}
          <text x="{{math (math 200 '*' item.p) '-' 8}}" y="12" dy=".32em" text-anchor="end" font-size="14" font-weight="500" fill="#FFFFFF" direction="ltr">٪ {{item.percentage}}</text>
        {{/if}}
        {{! raw / max fraction (green raw + gray total) }}
        <text x="208" y="12" dy=".32em" text-anchor="start" direction="ltr"><tspan font-weight="700" font-size="18" fill="#047857">{{item.mark}}</tspan><tspan font-weight="300" font-size="12" fill="#64748B"> / </tspan><tspan font-weight="400" font-size="13" fill="#64748B">{{item.max}}</tspan></text>
      </g>
    {{/each}}

    {{! 0 % baseline separator (white, subtle drop-shadow), drawn on top. }}
    <g opacity="0.5" filter="url(#rsiBaseline)">
      <line x1="477.5" y1="75.5" x2="477.5" y2="194.5" stroke="white" stroke-linecap="round"/>
    </g>

  </g>

{{/layout}}