<!-- Stats Cards Partial - refreshable via HTMX -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- Total Memories -->
    <div class="bg-dark-900 rounded-lg border border-gray-800 p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-400">Total Memories</p>
                <p class="text-3xl font-bold text-white mt-1">{{ stats.get('total_memories', 0) }}</p>
            </div>
            <div class="p-3 bg-blue-500/10 rounded-lg">
                <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
        </div>
    </div>

    <!-- Hot Cache -->
    <div class="bg-dark-900 rounded-lg border border-gray-800 p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-400">Hot Cache</p>
                <p class="text-3xl font-bold text-white mt-1">
                    {{ hot_stats.get('current_count', 0) }}
                    <span class="text-lg text-gray-500">/ {{ hot_stats.get('max_items', 20) }}</span>
                </p>
                {% if hot_stats.get('pinned_count', 0) > 0 %}
                <p class="text-xs text-yellow-400 mt-1">
                    {{ hot_stats.get('pinned_count', 0) }} pinned
                </p>
                {% endif %}
            </div>
            <div class="p-3 bg-orange-500/10 rounded-lg">
                <svg class="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
            </div>
        </div>
        <!-- Progress bar -->
        <div class="mt-4">
            <div class="w-full bg-gray-700 rounded-full h-2">
                {% set fill_pct = (hot_stats.get('current_count', 0) / hot_stats.get('max_items', 20) * 100) | round %}
                <div class="bg-orange-500 h-2 rounded-full transition-all duration-300"
                     style="width: {{ fill_pct }}%"></div>
            </div>
        </div>
    </div>

    <!-- Database Size -->
    <div class="bg-dark-900 rounded-lg border border-gray-800 p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-400">Database Size</p>
                <p class="text-3xl font-bold text-white mt-1">{{ format_bytes(db_size) }}</p>
            </div>
            <div class="p-3 bg-green-500/10 rounded-lg">
                <svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
                </svg>
            </div>
        </div>
    </div>
</div>
