{% load mathfilters %}
<!-- DETAILED OVERVIEW -->
<section class="grid grid-cols-1 lg:grid-cols-2 gap-4" aria-label="Resource allocation and flavors">
    <!-- Resource Allocation -->
    <div class="card bg-base-100 shadow-sm border-t-gradient-vtb" id="statsAllocationCard">
        <div class="card-body p-5">
            <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
                <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
                Resource Allocation
            </h2>
            {% if skeleton %}
            <div class="mb-4">
                <div class="flex justify-between text-xs mb-1">
                    <span class="text-base-content/70">CPU Allocation</span>
                    <span class="font-medium animate-pulse" data-stats="vcpu.allocated_total">— / — vCPU</span>
                </div>
                <div class="flex items-center gap-2">
                    <progress class="progress progress-primary flex-1 animate-pulse" data-stats="vcpu.progress" value="0" max="100"></progress>
                    <span class="text-xs font-medium w-12 text-right animate-pulse" data-stats="vcpu.allocated_percentage">—%</span>
                </div>
                <div class="flex justify-between text-xs mt-1 animate-pulse" data-stats="vcpu.overcommit">—</div>
            </div>
            <div>
                <div class="flex justify-between text-xs mb-1">
                    <span class="text-base-content/70">RAM Allocation</span>
                    <span class="font-medium animate-pulse" data-stats="vram.allocated_total">— / — GB</span>
                </div>
                <div class="flex items-center gap-2">
                    <progress class="progress progress-secondary flex-1 animate-pulse" data-stats="vram.progress" value="0" max="100"></progress>
                    <span class="text-xs font-medium w-12 text-right animate-pulse" data-stats="vram.allocated_percentage">—%</span>
                </div>
                <div class="flex justify-between text-xs mt-1 animate-pulse" data-stats="vram.overcommit">—</div>
            </div>
            {% else %}
            <!-- CPU Allocation -->
            <div class="mb-4">
                <div class="flex justify-between text-xs mb-1">
                    <span class="text-base-content/70">CPU Allocation</span>
                    <span class="font-medium">{{ vcpu.allocated }} / {{ vcpu.total }} vCPU</span>
                </div>
                <div class="flex items-center gap-2">
                    <progress class="progress progress-primary flex-1" value="{{ vcpu.allocated_percentage }}" max="100"></progress>
                    <span class="text-xs font-medium w-12 text-right">{{ vcpu.allocated_percentage|floatformat:1 }}%</span>
                </div>
                <div class="flex justify-between text-xs mt-1">
                    <span class="text-base-content/60">overcommit: {{ vcpu.overcommit_ratio|floatformat:1 }} / {{ vcpu.overcommit_max|floatformat:1 }}</span>
                    <span class="text-base-content/60">{{ vcpu.allocated_percentage|floatformat:1 }}% allocated</span>
                </div>
            </div>

            <!-- RAM Allocation -->
            <div>
                <div class="flex justify-between text-xs mb-1">
                    <span class="text-base-content/70">RAM Allocation</span>
                    <span class="font-medium">{{ vram.allocated|convert_bytes }} / {{ vram.total|convert_bytes }} GB</span>
                </div>
                <div class="flex items-center gap-2">
                    <progress class="progress progress-secondary flex-1" value="{{ vram.allocated_percentage }}" max="100"></progress>
                    <span class="text-xs font-medium w-12 text-right">{{ vram.allocated_percentage|floatformat:1 }}%</span>
                </div>
                <div class="flex justify-between text-xs mt-1">
                    <span class="text-base-content/60">overcommit: {{ vram.overcommit_ratio|floatformat:1 }} / {{ vram.overcommit_max|floatformat:1 }}</span>
                    <span class="text-base-content/60">{{ vram.allocated_percentage|floatformat:1 }}% allocated</span>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Flavor Distribution -->
    <div class="card bg-base-100 shadow-sm border-t-gradient-vtb" id="statsFlavorsCard">
        <div class="card-body p-5">
            <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
                <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="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"/>
                </svg>
                Top Flavors
            </h2>
            {% if skeleton %}
            <div class="space-y-3">
                <div class="bg-base-200/50 rounded-lg p-3">
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-sm font-medium animate-pulse" data-stats="flavors.first_name">—</span>
                        <span class="text-xs badge badge-primary animate-pulse" data-stats="flavors.first_count">— instances</span>
                    </div>
                    <div class="flex justify-between text-xs">
                        <span class="text-base-content/60">Share</span>
                        <span class="font-medium animate-pulse" data-stats="flavors.first_share">—%</span>
                    </div>
                </div>
                <div class="space-y-2">
                    <div class="flex justify-between items-center text-sm">
                        <div class="flex items-center gap-2">
                            <div class="w-1.5 h-1.5 rounded-full bg-base-content/30"></div>
                            <span class="animate-pulse" data-stats="flavors.second_name">—</span>
                        </div>
                        <span class="text-xs badge badge-outline animate-pulse" data-stats="flavors.second_count">—</span>
                    </div>
                    <div class="flex justify-between items-center text-sm">
                        <div class="flex items-center gap-2">
                            <div class="w-1.5 h-1.5 rounded-full bg-base-content/30"></div>
                            <span class="animate-pulse" data-stats="flavors.third_name">—</span>
                        </div>
                        <span class="text-xs badge badge-outline animate-pulse" data-stats="flavors.third_count">—</span>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="space-y-3">
                <!-- Most Common -->
                <div class="bg-base-200/50 rounded-lg p-3">
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-sm font-medium">{{ flavors.first_common_flavor.name }}</span>
                        <span class="text-xs badge badge-primary">{{ flavors.first_common_flavor.count }} instances</span>
                    </div>
                    <div class="flex justify-between text-xs">
                        <span class="text-base-content/60">Share</span>
                        <span class="font-medium">{{ flavors.first_common_flavor.count|div:vm.count|mul:100|floatformat:0 }}%</span>
                    </div>
                </div>

                <!-- Other Flavors -->
                <div class="space-y-2">
                    {% if flavors.second_common_flavor %}
                    <div class="flex justify-between items-center text-sm">
                        <div class="flex items-center gap-2">
                            <div class="w-1.5 h-1.5 rounded-full bg-base-content/30"></div>
                            <span>{{ flavors.second_common_flavor.name }}</span>
                        </div>
                        <span class="text-xs badge badge-outline">{{ flavors.second_common_flavor.count }}</span>
                    </div>
                    {% endif %}

                    {% if flavors.third_common_flavor %}
                    <div class="flex justify-between items-center text-sm">
                        <div class="flex items-center gap-2">
                            <div class="w-1.5 h-1.5 rounded-full bg-base-content/30"></div>
                            <span>{{ flavors.third_common_flavor.name }}</span>
                        </div>
                        <span class="text-xs badge badge-outline">{{ flavors.third_common_flavor.count }}</span>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</section>