{% comment %}
    One storage donut. The arc geometry is computed in Python -- a circle's arc is a dash length
    against its circumference, which is arithmetic the template language cannot do.
{% endcomment %}
<div class="hq-donut">
    <svg viewBox="-70 -70 140 140" aria-hidden="true">
        {% for slice in chart.slices %}
            <circle class="hq-slice hq-slice-{{ slice.key }}"
                    r="{{ chart.radius }}"
                    stroke-dasharray="{{ slice.dash }}"
                    stroke-dashoffset="{{ slice.offset }}"></circle>
        {% endfor %}
    </svg>
    <div class="hq-donut-key">
        <div class="hq-donut-total num">{{ chart.total_text }}</div>
        <div class="hq-donut-title">{{ chart_title }}</div>
        {% for slice in chart.slices %}
            <div class="hq-donut-row">
                <span class="hq-dot hq-dot-{{ slice.key }}"></span>
                <span class="hq-donut-label">{{ slice.label }}</span>
                <b class="num">{{ slice.text }}</b>
                <span class="hq-hint num">{{ slice.percent }}%</span>
            </div>
        {% endfor %}
    </div>
</div>