{% if muscle_distribution %}
<div class="bg-gray-50 p-2 rounded-lg border border-gray-100 flex flex-col gap-2 max-w-sm" id="muscle-breakdown"
    hx-get="{{ url_for('workout.get_workout_muscle_distribution', person_id=person_id, workout_id=workout_id) }}"
    hx-trigger="topsetAdded from:body" hx-swap="outerHTML">

    <div class="flex items-center gap-3">
        <!-- Mini Donut SVG -->
        <div class="relative w-16 h-16 flex-shrink-0">
            <svg viewBox="0 0 100 100" class="w-full h-full"
                style="transform: rotate(-90deg); transform-origin: center;">
                <circle cx="50" cy="50" r="40" fill="transparent" stroke="#e5e7eb" stroke-width="14" />
                {% for item in muscle_distribution %}
                <circle cx="50" cy="50" r="40" fill="transparent" stroke="{{ item.color }}" stroke-width="14"
                    stroke-dasharray="{{ item.dasharray }}" stroke-dashoffset="{{ item.dashoffset }}" pathLength="100"
                    stroke-linecap="round" style="transform-origin: center;"
                    class="transition-all duration-300 segment-{{ loop.index }}" />
                {% endfor %}
            </svg>
            <div class="absolute inset-0 flex items-center justify-center">
                <span class="text-[10px] font-black text-gray-700 tracking-tighter">{{ muscle_distribution[0].percentage
                    }}%</span>
            </div>
        </div>

        <!-- Mini Legend -->
        <div class="flex-grow min-w-0">
            <div class="flex flex-wrap gap-x-4 gap-y-2">
                {% for item in muscle_distribution %}
                <div class="flex items-center gap-1.5 whitespace-nowrap">
                    <div class="w-1.5 h-1.5 rounded-full" style="background-color: {{ item.color }}"></div>
                    <span class="text-[10px] font-bold text-gray-600 uppercase">{{ item.muscle_group }}</span>
                    <span class="text-[10px] text-gray-400 font-medium">{{ item.percentage }}%</span>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endif %}