{{#> layout}}
<defs>
    <linearGradient id="bg" x1="2.4" y1="112" x2="400" y2="112" gradientUnits="userSpaceOnUse">
        <stop stop-color="#FFFBEB" stop-opacity="0.25"/>
        <stop offset="1" stop-color="#FEF3C7" stop-opacity="0.5"/>
    </linearGradient>
    <linearGradient id="totalbg" x1="9" y1="{{total.gradY1}}" x2="9" y2="{{total.gradY2}}" gradientUnits="userSpaceOnUse">
        <stop stop-color="#94A3B8"/>
        <stop offset="1" stop-color="#334155"/>
    </linearGradient>
    <linearGradient id="bgrow">
        <stop stop-color="#FED7AA"/>
        <stop offset="1" stop-color="#C2410C"/>
    </linearGradient>
    <clipPath id="totalRow">
        {{bar 400 16 (object tr=2 br=2 tl=0 bl=0) (toRad 0) fill='black'}}
    </clipPath>
    <filter id="vsp" x="-1.52588e-05" y="0" width="7.00002" height="230" 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_dropShadow_3465_114726"/>
        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3465_114726" result="shape"/>
    </filter>
    <filter id="totalvsp" x="0" y="0" 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_5405_142130"/>
    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5405_142130" result="shape"/>
</filter>
</defs>
<g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
    <g transform="translate(109, 21)">
        <rect width="400" height="224" fill="url(#bg)"/>
        <g transform="translate(0, 24)">
            {{#each factors as |factor index|}}
                <g transform="translate(0, {{math 40 '*' index}})">
                    {{bar 400 16 (object tr=2 br=2 tl=0 bl=0) (toRad 0) fill='black' opacity="0.04"}}
                </g>
            {{/each}}
        </g>
        <g transform="translate(38, 0)">
            <line x1="0.5" y1="0.5" x2="0.50001" y2="223.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="40.5" y1="0.5" x2="40.5" y2="223.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="80.5" y1="0.5" x2="80.5" y2="223.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="120.5" y1="0.5" x2="120.5" y2="223.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="160.5" y1="0.5" x2="160.5" y2="223.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="200.5" y1="0.5" x2="200.5" y2="223.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="240.5" y1="0.5" x2="240.5" y2="223.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="280.5" y1="0.5" x2="280.5" y2="223.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="320.5" y1="0.5" x2="320.5" y2="223.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
            <line x1="361.5" y1="0.5" x2="361.5" y2="223.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
        </g>
        <text y="-12" text-anchor="middle" font-weight="400" font-size="12" fill="#94A3B8">0</text>
        <text x="200" y="-12" text-anchor="middle" font-weight="400" font-size="12" fill="#94A3B8">50 ٪</text>
        <text x="400" y="-12" text-anchor="middle" font-weight="400" font-size="12" fill="#94A3B8">100 ٪</text>
        <g transform="translate(0, 24)">
            {{#each factors as |factor index|}}
                <g transform="translate(0, {{math 40 '*' index}})">
                    <text x="-9" y="8" text-anchor="start" dy="0.25em" font-weight="400" font-size="12" fill="#475569">{{factor.label.title}}</text>
                    {{bar (math 400 '*' factor.p) 16 (object tr=2 br=2 tl=0 bl=0) (toRad 0) fill='url(#bgrow)' clip-path="url(#totalRow)"}}
                    {{#if (boolean factor.percentage '<=' 24) }}
                        <text x="{{math (math 400 '*' factor.p) '+' 6}}" y="8" text-anchor="end" dy="0.3em" font-weight="500" font-size="13" fill="#C2410C">{{factor.percentage}} ٪</text>
                    {{else}}
                        <text x="{{math (math 400 '*' factor.p) '-' 4}}" y="8" text-anchor="start" dy="0.3em" font-weight="500" font-size="13" fill="#FFFFFF">{{factor.percentage}} ٪</text>
                    {{/if}}
                    <text x="408" y="8" text-anchor="start" dy="0.3em" direction="ltr">
                        <tspan font-weight="700" font-size="18" fill="#C2410C">{{factor.mark}}</tspan>
                        <tspan font-weight="300" font-size="12" fill="#64748B">/</tspan>
                        <tspan font-weight="400" font-size="13" fill="#64748B">{{factor.label.max}}</tspan>
                    </text>
                </g>
            {{/each}}
        </g>
        <g opacity="0.5" filter="url(#vsp)" transform="translate(-3, -3)">
            <line x1="2.5" y1="3.5" x2="2.5" y2="226.5" stroke="white" stroke-linecap="round"/>
        </g>
    </g>
    <g transform="translate(637, 1)">
        <text x="23" y="9" text-anchor="start" font-weight="400" font-size="12" fill="#475569">۱۰۰ ٪</text>
        {{bar 18 230 (object tr=2 tl=2 br=0 bl=0) (toRad 0) fill="#F1F5F9" transform="translate(30, 4)"}}
        {{bar 18 (math 230 '*' total.p) (object tr=2 tl=2 br=0 bl=0) (toRad 0) fill="url(#totalbg)" transform=total.transform}}
        <g transform="translate(24, 228)" opacity="0.5" filter="url(#totalvsp)">
            <path d="M5 7H25" stroke="white" stroke-width="2" stroke-linecap="round"/>
        </g>
        <text x="56" y="{{math 234 '-' (math 230 '*' total.p)}}" font-weight="600" font-size="18" dy="0" fill="#334155" text-anchor="end">{{total.percentage}} ٪</text>
        <text x="56" y="{{math 234 '-' (math 230 '*' total.p)}}" font-weight="400" font-size="12" dy="14" fill="#64748B" text-anchor="end">{{total.mark}} از {{total.label.max}}</text>
        <text font-weight="400" font-size="12" fill="#475569" transform="rotate(-90,0,0) translate(-200,20)">نمره کل</text>
    </g>
</g>

{{/layout}}