{% if muscle_distribution %}
<div class="px-4 py-3 bg-white" 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 justify-between mb-2">
        <h4 class="text-[9px] font-black text-gray-400 uppercase tracking-[0.25em]">Muscle Distribution</h4>
    </div>

    <!-- Sleek Performance Bar -->
    <div class="w-full h-8 flex overflow-hidden rounded-lg bg-gray-100 shadow-inner p-0.5">
        {% for item in muscle_distribution %}
        <div class="h-full transition-all duration-700 ease-in-out flex items-center justify-center relative group first:rounded-l-md last:rounded-r-md"
            style="width: {{ item.percentage }}%; background-color: {{ item.color }};">

            <!-- Labels with optimized typography -->
            <div
                class="flex items-center justify-center gap-1 leading-none text-white pointer-events-none px-1 overflow-hidden">
                {% if item.percentage > 15 %}
                <span class="text-[9px] font-black uppercase tracking-tighter truncate drop-shadow-sm">{{
                    item.muscle_group }}</span>
                <span class="text-[9px] font-bold opacity-90 whitespace-nowrap">{{ item.percentage }}%</span>
                {% elif item.percentage > 8 %}
                <span class="text-[9px] font-black drop-shadow-sm">{{ item.percentage }}%</span>
                {% endif %}
            </div>

            <!-- Enhanced Hover State -->
            <div class="absolute inset-0 bg-white/15 opacity-0 group-hover:opacity-100 transition-opacity cursor-help">
            </div>

            <!-- Precision Tooltip -->
            <div
                class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900/95 backdrop-blur-sm text-white text-[9px] font-black rounded opacity-0 group-hover:opacity-100 transition-all transform translate-y-1 group-hover:translate-y-0 whitespace-nowrap z-20 pointer-events-none shadow-lg border border-white/5 uppercase tracking-wider">
                {{ item.muscle_group }} <span class="mx-1 opacity-40">•</span> {{ item.percentage }}%
                <div
                    class="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900/95">
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}