{{#> layout}}
<defs>
    <clipPath id="barx">
        {{bar 28 384 (object tl=4 bl=0 tr=4 br=0) (toRad 0)}}
    </clipPath>
    <linearGradient id="line-bar" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:{{severity.color}};stop-opacity:1" />
      <stop offset="100%" style="stop-color:{{severity.secondary}};stop-opacity:1" />
    </linearGradient>
    <filter id="lineBase" x="0" y="0" width="226" 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="effect1_dropShadow_2493_93356"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2493_93356" result="shape"/>
  </filter>
</defs>
  <g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
    <g transform="translate(383, 0)">
      <g>
        <rect x="0" y="0" rx="8" width="340" height="172" stroke="#E2E8F0" fill="none"/>
        <g transform="translate(236, 12)">
          <rect x="0" y="0" rx="4" width="92" height="148" fill="#F1F5F9"/>
          <text y="55" text-anchor="middle" font-size="13" font-weight="500" fill="#475569">
            <tspan x="46" dy="1em">
              شدت
            </tspan>
            <tspan x="46" dy="1.45em">
              وسواس
            </tspan>
          </text>
        </g>
        <g transform="translate(12, 12)">
          {{#forLoop 0 5 1}}
          {{setVar "question" (lookup ../questions i)}}
            <g transform="translate(0, {{math  30 '*' i}})">
              <rect x="0" y="0" rx="4" width="180" height="28" fill="#F8FAFC"/>
              <text x="172" y="14" text-anchor="start" dy="0.23em" font-size="13" font-weight="400" fill="#475569">{{lookup ../questionTitles i}}</text>
              <rect x="4" y="3.5" rx="7" width="20" height="20" fill="{{question.color}}"/>
              <text x="14" y="7.5" text-anchor="middle" dy="0.79em" font-size="13" font-weight="500" fill="#FFFFFF">{{question.user_answered}}</text>
              <g transform="translate(184, 0)">
                <text x="14" y="14" text-anchor="middle" dy="0.25em" font-size="11" font-weight="400" fill="#475569">
                  {{math i '+' 1}}
                </text>
              </g>
            </g>
          {{/forLoop}}
        </g>
        {{#if (boolean (boolean alert '!==' 2) '&&' (boolean alert '!==' 0))}}
          <rect x="0" y="0" rx="8" width="340" height="172" fill="black" opacity="0.1"/>
          <g transform="translate(348, 0)">
            <rect x="0" y="0" rx="8" width="132" height="172" stroke="#991B1B" fill="#FEF2F2" stroke-dasharray="6 6"/>
            <g transform="translate(56, 32)">
              <path d="M11 7.50019H11.01M9.99999 10.5002H11V14.5002H12M9.36299 2.09119L1.25699 15.6252C1.08988 15.9146 1.00145 16.2427 1.0005 16.5768C0.999539 16.911 1.08609 17.2396 1.25153 17.5299C1.41698 17.8203 1.65555 18.0622 1.94353 18.2317C2.2315 18.4013 2.55884 18.4924 2.89299 18.4962H19.107C19.441 18.4923 19.7682 18.4011 20.056 18.2317C20.3438 18.0622 20.5823 17.8204 20.7477 17.5302C20.9131 17.24 20.9997 16.9116 20.9989 16.5776C20.9981 16.2435 20.9098 15.9155 20.743 15.6262L12.637 2.09019C12.4664 1.80869 12.2262 1.57593 11.9394 1.41439C11.6527 1.25284 11.3291 1.16797 11 1.16797C10.6709 1.16797 10.3473 1.25284 10.0605 1.41439C9.77378 1.57593 9.53353 1.80869 9.36299 2.09019V2.09119Z" stroke="#991B1B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </g>
            <g transform="translate(0, 61.5)">
            <text x="66" text-anchor="middle" font-size="11" font-weight="400" fill="#44403C">
                <tspan y="1em">
                  با توجه به پاسخ فرد به
                </tspan>
                <tspan x="66" y="2.5em">
                  سؤال ۱ که صفر است،
                </tspan>
                <tspan x="66" y="4em">
                  سؤال‌های ۲ تا ۵ در نمره
                </tspan>
                <tspan x="66" y="5.5em">
                  شدت وسواس - بی‌اختیاری
                </tspan>
                <tspan x="66" y="7em">
                  اثری ندارد.
                </tspan>
              </text>
            </g>
          </g>
        {{/if}}
      </g>
      <g transform="translate(0, 184)">
        <rect x="0" y="0" rx="8" width="340" height="172" stroke="#E2E8F0" fill="none"/>
        <g transform="translate(236, 12)">
          <rect x="0" y="0" rx="4" width="92" height="148" fill="#F1F5F9"/>
          <text y="55" text-anchor="middle" font-size="13" font-weight="500" fill="#475569">
            <tspan x="46" dy="1em">
              شدت
            </tspan>
            <tspan x="46" dy="1.45em">
              بی‌اختیاری
            </tspan>
          </text>
        </g>
        <g transform="translate(12, 12)">
          {{#forLoop 0 5 1}}
            {{setVar "question" (lookup ../questions (math i '+' 5))}}
            <g transform="translate(0, {{math  30 '*' i}})">
              <rect x="0" y="0" rx="4" width="180" height="28" fill="#F8FAFC"/>
              <text x="172" y="14" text-anchor="start" dy="0.23em" font-size="13" font-weight="400" fill="#475569">{{lookup ../questionTitles (math i '+' 5)}}</text>
              <rect x="4" y="3.5" rx="7" width="20" height="20" fill="{{question.color}}"/>
              <text x="14" y="7.5" text-anchor="middle" dy="0.79em" font-size="13" font-weight="500" fill="#FFFFFF">{{question.user_answered}}</text>
              <g transform="translate(184, 0)">
                <text x="14" y="14" text-anchor="middle" dy="0.25em" font-size="11" font-weight="400" fill="#475569">
                  {{math i '+' 6}}
                </text>
              </g>
            </g>
          {{/forLoop}}
        </g>
        {{#if (boolean (boolean alert '!==' 1) '&&' (boolean alert '!==' 0))}}
          <rect x="0" y="0" rx="8" width="340" height="172" fill="black" opacity="0.1"/>
          <g transform="translate(348, 0)">
            <rect x="0" y="0" rx="8" width="132" height="172" stroke="#991B1B" fill="#FEF2F2" stroke-dasharray="6 6"/>
            <g transform="translate(56, 32)">
              <path d="M11 7.50019H11.01M9.99999 10.5002H11V14.5002H12M9.36299 2.09119L1.25699 15.6252C1.08988 15.9146 1.00145 16.2427 1.0005 16.5768C0.999539 16.911 1.08609 17.2396 1.25153 17.5299C1.41698 17.8203 1.65555 18.0622 1.94353 18.2317C2.2315 18.4013 2.55884 18.4924 2.89299 18.4962H19.107C19.441 18.4923 19.7682 18.4011 20.056 18.2317C20.3438 18.0622 20.5823 17.8204 20.7477 17.5302C20.9131 17.24 20.9997 16.9116 20.9989 16.5776C20.9981 16.2435 20.9098 15.9155 20.743 15.6262L12.637 2.09019C12.4664 1.80869 12.2262 1.57593 11.9394 1.41439C11.6527 1.25284 11.3291 1.16797 11 1.16797C10.6709 1.16797 10.3473 1.25284 10.0605 1.41439C9.77378 1.57593 9.53353 1.80869 9.36299 2.09019V2.09119Z" stroke="#991B1B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </g>
            <g transform="translate(0, 61.5)">
            <text x="66" text-anchor="middle" font-size="11" font-weight="400" fill="#44403C">
                <tspan y="1em">
                  با توجه به پاسخ فرد به
                </tspan>
                <tspan x="66" y="2.5em">
                  سؤال ۶ که صفر است،
                </tspan>
                <tspan x="66" y="4em">
                  سؤال‌های ۷ تا ۱۰ در نمره
                </tspan>
                <tspan x="66" y="5.5em">
                  شدت وسواس - بی‌اختیاری
                </tspan>
                <tspan x="66" y="7em">
                  اثری ندارد.
                </tspan>
              </text>
            </g>
          </g>
        {{/if}}
      </g>
      <g transform="translate(0, 368)">
        <rect x="0" y="0" rx="8" width="340" height="52" stroke="#E2E8F0" fill="none"/>
        <g transform="translate(236, 12)">
          <rect x="0" y="0" rx="4" width="92" height="28" fill="#F1F5F9"/>
          <text x="46" y="4.5" dy="0.9em" text-anchor="middle" font-size="13" font-weight="500" fill="#475569">
            نیرومندی باور
          </text>
        </g>
        <g transform="translate(12, 12)">
          <g>
              <rect x="0" y="0" rx="4" width="180" height="28" fill="#F8FAFC"/>
              <text x="172" y="14" text-anchor="start" dy="0.23em" font-size="13" font-weight="400" fill="#475569">{{questionTitles.[10]}}</text>
              <rect x="4" y="3.5" rx="7" width="20" height="20" fill="{{questions.[10].color}}"/>
              <text x="14" y="7.5" text-anchor="middle" dy="0.79em" font-size="13" font-weight="500" fill="#FFFFFF">{{questions.[10].user_answered}}</text>
              <g transform="translate(184, 0)">
                <rect x="0" y="0" rx="4" width="28" height="28" fill="none" stroke="#94A3B8" stroke-width="1"/>
                <text x="14" y="14" text-anchor="middle" dy="0.25em" font-size="11" font-weight="400" fill="#475569">
                  11
                </text>
              </g>
            </g>
        </g>
      </g>
      <g transform="translate(0, 432)">
        <rect x="0" y="0" rx="8" width="340" height="52" stroke="#E2E8F0" fill="none"/>
        <g transform="translate(236, 12)">
          <rect x="0" y="0" rx="4" width="92" height="28" fill="#F1F5F9"/>
          <text x="46" y="4.5" dy="0.9em" text-anchor="middle" font-size="13" font-weight="500" fill="#475569">
            اجتناب
          </text>
        </g>
        <g transform="translate(12, 12)">
          <g>
              <rect x="0" y="0" rx="4" width="180" height="28" fill="#F8FAFC"/>
              <text x="172" y="14" text-anchor="start" dy="0.23em" font-size="13" font-weight="400" fill="#475569">{{questionTitles.[11]}}</text>
              <rect x="4" y="3.5" rx="7" width="20" height="20" fill="{{questions.[11].color}}"/>
              <text x="14" y="7.5" text-anchor="middle" dy="0.79em" font-size="13" font-weight="500" fill="#FFFFFF">{{questions.[11].user_answered}}</text>
              <g transform="translate(184, 0)">
                <text x="14" y="14" text-anchor="middle" dy="0.25em" font-size="11" font-weight="400" fill="#475569">
                  12
                </text>
              </g>
            </g>
        </g>
      </g>
      <g transform="translate(0, 496)">
        <rect x="0" y="0" rx="8" width="340" height="92" stroke="#E2E8F0" fill="none"/>
        <g transform="translate(236, 12)">
          <rect x="0" y="0" rx="4" width="92" height="68" fill="#F1F5F9"/>
          <text y="15" text-anchor="middle" font-size="13" font-weight="500" fill="#475569">
            <tspan x="46" dy="1em">
              ارزیابی
            </tspan>
            <tspan x="46" dy="1.45em">
              افسردگی
            </tspan>
          </text>
        </g>
        <g transform="translate(12, 12)">
          {{#forLoop 0 2 1}}
            {{setVar "question" (lookup ../questions (math i '+' 12))}}
            <g transform="translate(0, {{math  30 '*' i}})">
              <rect x="0" y="0" rx="4" width="180" height="28" fill="#F8FAFC"/>
              <text x="172" y="14" text-anchor="start" dy="0.23em" font-size="13" font-weight="400" fill="#475569">{{lookup ../questionTitles (math i '+' 12)}}</text>
              <rect x="4" y="3.5" rx="7" width="20" height="20" fill="{{question.color}}"/>
              <text x="14" y="7.5" text-anchor="middle" dy="0.79em" font-size="13" font-weight="500" fill="#FFFFFF">{{question.user_answered}}</text>
              <g transform="translate(184, 0)">
                {{#if (boolean i '===' 1)}}
                  <rect x="0" y="0" rx="4" width="28" height="28" fill="none" stroke="#94A3B8" stroke-width="1"/>
                {{/if}}
                <text x="14" y="14" text-anchor="middle" dy="0.25em" font-size="11" font-weight="400" fill="#475569">
                  {{math i '+' 13}}
                </text>
              </g>
            </g>
          {{/forLoop}}
        </g>
      </g>
    </g>
    <g transform="translate(345, 612)">
      <g transform="translate(395, 0)">
        <rect rx="7" width="20" height="20" fill="{{questionAnswers.[0]}}"/>
        <text x="10" text-anchor="middle" dy="1.07em" font-size="13" font-weight="500" fill="#FFFFFF">0</text>
        <text x="-8" text-anchor="start" dy="1.1em" font-size="12" font-weight="400" fill="#64748B">صدق نمی‌کند</text>
      </g>
      <g transform="translate(280, 0)">
        <rect rx="7" width="20" height="20" fill="{{questionAnswers.[1]}}"/>
        <text x="10" text-anchor="middle" dy="1.07em" font-size="13" font-weight="500" fill="#FFFFFF">1</text>
        <text x="-8" text-anchor="start" dy="1.1em" font-size="12" font-weight="400" fill="#64748B">خیلی کم</text>
      </g>
      <g transform="translate(188, 0)">
        <rect rx="7" width="20" height="20" fill="{{questionAnswers.[2]}}"/>
        <text x="10" text-anchor="middle" dy="1.07em" font-size="13" font-weight="500" fill="#FFFFFF">2</text>
        <text x="-8" text-anchor="start" dy="1.1em" font-size="12" font-weight="400" fill="#64748B">کم</text>
      </g>
      <g transform="translate(123, 0)">
        <rect rx="7" width="20" height="20" fill="{{questionAnswers.[3]}}"/>
        <text x="10" text-anchor="middle" dy="1.07em" font-size="13" font-weight="500" fill="#FFFFFF">3</text>
        <text x="-8" text-anchor="start" dy="1.1em" font-size="12" font-weight="400" fill="#64748B">زیاد</text>
      </g>
      <g transform="translate(53, 0)">
        <rect rx="7" width="20" height="20" fill="{{questionAnswers.[4]}}"/>
        <text x="10" text-anchor="middle" dy="1.07em" font-size="13" font-weight="500" fill="#FFFFFF">4</text>
        <text x="-8" text-anchor="start" dy="1.1em" font-size="12" font-weight="400" fill="#64748B">خیلی زیاد</text>
      </g>
    </g>
    <g transform="translate(359, 648)">
      <g transform="translate(364, 0)">
        <rect rx="4" width="24" height="24" fill="none" stroke="#94A3B8" stroke-width="1"/>
        <text x="12" y="12" text-anchor="middle" dy="0.25em" font-size="11" font-weight="400" fill="#475569">
          11
        </text>
      </g>
      <g transform="translate(336, 0)">
        <rect rx="4" width="24" height="24" fill="none" stroke="#94A3B8" stroke-width="1"/>
        <text x="12" y="12" text-anchor="middle" dy="0.25em" font-size="11" font-weight="400" fill="#475569">
          14
        </text>
      </g>
      <text x="328" y="3.5" text-anchor="start" dy="0.93em" font-size="12" font-weight="400" fill="#64748B">
          پاسخ مراجع به این دو سوال جهت تحلیل، نیازمند توجه بیشتری است.
        </text>
    </g>
    <g transform="translate(88, 83)">
      {{!-- <rect x="0" y="0" rx="8" width="220" height="422" fill="black" opacity="0.1"/> --}}
      <g transform="translate(96, 5)">
        {{bar 28 384 (object tl=4 bl=0 tr=4 br=0) (toRad 0) fill="#F9FAFB"}}
      </g>
      <g transform="translate(0, 5)">
        <line x1="42" y1="0" x2="210" y2="0" stroke="#E5E7EB" stroke-width="1" stroke-dasharray="6 6"/>
        <text x="32" text-anchor="start" dy="0.25em" font-size="12" font-weight="400" fill="#9CA3AF">48</text>
        <text x="140" y="68" text-anchor="end" dy="0.25em" font-size="12" font-weight="400" fill="#9F1239">خیلی شدید</text>
      </g>
      <g transform="translate(0, 141)">
        <line x1="42" y1="0" x2="210" y2="0" stroke="#E5E7EB" stroke-width="1" stroke-dasharray="6 6"/>
        <text x="32" text-anchor="start" dy="0.25em" font-size="12" font-weight="400" fill="#9CA3AF">31</text>
        <text x="140" y="32" text-anchor="end" dy="0.25em" font-size="12" font-weight="400" fill="#E11D48">شدید</text>
      </g>
      <g transform="translate(0, 205)">
        <line x1="42" y1="0" x2="210" y2="0" stroke="#E5E7EB" stroke-width="1" stroke-dasharray="6 6"/>
        <text x="32" text-anchor="start" dy="0.25em" font-size="12" font-weight="400" fill="#9CA3AF">23</text>
        <text x="140" y="32" text-anchor="end" dy="0.25em" font-size="12" font-weight="400" fill="#F97316">متوسط</text>
      </g>
      <g transform="translate(0, 269)">
        <line x1="42" y1="0" x2="210" y2="0" stroke="#E5E7EB" stroke-width="1" stroke-dasharray="6 6"/>
        <text x="32" text-anchor="start" dy="0.25em" font-size="12" font-weight="400" fill="#9CA3AF">15</text>
        <text x="140" y="32" text-anchor="end" dy="0.25em" font-size="12" font-weight="400" fill="#EAB308">خفیف</text>
      </g>
      <g transform="translate(0, 333)">
        <line x1="42" y1="0" x2="210" y2="0" stroke="#E5E7EB" stroke-width="1" stroke-dasharray="6 6"/>
        <text x="32" text-anchor="start" dy="0.25em" font-size="12" font-weight="400" fill="#9CA3AF">7</text>
        <text x="140" y="28" text-anchor="end" dy="0.25em" font-size="12" font-weight="400" fill="#64748B">غیربالینی</text>
      </g>
      <g transform="translate(96, {{math 389 '-' (math severity.mark '*' 8)}})">
        {{bar 28 (math severity.mark '*' 8) (object tl=4 bl=0 tr=4 br=0) (toRad 0) fill="url(#line-bar)" clip-path="url(#barx)"}}
        {{#if (boolean severity.mark '>=' 7)}}
          <text x="14" y="8" text-anchor="middle" dy="0.73em" font-size="16" font-weight="600" fill="#FFFFFF">{{severity.mark}}</text>
        {{else}}
          <text x="14" y="-18" text-anchor="middle" dy="0.73em" font-size="16" font-weight="600" fill="#64748B">{{severity.mark}}</text>
        {{/if}}
      </g>
      <g transform="translate(-3.5, 386)" opacity="0.5" filter="url(#lineBase)">
        <line x1="3.5" y1="4.5" x2="222.5" y2="4.5" stroke="white" stroke-linecap="round"/>
      </g>
      <text x="110" y="406" text-anchor="middle" dy="0.73em" font-size="13" font-weight="500" fill="#4B5563">شدت وسواس - بی‌اختیاری</text>
    </g>
  </g>

{{/layout}}