{% set distribution = distribution|default([], true) %}
{% set category_name = category_name|default('Muscle Group', true) %}
{% set breakdown_id = category_name.lower().replace(' ', '-') %}
<div class="workout-breakdown" id="{{ breakdown_id }}-breakdown"
    hx-get="{{ url_for('workout.get_workout_distribution', person_id=person_id, workout_id=workout_id, category=category_name) }}"
    hx-trigger="topsetAdded from:body, topsetChanged from:body" hx-swap="outerHTML">
    <h3>{{ category_name }}</h3>
    {% if distribution %}
    <div class="workout-distribution-bar" aria-hidden="true">
        {% for item in distribution %}<span style="width: {{ item.percentage }}%; background-color: {{ item.color }};"></span>{% endfor %}
    </div>
    <ul class="workout-distribution-legend">
        {% for item in distribution %}
        <li><span class="workout-legend-label"><i style="background-color: {{ item.color }};" aria-hidden="true"></i>{{ item.attribute_name }}</span><span title="{{ item.count }} sets targeted">{{ item.percentage }}%</span></li>
        {% endfor %}
    </ul>
    {% else %}<p class="workout-subtle">No categorized sets yet.</p>{% endif %}
</div>