{% load mathfilters %}
<!-- QUICK STATS ROW -->
<section class="grid grid-cols-1 lg:grid-cols-3 gap-4" aria-label="Quick stats">
    <!-- CPU Utilization -->
    <div class="card bg-base-100 shadow-sm hover:shadow transition-shadow" id="statsPcpuCard">
        <div class="card-body p-5">
            {% if skeleton %}
            <div class="flex items-center justify-between mb-3">
                <div>
                    <h3 class="text-sm font-medium text-base-content/70">CPU Utilization</h3>
                    <div class="text-xs text-base-content/60 mt-0.5 animate-pulse"><span data-stats="pcpu.usage">—</span> / <span data-stats="pcpu.total">—</span> CPU</div>
                </div>
                <div class="text-xl font-bold text-primary animate-pulse" data-stats="pcpu.used_percentage">—%</div>
            </div>
            <div class="space-y-2">
                <div class="flex justify-between text-xs">
                    <span class="text-base-content/60">Used</span>
                    <span class="font-medium animate-pulse" data-stats="pcpu.usage_val">—</span>
                </div>
                <progress class="progress progress-primary w-full animate-pulse" data-stats="pcpu.progress" value="0" max="100"></progress>
                <div class="flex justify-between text-xs">
                    <span class="text-base-content/60">Free</span>
                    <span class="font-medium animate-pulse" data-stats="pcpu.free">—</span>
                </div>
            </div>
            {% else %}
            <div class="flex items-center justify-between mb-3">
                <div>
                    <h3 class="text-sm font-medium text-base-content/70">CPU Utilization</h3>
                    <div class="text-xs text-base-content/60 mt-0.5">{{ pcpu.usage|floatformat:1 }} / {{ pcpu.total }} CPU</div>
                </div>
                <div class="text-xl font-bold text-primary">{{ pcpu.used_percentage|floatformat:1 }}%</div>
            </div>
            <div class="space-y-2">
                <div class="flex justify-between text-xs">
                    <span class="text-base-content/60">Used</span>
                    <span class="font-medium">{{ pcpu.usage|floatformat:1 }} CPU</span>
                </div>
                <progress class="progress progress-primary w-full" value="{{ pcpu.used_percentage }}" max="100"></progress>
                <div class="flex justify-between text-xs">
                    <span class="text-base-content/60">Free</span>
                    <span class="font-medium">{{ pcpu.free }} CPU</span>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- RAM Utilization -->
    <div class="card bg-base-100 shadow-sm hover:shadow transition-shadow" id="statsPramCard">
        <div class="card-body p-5">
            {% if skeleton %}
            <div class="flex items-center justify-between mb-3">
                <div>
                    <h3 class="text-sm font-medium text-base-content/70">RAM Utilization</h3>
                    <div class="text-xs text-base-content/60 mt-0.5 animate-pulse"><span data-stats="pram.usage_gb">—</span> / <span data-stats="pram.total_gb">—</span> GB</div>
                </div>
                <div class="text-xl font-bold text-secondary animate-pulse" data-stats="pram.used_percentage">—%</div>
            </div>
            <div class="space-y-2">
                <div class="flex justify-between text-xs">
                    <span class="text-base-content/60">Used</span>
                    <span class="font-medium animate-pulse" data-stats="pram.usage_gb_val">—</span>
                </div>
                <progress class="progress progress-secondary w-full animate-pulse" data-stats="pram.progress" value="0" max="100"></progress>
                <div class="flex justify-between text-xs">
                    <span class="text-base-content/60">Free</span>
                    <span class="font-medium animate-pulse" data-stats="pram.free_gb">—</span>
                </div>
            </div>
            {% else %}
            <div class="flex items-center justify-between mb-3">
                <div>
                    <h3 class="text-sm font-medium text-base-content/70">RAM Utilization</h3>
                    <div class="text-xs text-base-content/60 mt-0.5">{{ pram.usage|convert_bytes }} / {{ pram.total|convert_bytes }} GB</div>
                </div>
                <div class="text-xl font-bold text-secondary">{{ pram.used_percentage|floatformat:1 }}%</div>
            </div>
            <div class="space-y-2">
                <div class="flex justify-between text-xs">
                    <span class="text-base-content/60">Used</span>
                    <span class="font-medium">{{ pram.usage|convert_bytes }} GB</span>
                </div>
                <progress class="progress progress-secondary w-full" value="{{ pram.used_percentage }}" max="100"></progress>
                <div class="flex justify-between text-xs">
                    <span class="text-base-content/60">Free</span>
                    <span class="font-medium">{{ pram.free|convert_bytes }} GB</span>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Instance Summary -->
    <div class="card bg-base-100 shadow-sm hover:shadow transition-shadow" id="statsVmCard">
        <div class="card-body p-5">
            {% if skeleton %}
            <div class="flex items-center justify-between mb-3">
                <div>
                    <h3 class="text-sm font-medium text-base-content/70">Instances</h3>
                    <div class="text-xs text-base-content/60 mt-0.5 animate-pulse"><span data-stats="vm.active">—</span> active / <span data-stats="vm.stopped">—</span> stopped</div>
                </div>
                <div class="text-xl font-bold text-accent animate-pulse" data-stats="vm.count">—</div>
            </div>
            <div class="space-y-3">
                <div class="flex justify-between items-center text-xs">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-success"></div>
                        <span>Most Used Flavor</span>
                    </div>
                    <span class="font-medium animate-pulse" data-stats="flavors.first_name">—</span>
                </div>
                <div class="flex justify-between items-center text-xs">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-info"></div>
                        <span>Avg. vCPU/VM</span>
                    </div>
                    <span class="font-medium animate-pulse" data-stats="vm.avg_cpu">—</span>
                </div>
                <div class="flex justify-between items-center text-xs">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-warning"></div>
                        <span>Density</span>
                    </div>
                    <span class="font-medium animate-pulse" data-stats="vm.density">—</span>
                </div>
            </div>
            {% else %}
            <div class="flex items-center justify-between mb-3">
                <div>
                    <h3 class="text-sm font-medium text-base-content/70">Instances</h3>
                    <div class="text-xs text-base-content/60 mt-0.5">{{ vm.active }} active / {{ vm.stopped }} stopped</div>
                </div>
                <div class="text-xl font-bold text-accent">{{ vm.count }}</div>
            </div>
            <div class="space-y-3">
                <div class="flex justify-between items-center text-xs">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-success"></div>
                        <span>Most Used Flavor</span>
                    </div>
                    <span class="font-medium">{{ flavors.first_common_flavor.name }}</span>
                </div>
                <div class="flex justify-between items-center text-xs">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-info"></div>
                        <span>Avg. vCPU/VM</span>
                    </div>
                    <span class="font-medium">{{ vm.avg_cpu|floatformat:1 }}</span>
                </div>
                <div class="flex justify-between items-center text-xs">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-warning"></div>
                        <span>Density</span>
                    </div>
                    <span class="font-medium">{{ vm.density|floatformat:1 }}/host</span>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</section>