{{#> layout}}

<g transform="translate({{spec.profile.padding.x}}, {{spec.profile.padding.y}})">
  <g transform="translate(525, 526)">
    <g fill="none" stroke="#E1EDF2">
      {{assignGlobal "radius" spec.polygons.radius}}
      {{assignGlobal "dist" (math (math spec.polygons.radius '-' spec.polygons.centerOffset) '/' spec.items.maxValue)}}
      {{#with spec.polygons as | polygonsSpec |}}
        {{#forLoop 0 (math @root.spec.items.maxValue '+' 1) 1}}
          {{polygon polygonsSpec.n @root.radius polygonsSpec.startAngle}}
          {{assignGlobal "radius" (math @root.radius '-' @root.dist)}}
        {{/forLoop}}
      {{/with}}
    </g>
    <g fill="none" stroke="#111827" stroke-width="4">
      {{polygon spec.polygons.n (getArrOfProp items 'radius') spec.polygons.startAngle}}
    </g>
    <g fill="white">
      {{#each items as |item index|}}
        {{setVar "point" (polarToCartesian item.radius item.angle)}}
        <g transform="translate({{point.x}}, {{point.y}})">
          <circle
          cx="0"
          cy="0"
          r="{{@root.spec.items.dataPoints.radius}}"
          stroke="{{item.fill}}"
          stroke-width="2" />
          <text
          x="0"
          y="0"
          font-size="16"
          font-weight="600"
          text-anchor="middle"
          dy="5"
          fill="{{item.fill}}">
          {{item.mark}}
          </text>
        </g>
      {{/each}}
    </g>
    <g fill="#4B5563" font-size="16" dy="5">
      {{#each items as |item index|}}
        {{setVar "point" (polarToCartesian (math @root.spec.polygons.radius '+' @root.spec.items.labels.offset) item.angle)}}
        <g transform="translate({{point.x}}, {{point.y}})">
          <text
          x="0"
          y="0"
          transform="translate(0, -{{@root.spec.items.labels.paddingY}})"
          font-weight="600"
          text-anchor="middle">
          {{item.label.name}}
          </text>
          <text
          x="0"
          y="0"
          transform="translate(0, +{{@root.spec.items.labels.paddingY}})"
          text-anchor="middle">
          ({{item.label.type}})
          </text>
        </g>
      {{/each}}
    </g>
    <g>
      {{#each ticks as |tick index|}}
        {{setVar "point" (displacePoint (polarToCartesian tick.radius tick.angle) tick.disVector tick.disValue)}}
        <g transform="translate({{point.x}}, {{point.y}})">
          <rect
          x="0"
          y="0"
          width="{{@root.spec.items.ticks.rectDim}}"
          height="{{@root.spec.items.ticks.rectDim}}"
          transform="translate(-{{math @root.spec.items.ticks.rectDim '/' 2}},-{{math @root.spec.items.ticks.rectDim '/' 2}})"
          fill="white" />
          <text
          x="0"
          y="0"
          font-size="12"
          text-anchor="middle"
          dy="3"
          fill="#9CA3AF">
          {{tick.number}}
          </text>
        </g>
      {{/each}}
    </g>
  </g>
</g>
{{/layout}}