{{#> layout}}
<defs>
  <linearGradient id="bar" gradientTransform="rotate(90)">
    <stop offset="0%"  stop-color="#4F46E5" stop-opacity="1" />
    <stop offset="100%" stop-color="#A5B4FC" stop-opacity="1" />
  </linearGradient>
  <linearGradient id="total">
    <stop offset="0%" stop-color="{{status.style.colors.[1]}}" stop-opacity="1" />
    <stop offset="1000%"  stop-color="{{status.style.colors.[0]}}" stop-opacity="1" />
  </linearGradient>
  <filter id="barsp" x="0" y="0" width="532" height="7" 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 dy="-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>
  <clipPath id="total_path">
        {{bar 435 28 (object tl=0 bl=0 tr=4 br=4) (toRad 0)}}
  </clipPath>
  <clipPath id="factor_path">
    {{bar 28 300 (object tl=4 tr=4 br=0 bl=0) (toRad 0)}}
  </clipPath>
</defs>
  <g transform="translate({{spec.profile.padding.[0].x}}, {{spec.profile.padding.[0].y}})">
    <g transform="translate(85, 24)">
      {{#each factors as | item index |}}
          <g transform="translate({{math 92 '*' index }}, 0)">
            <text x="14" y="-16" dy="0.25em" text-anchor="middle" direction="ltr">
              <tspan font-size="16" font-weight="700" fill="#4F46E5">{{item.mark}}</tspan>
              <tspan font-size="12" font-weight="300" fill="#64748B">/</tspan>
              <tspan font-size="13" font-weight="400" fill="#94A3B8">{{item.label.max}}</tspan>
            </text>
            <text x="14" y="313" dy="0.85em" text-anchor="middle" font-size="13" font-weight="400" fill="#334155">{{item.label.short}}</text>
            <text y="330" dy="0.9em" text-anchor="middle" font-size="13" font-weight="400" fill="#334155">
              {{#each item.label.title as |title i|}}<tspan x="14" dy="{{math 0.9 '+' (math i '*' 0.4)}}em">{{title}}</tspan>{{/each}}</text>
            {{bar 28 300 (object tl=4 tr=4 br=0 bl=0) (toRad 0) fill="#F8FAFC"}}
          </g>
      {{/each}}
        <line x1="-45" x2="442" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
        <text x="-80" y="0" dy="0.25em" text-anchor="end" font-size="12" font-weight="400" fill="#94A3B8">100 ٪</text>

        <line x1="-45" x2="442" y1="75" y2="75" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>

        <line x1="-45" x2="442" y1="150" y2="150" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>
        <text x="-80" y="150" dy="0.25em" text-anchor="end" font-size="12" font-weight="400" fill="#94A3B8">50 ٪</text>

        <line x1="-45" x2="442" y1="225" y2="225" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="6 6"/>

        {{#each factors as | item index |}}
          <g transform="translate({{math 92 '*' index }}, {{math (math 1 '-' item.label.percentage) '*' 300 }})">
            {{bar 28 (math item.label.percentage '*' 300) (object tl=4 tr=4 br=0 bl=0) (toRad 0) fill="url(#bar)" clip-path="url(#factor_path)"}}
            <text x="14" y="{{ternary (boolean item.label.percentageT '<=' 10) -18 8}}" dy="0.65em" text-anchor="middle" font-size="16" font-weight="600" fill="{{ternary (boolean item.label.percentageT '<=' 10) '#4F46E5' '#FFFFFF'}}">{{item.label.percentageT}}</text>
          </g>
        {{/each}}

        <g opacity="0.5" filter="url(#barsp)" transform="translate(-88, 296)">
           <line x1="3.5" y1="4.5" x2="526" y2="4.5" stroke="white" stroke-linecap="round"/>
        </g>
    </g>
    <g transform="translate(48.5, 494)">
        <text x="-8.5" y="8" text-anchor="start" font-size="13" font-weight="500" fill="#64748B">نمره کل</text>
        <text x="-8.5" y="25" text-anchor="start" font-size="13" font-weight="600" fill="#475569">{{total.label.percentage}} ٪</text>
        {{bar 435 28 (object tl=0 bl=0 tr=4 br=4) (toRad 0) fill="#F8FAFC"}}
        {{bar total.len 28 (object tl=0 bl=0 tr=4 br=4) (toRad 0) fill="url(#total)" clip-path="url(#total_path)"}}
        {{#if (boolean total.mark '<=' 19)}}
        <text x="{{math total.len '+' 8}}" y="14" dy="0.25em" text-anchor="end" font-size="16" font-weight="600" fill="#475569">{{total.mark}}</text>
        {{else}}
        <text x="{{math total.len '-' 8}}" y="14" dy="0.25em" text-anchor="start" font-size="16" font-weight="600" fill="#FFFFFF">{{total.mark}}</text>
        {{/if}}
        <text x="47.5" y="-10" dy="-0.4em" text-anchor="middle" font-size="13" font-weight="{{ternary (boolean status.mark '===' 'minimal') 600 400}}" fill="{{ternary (boolean status.mark '===' 'minimal') status.style.colors.[0] '#64748B'}}">علائم ناچیز</text>
        <text x="95" y="-32" dy="-0.4em" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8">19</text>
        <line x1="94.5" y1="-27.5" x2="94.5" y2="-3.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="4 4"/>

        <text x="143" y="-10" dy="-0.4em" text-anchor="middle" font-size="13" font-weight="{{ternary (boolean status.mark '===' 'mild') 600 400}}" fill="{{ternary (boolean status.mark '===' 'mild') status.style.colors.[0] '#64748B'}}">علائم خفیف</text>
        <text x="191" y="-32" dy="-0.4em" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8">27</text>
        <line x1="190.5" y1="-27.5" x2="190.5" y2="-3.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="4 4"/>

        <text x="241" y="-10" dy="-0.4em" text-anchor="middle" font-size="13" font-weight="{{ternary (boolean status.mark '===' 'moderate') 600 400}}" fill="{{ternary (boolean status.mark '===' 'moderate') status.style.colors.[0] '#64748B'}}">علائم متوسط</text>
        <text x="291" y="-32" dy="-0.4em" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8">32</text>
        <line x1="290.5" y1="-27.5" x2="290.5" y2="-3.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="4 4"/>

        <text x="363" y="-10" dy="-0.4em" text-anchor="middle" font-size="13" font-weight="{{ternary (boolean status.mark '===' 'severe') 600 400}}" fill="{{ternary (boolean status.mark '===' 'severe') status.style.colors.[0] '#64748B'}}">علائم شدید</text>
        <text x="435" y="-32" dy="-0.4em" text-anchor="middle" font-size="12" font-weight="400" fill="#94A3B8">80</text>
        <line x1="434.5" y1="-27.5" x2="434.5" y2="-3.5" stroke="#E2E8F0" stroke-linecap="round" stroke-dasharray="4 4"/>

    </g>
    <g transform="translate(48.5, 526)">
      <rect width="434" height="33" rx="4" fill="{{status.style.colors.[4]}}" stroke="{{status.style.colors.[3]}}"/>
      <text x="217" y="16.5" text-anchor="middle" dy="0.3em" font-size="13" font-weight="400" fill="{{status.style.colors.[2]}}">{{status.style.description}}</text>
    </g>
  </g>
{{/layout}}