{{define "title"}}git-pkgs proxy{{end}}

{{define "content"}}
<!-- Stats Grid -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
    <div class="bg-white dark:bg-gray-900 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-800">
        <div class="text-sm text-gray-500 dark:text-gray-400">Cached Artifacts</div>
        <div class="text-3xl font-bold mt-1">{{.Stats.CachedArtifacts}}</div>
    </div>
    <div class="bg-white dark:bg-gray-900 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-800">
        <div class="text-sm text-gray-500 dark:text-gray-400">Total Size</div>
        <div class="text-3xl font-bold mt-1">{{.Stats.TotalSize}}</div>
    </div>
    <div class="bg-white dark:bg-gray-900 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-800">
        <div class="text-sm text-gray-500 dark:text-gray-400">Packages</div>
        <div class="text-3xl font-bold mt-1">{{.Stats.TotalPackages}}</div>
    </div>
    <div class="bg-white dark:bg-gray-900 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-800">
        <div class="text-sm text-gray-500 dark:text-gray-400">Versions</div>
        <div class="text-3xl font-bold mt-1">{{.Stats.TotalVersions}}</div>
    </div>
</div>

{{if .EnrichmentStats.HasVulns}}
{{template "security_overview" .EnrichmentStats}}
{{end}}

<!-- Two Column Layout -->
<div class="grid md:grid-cols-2 gap-8 mb-8 items-start">
    <!-- Popular Packages -->
    <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-800">
            <h2 class="text-lg font-semibold">Popular Packages</h2>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-800">
            {{if .PopularPackages}}
            {{range .PopularPackages}}
            <div class="px-6 py-4 flex items-center justify-between">
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-2">
                        {{template "ecosystem_badge" .Ecosystem}}
                        <a href="/ui/package/{{.Ecosystem}}/{{.Name}}" class="font-medium truncate hover:text-blue-600 dark:hover:text-blue-400">{{.Name}}</a>
                    </div>
                    <div class="flex items-center gap-2 mt-1">
                        {{if .License}}<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-{{if eq .LicenseCategory "permissive"}}green{{else if eq .LicenseCategory "copyleft"}}pink{{else}}gray{{end}}-100 text-{{if eq .LicenseCategory "permissive"}}green{{else if eq .LicenseCategory "copyleft"}}pink{{else}}gray{{end}}-700 dark:bg-{{if eq .LicenseCategory "permissive"}}green{{else if eq .LicenseCategory "copyleft"}}pink{{else}}gray{{end}}-900 dark:text-{{if eq .LicenseCategory "permissive"}}green{{else if eq .LicenseCategory "copyleft"}}pink{{else}}gray{{end}}-300">{{.License}}</span>{{end}}
                        {{if .VulnCount}}<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300">{{.VulnCount}} vulns</span>{{end}}
                    </div>
                </div>
                <div class="grid shrink-0 grid-cols-[6.5rem_3.5rem] gap-x-3 text-sm text-gray-500 dark:text-gray-400">
                    <span class="text-left tabular-nums whitespace-nowrap">{{.Hits}} cache hits</span>
                    <span class="text-right tabular-nums whitespace-nowrap">{{.Size}}</span>
                </div>
            </div>
            {{end}}
            <div class="px-6 py-3 text-center border-t border-gray-200 dark:border-gray-800">
                <a href="/ui/packages?sort=hits" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">See all packages →</a>
            </div>
            {{else}}
            <div class="px-6 py-12 text-center text-gray-500 dark:text-gray-400">No packages cached yet</div>
            {{end}}
        </div>
    </div>

    <!-- Recently Cached -->
    <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-800">
            <h2 class="text-lg font-semibold">Recently Cached</h2>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-800">
            {{if .RecentPackages}}
            {{range .RecentPackages}}
            <div class="px-6 py-4 flex items-center justify-between gap-4">
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-2 min-w-0 overflow-hidden">
                        {{template "ecosystem_badge" .Ecosystem}}
                        <a href="/ui/package/{{.Ecosystem}}/{{.Name}}" class="font-medium truncate min-w-0 hover:text-blue-600 dark:hover:text-blue-400">{{.Name}}</a>
                        <span class="shrink-0 text-gray-500 dark:text-gray-400 whitespace-nowrap">@{{.Version}}</span>
                    </div>
                    <div class="flex items-center gap-2 mt-1">
                        {{if .License}}<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-{{if eq .LicenseCategory "permissive"}}green{{else if eq .LicenseCategory "copyleft"}}pink{{else}}gray{{end}}-100 text-{{if eq .LicenseCategory "permissive"}}green{{else if eq .LicenseCategory "copyleft"}}pink{{else}}gray{{end}}-700 dark:bg-{{if eq .LicenseCategory "permissive"}}green{{else if eq .LicenseCategory "copyleft"}}pink{{else}}gray{{end}}-900 dark:text-{{if eq .LicenseCategory "permissive"}}green{{else if eq .LicenseCategory "copyleft"}}pink{{else}}gray{{end}}-300">{{.License}}</span>{{end}}
                        {{if .IsOutdated}}<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300">outdated</span>{{end}}
                        {{if .VulnCount}}<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300">{{.VulnCount}} vulns</span>{{end}}
                    </div>
                </div>
                <div class="grid shrink-0 grid-cols-[5.5rem_3.5rem] gap-x-3 text-sm text-gray-500 dark:text-gray-400">
                    <span class="text-left tabular-nums whitespace-nowrap">{{.CachedAt}}</span>
                    <span class="text-right tabular-nums whitespace-nowrap">{{.Size}}</span>
                </div>
            </div>
            {{end}}
            <div class="px-6 py-3 text-center border-t border-gray-200 dark:border-gray-800">
                <a href="/ui/packages?sort=cached_at" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">See all packages →</a>
            </div>
            {{else}}
            <div class="px-6 py-12 text-center text-gray-500 dark:text-gray-400">No packages cached yet</div>
            {{end}}
        </div>
    </div>
</div>
{{end}}