{% set distribution = distribution or muscle_distribution %}
{% set category_name = category_name or 'Muscle Group' %}
{% set breakdown_id = category_name.lower().replace(' ', '-') %}

{% if distribution %}
<div class="px-4 py-3 bg-white relative" 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" hx-swap="outerHTML">

    <!-- Shared Popover Container (managed by Hyperscript) -->
    <div id="popover-{{ breakdown_id }}"
        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30 hidden bg-white border border-gray-200 shadow-2xl rounded-xl p-4 min-w-[200px] animate-in fade-in zoom-in duration-200"
        _="on click from elsewhere add .hidden to me">
        <div id="content-{{ breakdown_id }}"></div>
        <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
            _="on click add .hidden to #popover-{{ breakdown_id }}">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    </div>

    <div class="flex items-center justify-between mb-2">
        <h4 class="text-[9px] font-black text-gray-400 uppercase tracking-[0.25em]">{{ category_name }} 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 cursor-pointer">
        {% for item in 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 }};" _="on click 
                halt the event 
                put '<div class=\'flex flex-col gap-1\'>
                        <div class=\'flex items-center gap-2\'>
                            <div class=\'w-3 h-3 rounded-full\' style=\'background-color: {{ item.color }}\'></div>
                            <span class=\'font-black text-sm uppercase\'>{{ item.attribute_name }}</span>
                        </div>
                        <div class=\'text-2xl font-black text-gray-900\'>{{ item.percentage }}%</div>
                        <div class=\'text-[10px] font-bold text-gray-400 uppercase tracking-wider\'>{{ item.count }} Sets Targeted</div>
                     </div>' into #content-{{ breakdown_id }}
                remove .hidden from #popover-{{ breakdown_id }}"
            title="{{ item.attribute_name }}: {{ item.percentage }}%">

            <!-- Labels (Name & Percentage grouped and centered) -->
            <div
                class="flex items-center justify-center gap-1.5 leading-none text-white pointer-events-none px-1 overflow-hidden">
                {% if item.percentage > 18 %}
                <span class="text-[9px] font-black uppercase tracking-tighter truncate drop-shadow-sm">{{
                    item.attribute_name }}</span>
                <span class="text-[9px] font-bold opacity-90 whitespace-nowrap drop-shadow-sm">{{ 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"></div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}