{{#> layout}}

  <defs>
    {{#with spec.raw.circle}}
      <clipPath id="raw-circle-roll">
        {{gauge R r brs (object start=angles.start end=angles.end) false}}
      </clipPath>
    {{/with}}
    {{#with spec.items.circle}}
      <clipPath id="items-circle-roll">
        {{gauge R r brs (object start=angles.start end=angles.end) false}}
      </clipPath>
    {{/with}}
  </defs>

  <g transform="translate(0, {{spec.profile.padding.y}})">
    <g transform="translate({{math spec.profile.dimensions.width '/' 2}}, {{math (math (math (math spec.raw.circle.R '+' spec.raw.ticks.line.width) '+' spec.raw.ticks.line.offset) '+' spec.raw.ticks.number.offset) '+' 10}})">
      <g transform="translate(-{{spec.raw.rect.offsetX}}, -{{spec.raw.circle.R}})">
        {{#with spec.raw.rect}}
          <path
            d="M 0 0 h -{{math width '-' rb}} a {{rb}} {{rb}} 90 0 0 -{{rb}} {{rb}} v {{math
              height
              '-'
              (math 2 '*' rb)
            }} a {{rb}} {{rb}} 90 0 0 {{rb}} {{rb}} h {{math width '-' rb}} Z"
            fill="{{@root.spec.raw.fill}}"
          ></path>
          <g transform="translate(-{{math width '/' 2}}, {{math height '/' 2}})">
            <text x="0" y="0" text-anchor="middle" font-size="22" font-weight="600" fill="white" dy="6.5">{{@root.raw.label.title}}</text>
          </g>
        {{/with}}
      </g>
      {{#with spec.raw.circle}}
        {{gauge R r (object tl=0 tr=0 bl=0 br=0) (object start=angles.start end=angles.end) direction clip-path="url(#raw-circle-roll)" fill="#F3F4F6"}}
        {{gauge R r (object tl=0 tr=0 bl=0 br=0) (object start=angles.start end=@root.raw.zeta) direction clip-path="url(#raw-circle-roll)" fill=@root.spec.raw.fill fill-opacity=@root.raw.opacity}}
      {{/with}}
      <text x="0" y="0" text-anchor="middle" font-size="32" font-weight="700" fill="{{spec.raw.fill}}" dy="10">{{raw.mark}}</text>
      {{#each raw.ticks as |tick|}}
        {{setVar "r2" (math (math @root.spec.raw.circle.R "+" @root.spec.raw.ticks.line.offset) "+" @root.spec.raw.ticks.line.width)}}
        {{setVar "r1" (math @root.spec.raw.circle.R "+" @root.spec.raw.ticks.line.offset)}}
        {{setVar "p1" (polarToCartesian r1 tick.angle)}}
        {{setVar "p2" (polarToCartesian r2 tick.angle)}}
        <line
          x1="{{p1.x}}"
          y1="{{p1.y}}"
          x2="{{p2.x}}"
          y2="{{p2.y}}"
          stroke="#F4F4F5"
          stroke-dasharray="2.5 4.5"
          stroke-linecap="round"
          stroke-width="2"
        ></line>
        {{setVar "p" (polarToCartesian (math r2 '+' @root.spec.raw.ticks.number.offset) tick.angle)}}
        <text
          x="{{p.x}}"
          y="{{p.y}}"
          text-anchor="{{ternary (boolean (boolean tick.angle '===' (toRad -90)) '||' (boolean tick.angle '===' (toRad 90))) 'middle' (ternary (boolean tick.angle '>' (toRad 90)) 'start' 'end')}}"
          font-size="16"
          fill="#D4D4D8"
          dy="5"
        >{{tick.number}}</text>
      {{/each}}

      <g transform="translate(0, {{math (math spec.raw.circle.R '+' spec.items.offsetY) '+' spec.items.circle.R}})">
        {{#each items as |item index|}}
          <g transform="translate({{math (math (math -2 '*' index) '+' 1) '*' (math @root.spec.items.distanceX '/' 2)}}, 0)">
            <g transform="translate(-{{@root.spec.items.rect.offsetX}}, -{{@root.spec.items.circle.R}})">
              {{#with @root.spec.items.rect}}
                <path
                  d="M 0 0 h -{{math width '-' rb}} a {{rb}} {{rb}} 90 0 0 -{{rb}} {{rb}} v {{math
                    height
                    '-'
                    (math 2 '*' rb)
                  }} a {{rb}} {{rb}} 90 0 0 {{rb}} {{rb}} h {{math width '-' rb}} Z"
                  fill="{{item.fill}}"
                ></path>
                <g transform="translate(-{{math width '/' 2}}, {{math height '/' 2}})">
                  <text x="0" y="0" text-anchor="middle" font-size="18" font-weight="500" fill="white" dy="5">{{item.label.title}}</text>
                </g>
              {{/with}}
            </g>
            {{#with @root.spec.items.circle}}
              {{gauge R r (object tl=0 tr=0 bl=0 br=0) (object start=angles.start end=angles.end) direction clip-path="url(#items-circle-roll)" fill="#F3F4F6"}}
              {{gauge R r (object tl=0 tr=0 bl=0 br=0) (object start=angles.start end=item.zeta) direction clip-path="url(#items-circle-roll)" fill=item.fill fill-opacity=item.opacity}}
            {{/with}}
            <text x="0" y="0" text-anchor="middle" font-size="24" font-weight="500" fill="{{item.fill}}" dy="8">{{item.mark}}</text>
            {{#each item.ticks as |tick|}}
              {{setVar "r2" (math (math @root.spec.items.circle.R "+" @root.spec.items.ticks.line.offset) "+" @root.spec.items.ticks.line.width)}}
              {{setVar "r1" (math @root.spec.items.circle.R "+" @root.spec.items.ticks.line.offset)}}
              {{setVar "p1" (polarToCartesian r1 tick.angle)}}
              {{setVar "p2" (polarToCartesian r2 tick.angle)}}
              <line
                x1="{{p1.x}}"
                y1="{{p1.y}}"
                x2="{{p2.x}}"
                y2="{{p2.y}}"
                stroke="#F4F4F5"
                stroke-dasharray="2.5 4.5"
                stroke-linecap="round"
                stroke-width="2"
              ></line>
              {{setVar "p" (polarToCartesian (math r2 '+' @root.spec.items.ticks.number.offset) tick.angle)}}
              <text
                x="{{p.x}}"
                y="{{p.y}}"
                text-anchor="{{ternary (boolean (boolean tick.angle '===' (toRad -90)) '||' (boolean tick.angle '===' (toRad 90))) 'middle' (ternary (boolean tick.angle '>' (toRad 90)) 'start' 'end')}}"
                font-size="16"
                fill="#D4D4D8"
                dy="5"
              >{{tick.number}}</text>
            {{/each}}
            <g transform="translate(0, {{math @root.spec.items.circle.R '+' @root.spec.items.label.offsetY}})">
              {{#each (lineWrap item.label.desc 28) as | line index |}}
                <text x="0" y="{{math index '*' @root.spec.items.label.lineHeight}}" text-anchor="middle" font-size="16" dy="5" fill="#71717A">{{line}}</text>
              {{/each}}
            </g>
          </g>
        {{/each}}
      </g>
    </g>
  </g>

{{/layout}}