<div class="progress-ring-wrapper">
  <svg
    class="progress-ring"
    width="{{ size }}"
    height="{{ size }}">
    <circle
      class="circle circle-bg"
      stroke="{{ stroke_color_bg }}"
      stroke-width="10"
      fill="transparent"
      r="52"
      cx="60"
      cy="60"
    />
    <circle
      class="circle circle-{{ name }}"
      stroke="{{ stroke_color }}"
      stroke-width="10"
      fill="transparent"
      r="52"
      cx="60"
      cy="60"
    />
    <text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="{{ number_color }}" dy=".3em">
      {{ count }}
    </text>
  </svg>
  <h3 class="np-card-content-title progress-circle-label">
    {{ name }}
  </h3>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    let circle = document.getElementsByClassName("circle-{{ name }}")[0];
    let radius = circle.r.baseVal.value;
    let circumference = radius * 2 * Math.PI;

    circle.style.strokeDasharray = `${circumference} ${circumference}`;
    circle.style.strokeDashoffset = `${circumference}`;

    function setProgress(percent) {
      circle.style.strokeDashoffset = circumference - percent * circumference;
    }
    setProgress('{{ count | divided_by: total }}')
  })
</script>
