{{#> layout}}
<defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#F0FDF4;stop-opacity:0.8" />
      <stop offset="100%" style="stop-color:#FEF2F2;stop-opacity:0.8" />
    </linearGradient>
    <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#94A3B8;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#0E7490;stop-opacity:1" />
    </linearGradient>

    <linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#94A3B8;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#1D4ED8;stop-opacity:1" />
    </linearGradient>
    <filter id="filter" x="0.5" y="0" width="7" height="470" 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="effect"/>
        <feBlend mode="normal" in="SourceGraphic" in2="effect" result="shape"/>
    </filter>
    <filter id="filter-total" x="0" y="0.5" width="34" height="14" 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="2"/>
<feGaussianBlur stdDeviation="3"/>
<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_dropShadow_19887_86132"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_19887_86132" result="shape"/>
</filter>
</defs>
  <g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
    <g transform="translate(152.5, 0)">
        <text x="0" y="0" text-anchor="middle" dy=".25em" fill="#94A3B8" font-size="12px" font-weight="400">0</text>
        <text x="400" y="0" text-anchor="middle" dy=".25em" fill="#94A3B8" font-size="12px" font-weight="400">100 ٪</text>
        <g transform="translate(0, 20)">
            <rect x="0" y="0" width="400" height="464" fill="url(#bg)" />
            <line x1="40" x2="40" y1="0.5" y2="462.5" stroke="#E2E8F0" stroke-opacity="0.6" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="80" x2="80" y1="0.5" y2="462.5" stroke="#E2E8F0" stroke-opacity="0.6" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="120" x2="120" y1="0.5" y2="462.5" stroke="#E2E8F0" stroke-opacity="0.6" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="160" x2="160" y1="0.5" y2="462.5" stroke="#E2E8F0" stroke-opacity="0.6" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="200" x2="200" y1="0.5" y2="462.5" stroke="#E2E8F0" stroke-opacity="0.6" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="240" x2="240" y1="0.5" y2="462.5" stroke="#E2E8F0" stroke-opacity="0.6" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="280" x2="280" y1="0.5" y2="462.5" stroke="#E2E8F0" stroke-opacity="0.6" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="320" x2="320" y1="0.5" y2="462.5" stroke="#E2E8F0" stroke-opacity="0.6" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="360" x2="360" y1="0.5" y2="462.5" stroke="#E2E8F0" stroke-opacity="0.6" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="400" x2="400" y1="0.5" y2="462.5" stroke="#E2E8F0" stroke-opacity="0.6" stroke-linecap="round" stroke-dasharray="6 6"/>
        </g>
        <text x="-7.5" y="38" text-anchor="start" dy=".25em" fill="#334155" font-size="12px" font-weight="600">
            حوزه‌ها
        </text>
        <text x="7.5" y="38" text-anchor="end" dy=".25em" fill="#15803D" font-size="12px" font-weight="500">
            عدم وجود مشکل
        </text>

        <text x="407.5" y="38" text-anchor="end" dy=".25em" fill="#334155" font-size="12px" font-weight="600">
            نمرات
        </text>
        <text x="393.5" y="38" text-anchor="start" dy=".25em" fill="#BE123C" font-size="12px" font-weight="500">
            وجود مشکل بیشتر
        </text>
            <text x="200" y="516" text-anchor="middle" fill="#475569" font-size="14px" font-weight="400">
                <tspan>هر چه</tspan>
                <tspan fill="#64748B" font-weight="600">نمره و درصد</tspan>
                <tspan fill="#BE123C" font-weight="600">بیشتر</tspan>
                <tspan>باشد، به معنای</tspan>
                <tspan fill="#BE123C" font-weight="600">وجود مشکل بیشتر</tspan>
                <tspan>است.</tspan>
            </text>
    </g>
    <g transform="translate(152.5, 76)">
        {{#each g1 as |item index|}}
        <g transform="translate(0, {{math 28 '*' index }})">
            {{bar 400 16 (object br=2 tr=2 bl=0 tl=0) (toRad 0) fill="#000000" opacity="0.04"}}
            {{bar (math item.markP '*' 4) 16 (object br=2 tr=2 bl=0 tl=0) (toRad 0) fill="url(#g1)"}}
            <text x="-7.5" y="8" text-anchor="start" dy=".25em" fill="#475569" font-size="13px" font-weight="400">
                {{item.label.fr}}
            </text>
            <text x="{{math (math item.markP '*' 4) '-' 4}}" y="8" text-anchor="start" dy=".3em" fill="#FFFFFF" font-size="12px" font-weight="500">
                {{item.markP}} ٪
            </text>
            <text x="408" y="8" text-anchor="start" dy=".3em" direction="ltr">
                <tspan fill="#0E7490" font-size="18px" font-weight="700">{{item.mark}}</tspan>
                <tspan fill="#64748B" font-size="12px" font-weight="300">/</tspan>
                <tspan fill="#64748B" font-size="13px" font-weight="400">{{item.label.max}}</tspan>
            </text>
        </g>
        {{/each}}
    </g>

    <g transform="translate(152.5, 332)">
        {{#each g2 as |item index|}}
        <g transform="translate(0, {{math 28 '*' index }})">
            {{bar 400 16 (object br=2 tr=2 bl=0 tl=0) (toRad 0) fill="#000000" opacity="0.04"}}
            {{bar (math item.markP '*' 4) 16 (object br=2 tr=2 bl=0 tl=0) (toRad 0) fill="url(#g2)"}}
            <text x="-7.5" y="8" text-anchor="start" dy=".25em" fill="#475569" font-size="13px" font-weight="400">
                {{item.label.fr}}
            </text>
            <text x="{{math (math item.markP '*' 4) '-' 4}}" y="8" text-anchor="start" dy=".3em" fill="#FFFFFF" font-size="12px" font-weight="500">
                {{item.markP}} ٪
            </text>
            <text x="408" y="8" text-anchor="start" dy=".3em" direction="ltr">
                <tspan fill="#1D4ED8" font-size="18px" font-weight="700">{{item.mark}}</tspan>
                <tspan fill="#64748B" font-size="12px" font-weight="300">/</tspan>
                <tspan fill="#64748B" font-size="13px" font-weight="400">{{item.label.max}}</tspan>
            </text>
        </g>
        {{/each}}
    </g>
    <g opacity="0.3" filter="url(#filter)" transform="translate(149, 16)">
        <line x1="3" y1="3.5" x2="3" y2="466.5" stroke="white" stroke-linecap="round"/>
    </g>

    <g transform="translate(674, 68.5)">
        {{bar 18 186 (object tl=2 tr=2 bl=0 br=0) (toRad 0) fill="#F1F5F9" transform="translate(19, 5)"}}
        <g transform="translate(0, {{math 186 '-' (math total.mark '*' 2)}})">
            {{bar 18 (math total.mark '*' 2) (object tl=2 tr=2 bl=0 br=0) (toRad 0) fill="#475569" transform="translate(19, 5)"}}
        </g>
        <text x="43" y="{{math 186 '-' (math total.mark '*' 2)}}" text-anchor="end" dy=".3em" fill="#334155" font-size="18px" font-weight="600">
            {{total.mark}}
        </text>
        <text x="43" y="{{math 186 '-' (math total.mark '*' 2)}}" text-anchor="end" dy="1.5em" fill="#64748B" font-size="12px" font-weight="400">
            {{total.markP}} ٪
        </text>
        <text x="14" y="0" text-anchor="start" dy=".7em" fill="#64748B" font-size="12px" font-weight="400">
            93
        </text>
        <text text-anchor="start" fill="#64748B" font-size="12px" font-weight="400" transform="translate(8, 45) rotate(-90)">
            نمره کل مشکل در کیفیت زندگی
        </text>
        <g transform="translate(12.5, 186)" opacity="0.5" filter="url(#filter-total)">
            <path d="M5 7.5H25" stroke="white" stroke-width="2" stroke-linecap="round"/>
        </g>
    </g>
  </g>

{{/layout}}