{{#> layout}}
<defs>
    <clipPath id="bar300x16">
        {{bar 400 16 (object tr=2 br=2 bl=0 tl=0) (toRad 0)}}
    </clipPath>
    {{#each colors}}
    <linearGradient id="barx{{@index}}" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:{{start}};stop-opacity:1" />
      <stop offset="100%" style="stop-color:{{end}};stop-opacity:1" />
    </linearGradient>
    {{/each}}
</defs>
  <g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
    {{!-- <rect width="780" height="506" opacity=".1" /> --}}
    <g transform="translate(0, 61)">
        {{#each items as |item index|}}
        <g transform="translate(0, {{math 32 '*' index}})">
            {{!-- <rect width="400" height="16" opacity=".1" /> --}}
            <text x="180" y="0" dy="1em" text-anchor="middle" font-weight="{{ternary (boolean item.params.level '>' 0) '600' '400'}}" font-size="13" fill="{{ternary (boolean item.params.level '>' 0) item.params.col '#4B5563'}}">{{item.en}}</text>
            <text x="150" y="0" dy="1em" text-anchor="middle" font-weight="{{ternary (boolean item.params.level '>' 0) '600' '400'}}" font-size="13" fill="{{ternary (boolean item.params.level '>' 0) item.params.col '#4B5563'}}">-</text>
            <text x="137" y="0" dy=".9em" text-anchor="start" font-weight="{{ternary (boolean item.params.level '>' 0) '600' '400'}}" font-size="13" fill="{{ternary (boolean item.params.level '>' 0) item.params.col '#4B5563'}}">{{item.title}}</text>
            {{bar 400 16 (object tr=2 br=2 bl=0 tl=0) (toRad 0) fill=item.params.background transform="translate(205, 0)"}}
            <g transform="translate(609, 0)">
                <rect width="26" height="16" fill="{{item.params.background}}" rx="2" />
                <text x="13" dy=".9em" text-anchor="middle" font-weight="400" font-size="13" fill="{{ternary (boolean item.params.level '>' 0) item.params.col '#4B5563'}}">{{item.raw}}</text>
            </g>
        </g>
        {{/each}}
        <g transform="translate(0, -61)">
            <text x="254.5" dy=".9em" y="24.5" text-anchor="middle" font-weight="500" font-size="13" fill="#65A30D">سالم</text>
            <text x="304" dy=".9em" text-anchor="middle" font-weight="400" font-size="12" fill="#9CA3AF">1</text>
            <line x1="304" y1="25.5" x2="304" y2="373.5" stroke="#E5E7EB" stroke-linecap="round" stroke-dasharray="6 6"/>

            <text x="378.5" dy=".9em" y="24.5" text-anchor="middle" font-weight="500" font-size="13" fill="#EAB308">احتمال اختلال</text>
            <text x="454" dy=".9em" text-anchor="middle" font-weight="400" font-size="12" fill="#9CA3AF">2.5</text>
            <line x1="454" y1="25.5" x2="454" y2="373.5" stroke="#E5E7EB" stroke-linecap="round" stroke-dasharray="6 6"/>

            <text x="479.5" dy=".9em" y="24.5" text-anchor="middle" font-weight="500" font-size="13" fill="#EA580C">اختلال</text>
            <text x="504" dy=".9em" text-anchor="middle" font-weight="400" font-size="12" fill="#9CA3AF">3</text>
            <line x1="504" y1="25.5" x2="504" y2="373.5" stroke="#E5E7EB" stroke-linecap="round" stroke-dasharray="6 6"/>

            <text x="550.5" dy=".9em" y="24.5" text-anchor="middle" font-weight="500" font-size="13" fill="#E11D48">اختلال جدی</text>
            <text x="604" dy=".9em" text-anchor="middle" font-weight="400" font-size="12" fill="#9CA3AF">4</text>
            <line x1="604" y1="25.5" x2="604" y2="373.5" stroke="#E5E7EB" stroke-linecap="round" stroke-dasharray="6 6"/>
        </g>
        {{#each items as |item index|}}
        <g transform="translate(0, {{math 32 '*' index}})">
            {{bar (math item.mean '*' 100) 16 (object tr=2 br=2 bl=0 tl=0) (toRad 0) fill=item.params.gr transform="translate(205, 0)" clip-path="url(#bar300x16)"}}
            <text x="{{math (math item.mean '*' 100) '+' (ternary (boolean item.params.level '>' 0) 199 211)}}" dy=".85em"  text-anchor="{{ternary (boolean item.params.level '>' 0) 'start' 'end'}}" font-weight="500" font-size="16" fill="{{ternary (boolean item.params.level '>' 0) '#FFFFFF' item.params.col}}">{{item.mean}}</text>
        </g>
        {{/each}}
    </g>
    <rect x="204" y="25.5" width="1" height="348" rx="0.25" fill="#FFFFFF" stroke-linecap="round" style="filter: drop-shadow(2px 0px 2px rgba(0,0,0, .5));"/>

    <g transform="translate(704, 5.5)">
        <text x="0" dy=".75em" text-anchor="end" font-weight="400" font-size="12" fill="#475569">360</text>
        <text x="49" y="{{math 6 '+' (math 360 '-' total)}}" dy=".25em" text-anchor="end" font-weight="500" font-size="18" fill="#334155">{{total}}</text>
        {{bar 18 360 (object tr=0 br=2 bl=2 tl=0) (toRad 180) transform="translate(43, 366)" fill="#F8FAFC"}}
        {{bar 18 total (object tr=0 br=2 bl=2 tl=0) (toRad 180) transform="translate(43, 366)" fill="#475569"}}
        <rect x="24" y="366" width="20" height="2" rx="1" fill="#FFFFFF" style="filter: drop-shadow(2px 0px 3px rgba(0,0,0, .5));"/>
        <text transform="rotate(-90, 0, 0) translate(-368, 6)" dy=".75em" text-anchor="end" font-weight="400" font-size="12" fill="#475569">نمره کل</text>
    </g>
    <g transform="translate(74, 438)">
        <g>
            <path d="M 2 0 l 66 0 l -8 14 l 8 14 l -66 0 a 2 2 0 0 1 -2 -2 l 0 -24 a 2 2 0 0 1 2 -2 z m 308 0 a 2 2 0 0 1 2 2 l 0 24 a 2 2 0 0 1 -2 2 l -238 0 l -8 -14 l 8 -14 Z" fill="#0891B2" />
            <text x="34" y="14" dy=".35em" text-anchor="middle" font-weight="500" font-size="14" fill="#ffffff">{{gsi}}</text>
            <rect x="268" y="4" width="40" height="20" rx="2" fill="#FFFFFF" />
            <text x="288" y="14" dy=".4em" text-anchor="middle" font-weight="400" font-size="13" fill="#0891B2">GSI</text>
            <text x="260" y="14" dy=".25em" text-anchor="start" font-weight="400" font-size="13" fill="#ffffff">شاخص شدت کلی</text>
        </g>
        <g  transform="translate(324, 0)">
            <path d="M 2 0 l 66 0 l -8 14 l 8 14 l -66 0 a 2 2 0 0 1 -2 -2 l 0 -24 a 2 2 0 0 1 2 -2 z m 308 0 a 2 2 0 0 1 2 2 l 0 24 a 2 2 0 0 1 -2 2 l -238 0 l -8 -14 l 8 -14 Z" fill="#0891B2" />
            <text x="34" y="14" dy=".35em" text-anchor="middle" font-weight="500" font-size="14" fill="#ffffff">{{psdi}}</text>
            <rect x="268" y="4" width="40" height="20" rx="2" fill="#FFFFFF" />
            <text x="288" y="14" dy=".4em" text-anchor="middle" font-weight="400" font-size="13" fill="#0891B2">PSDI</text>
            <text x="260" y="14" dy=".25em" text-anchor="start" font-weight="400" font-size="13" fill="#ffffff">شاخص ناراحتی نشانه‌های مثبت</text>
        </g>
        <g transform="translate(162, 40)">
            <path d="M 2 0 l 66 0 l -8 14 l 8 14 l -66 0 a 2 2 0 0 1 -2 -2 l 0 -24 a 2 2 0 0 1 2 -2 z m 308 0 a 2 2 0 0 1 2 2 l 0 24 a 2 2 0 0 1 -2 2 l -238 0 l -8 -14 l 8 -14 Z" fill="#0891B2" />
            <text x="34" y="14" dy=".35em" text-anchor="middle" font-weight="500" font-size="14" fill="#ffffff">{{pst}}</text>
            <rect x="268" y="4" width="40" height="20" rx="2" fill="#FFFFFF" />
            <text x="288" y="14" dy=".4em" text-anchor="middle" font-weight="400" font-size="13" fill="#0891B2">PST</text>
            <text x="260" y="14" dy=".25em" text-anchor="start" font-weight="400" font-size="13" fill="#ffffff">جمع نشانه‌های مثبت</text>
        </g>
    </g>
  </g>

{{/layout}}