{{define "security_overview"}}
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800 mb-8">
    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-800">
        <h2 class="text-lg font-semibold">Security Overview</h2>
    </div>
    <div class="p-6">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="text-center p-4 rounded-lg bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-900">
                <div class="text-2xl font-bold text-red-600 dark:text-red-400">{{.CriticalVulns}}</div>
                <div class="text-xs text-red-600 dark:text-red-400 uppercase font-medium">Critical</div>
            </div>
            <div class="text-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-200 dark:border-orange-900">
                <div class="text-2xl font-bold text-orange-600 dark:text-orange-400">{{.HighVulns}}</div>
                <div class="text-xs text-orange-600 dark:text-orange-400 uppercase font-medium">High</div>
            </div>
            <div class="text-center p-4 rounded-lg bg-yellow-50 dark:bg-yellow-950 border border-yellow-200 dark:border-yellow-900">
                <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{{.MediumVulns}}</div>
                <div class="text-xs text-yellow-600 dark:text-yellow-400 uppercase font-medium">Medium</div>
            </div>
            <div class="text-center p-4 rounded-lg bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-900">
                <div class="text-2xl font-bold text-green-600 dark:text-green-400">{{.LowVulns}}</div>
                <div class="text-xs text-green-600 dark:text-green-400 uppercase font-medium">Low</div>
            </div>
        </div>
        <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">
            {{.TotalVulnerabilities}} vulnerabilities tracked across {{.VulnSyncedPackages}} packages
        </p>
    </div>
</div>
{{end}}